My code below works great in Internet Explorer; however the dark brown vertical borders do not extend the entire length in Firefox. Is should run the entire length of the green box. Does anybody know if there is a way to fix this? Thanks for your help! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/strict.dtd"> <html> <head> <title></title> <style type="text/css"> body { font-size: 9pt; font:70% Arial, Helvetica, sans-serif; background-color: #A9A59C; margin: 1px 1px 1px 1px; padding:1px; /* centers page */ text-align: center; line-height:150%; } #container { position: relative; width: 760px; text-align: left; border: 1px solid #676767; /* medium gray */ background-color: #E8E6DE; /* light gray */ margin:0 auto; /* THIS IS NECESSARY TO CENTER PAGES IN FIREFOX! */ } #search_feature { /* prototype.php */ color: #858585; position: absolute; top: 42px; left: 0px; width: 736px; height: 80px; padding: 0px 24px 0px 0px; text-align: right; } #header { height: 80px; width: 100%; position: relative; border: 1px none #fff; border-top: 18px solid #E8E6DE; border-bottom: 18px solid #E8E6DE; background-color: white; } #internal_container { position: relative; width: 712px; background-color: #E8E6DE; border-left: 24px solid #4A4342; /* dark gray */ border-right: 24px solid #4A4342; } #contents { float: right; margin: 0 4px 0 0; /* outside the border */ width: 464px; /* this changes the width of the content area */ min-height: 312px; padding: 18px; border: 1px solid #cccccc; background-color: green; } #menu { margin-left:4px; /* outside the border */ width: 196px; /*height: 312; /* must be set for this value or the brown vertical columns extend past the menu area */ } #footer { clear: both; /* NEEDED TO EXTEND FOOTER PAST COLUMNS IN FIREFOX! */ font-size: 9pt; font-family: Arial, Helvetica, sans-serif; border-top: 18px solid #E8E6DE; border-bottom: 18px solid #E8E6DE; background-color: white; height: 60px; } </style> </head> <body> <div id="container"> <div id="header"> Logo Goes Here </div> <!-- header --> <div id="search_feature"> <?php echo "April 1, 2008"; ?> </div> <!-- search_feature --> <div id="internal_container"> <div id="contents"> <?php // This is used to fill up the content area with text. // $counter=0; while ( $counter<24){ $counter++; echo "TEXT GOES HERE!<br>"; } ?> </div> <!-- contents --> <div id="menu"> <A HREF="index.php"><IMG SRC="images/off-button-home.gif" WIDTH=195 HEIGHT=70 BORDER=0 ALT=""></A><A HREF="company.php"><IMG SRC="images/off-button-company.gif" WIDTH=195 HEIGHT=72 BORDER=0 ALT=""></A><A HREF="portfolio.php"><IMG SRC="images/off-button-portfolio.gif" WIDTH=195 HEIGHT=70 BORDER=0 ALT=""></A><A HREF="products.php"><IMG SRC="images/off-button-products.gif" WIDTH=195 HEIGHT=69 BORDER=0 ALT=""></A><A HREF="communication.php"><IMG SRC="images/off-button-contact.gif" WIDTH=195 HEIGHT=69 BORDER=0 ALT=""></A> </div> <!-- menu --> </div> <!-- internal container --> <div id="footer"> Footer Stuff Goes Here </div> <!-- footer --> </div> <!-- container --> </body> </html> Code (markup):
Add bolded to style: #internal_container { position: relative; width: 712px; background-color: #E8E6DE; border-left: 24px solid #4A4342; /* dark gray */ border-right: 24px solid #4A4342; overflow:hidden; }
What you are witnessing is a bug in IE. Firefox, as usual, is performing correctly. Parent elements are never to extend to contain floated elements. IE is wrong.
Pruad hit it on the head - the width you declared is tripping haslayout, which makes IE wrap floats (incorrectly) - adding overflow:hidden should make it wrap floats everywhere else (according to the specification) That said, you've got some REALLY confusing and conflicting CSS in there - you set the font size, then you set the size and face, THEN you set the line-height again? Condense that down. You set a styled no-border, then set it AGAIN. 1px 'none' might conflict with the 100% width declaration (but might not)... MOST of these are block level and not floating, so even saying 100% width shouldn't be needed, likewise there's nothing there that 'needs' all those position:relative declarations. (though that might be from elements you didn't include that are absolute inside them?) The dee dee dee comments aren't a big help either - Width changes the width of the section it's in? I'M SHOCKED. (I say, I say, that's a joke son). Also, since you have floats you might want to be putting the HTML comments BEFORE their closing sections as you may run up against IE's 'double rendering' or 'dissapearing content' bugs as you plug in real content. Oh, and your doctype is an invalid mis-match of tranny descriptor pointing at the strict dtd - which is it? Here it is 'cleaned up' - should work in everything from IE 5.5 to FF3 and all 31 flavors in-between. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <title></title> <style type="text/css"> * { margin:0; padding:0; } body { padding:2px; text-align:center; /* center #container in IE5 */ font:normal 70%/150% arial,helvetica,sans-serif; background:#A9A59C; } #container { position:relative; overflow:hidden; /* wrap floats */ width:760px; /* also trips haslayout, so floats are wrapped in IE */ margin:0 auto; text-align:left; background:#E8E6DE; /* warm gray */ border:1px solid #666; /* medium gray */ } #search_feature { /* prototype.php */ position:absolute; top:42px; left:0px; width:736px; height:80px; padding-right:24px; text-align: right; color:#858585; } #header { height:80px; background:#FFF; border:solid #E8E6DE; border-width:0 18px; } #internal_container { overflow:hidden; /* wrap floats */ zoom:1; /* haslayout, wrap floats in IE - we could use width here, but with the border that breaks IE5.x - does not validate OH ****ING WELL!!! */ background:#E8E6DE; border:solid #4A4342; border-width:0 24px; } #contents { float:right; width:464px; margin:0 4px 0 0; padding:18px; border:1px solid #CCC; background:#080; } #menu { width:196px; margin-left:4px; /* outside the border */ } #footer { height:60px; font:normal 14px/16px arial,helvetica,sans-serif; border:solid #E8E6DE; border-width:0 18px; background:#FFF; } </style> </head><body> <div id="container"> <div id="header"> Logo Goes Here <!-- header --></div> <div id="search_feature"> April 1, 2008 <!-- search_feature --></div> <div id="internal_container"> <div id="contents"> TEXT GOES HERE!<br>TEXT GOES HERE!<br>TEXT GOES HERE!<br>TEXT GOES HERE!<br> TEXT GOES HERE!<br>TEXT GOES HERE!<br>TEXT GOES HERE!<br>TEXT GOES HERE!<br> TEXT GOES HERE!<br>TEXT GOES HERE!<br>TEXT GOES HERE!<br>TEXT GOES HERE!<br> TEXT GOES HERE!<br>TEXT GOES HERE!<br>TEXT GOES HERE!<br>TEXT GOES HERE!<br> TEXT GOES HERE!<br>TEXT GOES HERE!<br>TEXT GOES HERE!<br>TEXT GOES HERE!<br> TEXT GOES HERE!<br>TEXT GOES HERE!<br>TEXT GOES HERE!<br>TEXT GOES HERE!<br> <!-- contents --></div> <div id="menu"> <a href="index.php"> <img src="images/off-button-home.gif" width="195" height="70" border="0" alt="" > </a><a href="company.php"> <img src="images/off-button-company.gif" width="195" height="72" border="0" alt="" > </a><a href="portfolio.php"> <img src="images/off-button-portfolio.gif" width="195" height="70" border="0" alt="" > </a><a href="products.php"> <img src="images/off-button-products.gif" width="195" height="69" border="0" alt="" > </a><a href="communication.php"> <img src="images/off-button-contact.gif" width="195" height="69" border="0" alt="" > </a> <!-- menu --></div> <!-- internal container --></div> <div id="footer"> Footer Stuff Goes Here <!-- footer --></div> <!-- container --></div> </body></html> Code (markup):