Results 1 to 6 of 6

Thread: Firefox not showing background of div

  1. #1
    Join Date
    Apr 2008
    Posts
    84
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Firefox not showing background of div

    Hi, all.

    Can someone have a looksee and tell me what I did wrong here:
    http://www.defossesdesign.com/mockups/bigsky/

    The repeating background doesn't appear on the #contentbox div in Firefox.

    Firefox also has a big empty space at the bottom for some reason.

    I put all the CSS in the index source code.

    Thanks in advance.
    Last edited by Geezer D; 11-05-2008 at 12:58 PM.

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    That's because #contentbox has no calculated height. When you float an element, it (for all practical purposes) removes itself physically from that element. Though, it is bounded by the parent element's boundaries (unless absolutely positioned).

    To fix this, simply add the following before the closing <div> tag of #contentbox
    Code:
    <br style='clear:both;' />
    Last edited by Medyman; 11-02-2008 at 04:38 PM. Reason: sp

  3. #3
    Join Date
    Apr 2008
    Posts
    84
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Great, thanks a lot.

    I probably went about it the wrong way, seams odd that I'd have to do that.
    I never learn this stuff, it seams I spend 3 or 4 hours fighting with the layout everytime I make a site starting with code from a tutorial, lol.

    Any clue why FF has the bigger open space at the bottom?

    Maybe something to do with "display:table" ?

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Any clue why FF has the bigger open space at the bottom?
    Different browsers will render the overall height differently. If you want something 100% the same, you could set a height on #contentbox. That would get rid of the need for the <br /> clearing fix.

  5. #5
    Join Date
    Oct 2008
    Location
    Columbia Md
    Posts
    27
    Thanks
    1
    Thanked 8 Times in 8 Posts

    Default

    Quote Originally Posted by Geezer D View Post
    Any clue why FF has the bigger open space at the bottom?
    Code:
    #outerbox {
    	background: url(images/main_header.jpg) no-repeat center top;
    	width: 950px;
    	margin:120px auto 0px;
    }
    The large open space at the bottom is generated from your #outerbox margin. To remove it, you need to specify the bottom margin separately from the top. Margin: 120px auto applies a 120 pixel margin to both the top and bottom. Adding a third number to the margin attribute will apply a separate margin value to the bottom margin.

    Looking at your code, Firefox is displaying it properly while IE is doing it's own thing.

    Hope this helps!
    Ben

  6. #6
    Join Date
    Apr 2008
    Posts
    84
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Yup, that done it.

    Gracias, tovarisch!

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
  •