Treehouse: Grow your CSS skills. Land your dream job.

Margin only takes effect through IE Developer Toolbar

  • # November 13, 2008 at 4:47 pm

    Yet another very bizarre issue with IE6. My page has a footer and I want to give it a margin-top of -6px:

    div#footer {margin-top: -6px;}

    For some reason, the margin-top doesn’t take effect – the footer stays in the exact same position. Yet when I inspect the footer through the IE Developer Toolbar, it shows "margin-top: -6px" as an applied style. If I then add "margin-top: -6px" to the footer through the toolbar – the same value for margin-top that’s already there – then it moves up 6px.

    No matter what I do, I cannot get the -6px to apply without adding it manually through the toolbar. I specified it in an external stylesheet, an internal stylesheet, and even inline in the footer div. I added !important to the declaration everywhere that I tried it – no good.

    The strangest thing of all – if I add "margin-top: -6px" inline, and then delete that declaration through the toolbar, THEN the footer moves up 6px. In other words, when I use the toolbar to remove the margin that I specified, the footer then moves into the position that it should have been in when the margin was there!


    # November 13, 2008 at 6:32 pm

    You gotta assign a height to it.

    # November 13, 2008 at 10:19 pm
    "Jonz" wrote:
    You gotta assign a height to it.

    It has a height, I just left that out of the sample code just to make it easier to read.

    # November 13, 2008 at 11:07 pm

    Ok I made this example here.

    It seems to work properly for me if you still having trouble after you look at the source paste the whole css for the container and footer so I can see.

    Edit: Tested in:

    • IE 5.01[/*:m]
    • IE 5.5[/*:m]
    • IE 6[/*:m]
    • IE 7[/*:m]
    • FireFox 3.0.4[/*:m][/list:u]
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.