...

View Full Version : CSS not displaying correctly in Firefox.



ShootingBlanks
01-17-2008, 05:33 PM
I have a page with a background that is a repeated image. Then I have a 600-width black "#container" div that is supposed to span the top to the bottom of the page (regardless of how much content expands the "#container"). Within the "#container" div are a few more divs...

On IE7 this displays fine (I haven't tested older IEs because I can't), but on Firefox, once you put too much content in the divs within the "#container" div, it stops expanding it downward. Or else, maybe the background grid stops. I'm not sure. Here's the link to the site online to see what I mean, and I'll post my code below:

A page with little content that displays properly in both browsers:
http://www.americanidiotsband.com/bio.html

A page with lots of content (carriage returns) in the divs: (displays fine in IE7 but not in Firefox)
http://www.americanidiotsband.com/

Here is the code used:

html, body {
background: #000;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
color: #FFF;
}

#container {
background: #000;
width: 780px;
margin:auto;
padding: 5px 0 5px 0;
text-align: center;
min-height: 600px;
border-left: 6px solid #330000;
border-right: 6px solid #330000;
}
/* hide from IE Mac\*/
* html #container {
min-height:600px;
}

And then in the body of the actual pages, I use:

<body style="background-image: url(images/nav/bkgndGrid.gif); margin: 0; padding: 0;">

Thanks for any help that can be offered!!!

VIPStephan
01-17-2008, 05:46 PM
Actually Firefox is more likely to display the correct results while IE is guessing what you could have meant.

The reason for the background to stop is because you floated your content without clearing that float. Either add a footer before the closing container tag that clears this float or add overflow: hidden; (or auto) to the container CSS rule (trying overflow: auto; added a horizontal scrollbar at the bottom of the container which means that you’ll have to recalculate the widths as there’s something too wide).

And to test on multiple versions of IE there’s multiple IE (http://tredosoft.com/Multiple_IE).

ShootingBlanks
01-17-2008, 06:19 PM
add overflow: hidden; to the container CSS rule
Thanks! - that worked great!!! What is that, though? Like, what does it mean/do?...


And to test on multiple versions of IE there’s multiple IE (http://tredosoft.com/Multiple_IE).
I had this downloaded on my old computer and it was an awesome asset. Then I got a new work computer, and when I re-installed it, it always launched IE7 no matter which version I select from the "Multiple IEs" program folder. Sucks! :(

Thanks again!:thumbsup:

VIPStephan
01-17-2008, 06:32 PM
Thanks! - that worked great!!! What is that, though? Like, what does it mean/do?...

http://www.quirksmode.org/css/clearing.html

ShootingBlanks
01-17-2008, 06:33 PM
Thanks again....much appreciated!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum