Grow your CSS skills. Land your dream job.

what is happening with my wrapper?

  • # July 12, 2009 at 5:11 pm

    what is happening with the wrapper in FF?

    it shows on top and bottom of the box in IE7, but not in FF3.5, why?

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Pellentesque habitant morbi tristique senectus et netus et malesuada fames.


    Al

    Rob
    # July 12, 2009 at 5:38 pm

    sorry, what’s going on? lol

    eXo
    # July 13, 2009 at 3:00 am
    "al_m473" wrote:
    Code:

    should be

    Code:
    # July 13, 2009 at 9:39 am

    changed it to ID, was fiddling around with the code and uploaded the wrong version.

    problem is that in FF, the wrapper color disapppears on the top of the box and on the bottom of the box. the space
    occupied by the wrapper does not, just the background color. in IE, the background color shows up.

    I will attach images

    IE:

    [attachment=1]IE_image.JPG[/attachment]

    FF:

    [attachment=0]FF_image.JPG[/attachment]

    Al

    # July 13, 2009 at 1:33 pm

    something else that is strange, if I use Firebug and highlight the wrapper, the wrapper starts 20px down from the top
    of the page. there is no margin or padding on the wrapper and should be at the top of the screen, the #box has a
    margin of 20px which seems to be affecting how the wrapper is displaying. I know I can get around this situation by
    specifying padding: 20px on the wrapper but I would like to know why this is happening.

    Al

    # July 13, 2009 at 2:15 pm

    Each browser has its own default css settings, that’s why most people start with a reset.
    Try this for now:

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    # July 13, 2009 at 4:04 pm

    not that, apostrophe, I do have that in my CSS code

    Al

    # July 14, 2009 at 2:19 pm

    Ok, I just had 10 minutes and as you didn’t give us a link I recreated your page.

    Basically what is happening is the containing div is collapsing. Just add overflow:hidden; to #wrapper.

    # July 14, 2009 at 4:14 pm

    is the collapsing a function of FF? is that just how it works?

    Al

    # July 14, 2009 at 4:35 pm

    Just a quirk of css.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".