SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question DIV not displaying correctly in Firefox

    The following attachment goofed up.jpg is an example of the problem I'm encountering with Firefox. The box surrounding the image is not displaying correctly. I want it to look like the file named correctlydisplayed.jpg. Internet Explorer displays it great, but not so great with Firefox 2.0.0.7.

    My CSS is as follows:

    #wrapper {
    background: #330000;
    margin: 100px auto;
    width: 900px;
    height: auto;
    padding: 0 0 1em 0;
    border: 5px groove #993300;
    }

    #maincontent h1 {
    font: bold 22px/25px Arial, sans-serif;
    color: white;
    margin-left: 1em;
    margin-top: 1em;
    padding: 1em 0;
    }

    #maincontent h2 {
    font: bold 16px/normal Arial, Helvetica, sans-serif;
    color: #FFFF66;
    margin-left: 1.35em;
    text-transform: uppercase;
    color: #FFFF66;
    padding: 0;
    margin-bottom: 0;
    }

    #maincontent {
    width: 700px;
    margin-left: 5%;
    }

    #maincontent p {
    font: normal 10pt/13pt Arial, Helvetica, sans-serif;
    color: white;
    margin-left: 2em;
    }

    img.sc {
    border-top: 2px solid #000000;
    border-right: 3px solid #999999;
    border-bottom: 3px solid #999999;
    border-left: 2px solid #000000;
    margin-bottom: 0.5em;
    float: left;
    margin-right: 10px;
    height: auto;
    width: 200px;
    }

    .price {
    font-style: italic;
    font-weight: bold;
    float: right;
    }

    And here is my code:

    HTML Code:
    <div id="wrapper">
    <div id="nav">
          <?php insertMenu($pages, 'thispage'); ?>
    </div>
    <div id="maincontent">
    <h1>For Sale</h1>
    <p><img src="images/sale/<?php echo $row_getForSale['fs_image']; ?>" alt="" class="sc" /></p>
    <h2><?php echo $row_getForSale['forsale_title']; ?></h2>
    <p><?php echo nl2br($row_getForSale['forsale_desc']); ?>
    <span class="price"><?php echo $row_getForSale['forsale_price']; ?></span></p>
    </div>
    
    </div>
    Thank you in advanced to those who can help!

    Heather
    Attached Images Attached Images

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's difficult to see as you've provided php code and not the generated source code but it looks as though you're applying a float to the image which is causing it to come out of the document flow and therefore the #wrapper background is ignoring it.

    If you apply overflow: hidden; to the #wrapper then it should fix the problem

    Code:
    #wrapper {
    background: #330000;
    margin: 100px auto;
    width: 900px;
    height: auto;
    padding: 0 0 1em 0;
    border: 5px groove #993300;
    overflow: hidden;
    }

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    823
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Overflow: Hidden

    Quote Originally Posted by csswiz View Post

    If you apply overflow: hidden; to the #wrapper then it should fix the problem

    Code:
    #wrapper {
    background: #330000;
    margin: 100px auto;
    width: 900px;
    height: auto;
    padding: 0 0 1em 0;
    border: 5px groove #993300;
    overflow: hidden;
    }
    WOW! It worked! Thank you CSSWIZ! I wouldn't have been able to figure that one out!

    Heather

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll probably also need to apply haslayout to the #wrapper for it to work in IE6 and below.

    For this I'd use conditional comments for lte IE 6 and include a separate stylesheet and then within this simply add

    #wrapper {
    height: 1&#37;;
    }

  5. #5
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And the whole problem lies in IE's improper expanding of parent elements to contain floated ones. This is incorrect behavior and Firefox is performing correctly. Never, ever use IE as an example of correct behavior.

  6. #6
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I use another technique than what csswiz said. Before the closing wrapper div, I would make a div with a class clear. That class looks like:
    Code css:
    .clear {
     height: 1px;
     clear:both;
     }
    Ryan B | My Blog | Twitter

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drhowarddrfine View Post
    And the whole problem lies in IE's improper expanding of parent elements to contain floated ones. This is incorrect behavior and Firefox is performing correctly. Never, ever use IE as an example of correct behavior.
    Completely agree, if you're going to test in a specific browser then use a standards compliant one. Opera or Firefox should be your first port of call, make a layout work in these first and then go back and have a look at IE6 but it's always easier to check as you code and then fix the problems as you encounter them.

    Personally I code to standards, validate as I'm going and then at the end fix the problems in IE6 but this is more due to experience and knowing as I'm coding that I'm going to encounter the double margin bug or need to apply haslayout but knowing where in my code these problems will occur so they're easy to fix.

    I wouldn't encourage everyone to use this approach unless you're aware of bugs you're likely to encounter by coding in a certain way. To start with you're much better off fixing a problem as it's created rather than be overwhelmed with a page of bugs.

    Quote Originally Posted by rguy84
    I use another technique than what csswiz said. Before the closing wrapper div, I would make a div with a class clear.
    Why introduce extra markup when there's a solution that you can simply apply to the same div that's causing the problem?

    I'd always try and put a fix in without introducing extra markup where possible to keep the HTML as minimal as possible. On occasions there may not be an alternative but in this situation it seems as though you'd be inserting extra HTML into your code to solve a presentational problem in IE6 which has an easier solution

  8. #8
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    cause I was just offering another solution?
    Ryan B | My Blog | Twitter

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    cause I was just offering another solution?
    And it's doesn't have the same consequences that the overflow method sometimes has, sometimes a simple clearing div like that is needed. The simplest method is always the best to use.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •