DIV not displaying correctly in Firefox

[toad78]

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:

<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

[DaveWoods]

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

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

[toad78]

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

#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

[DaveWoods]

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%;
}

[drhowarddrfine]

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.

[rguy84]

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:

.clear {
 height: 1px;
 clear:both;
 }

[DaveWoods]

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.

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

[rguy84]

cause I was just offering another solution?

[markbrown4]

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.