Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    125
    Thanks
    30
    Thanked 0 Times in 0 Posts

    CSS not displaying correctly in Firefox.

    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:
    Code:
    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:
    Code:
    <body style="background-image: url(images/nav/bkgndGrid.gif); margin: 0; padding: 0;">
    Thanks for any help that can be offered!!!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,880
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Posts
    125
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    add overflow: hidden; to the container CSS rule
    Thanks! - that worked great!!! What is that, though? Like, what does it mean/do?...

    Quote Originally Posted by VIPStephan View Post
    And to test on multiple versions of IE there’s 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!

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,880
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Quote Originally Posted by ShootingBlanks View Post
    Thanks! - that worked great!!! What is that, though? Like, what does it mean/do?...
    http://www.quirksmode.org/css/clearing.html

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Posts
    125
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Thanks again....much appreciated!


  •  

    Posting Permissions

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