• I’m trying to add a bottom margin to my footer but it doesn’t work in IE, working in FF and Opera.

    I’ve this

    #container
    {
    width: 700px;
    margin: 0 auto 0 auto;
    background: url(images/bg.gif) repeat-y;
    margin-bottom: 20px;
    }

    but in IE, there isn’t a bottom margin, is there anything wrong with my code?

    Thanks 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • I think IE is finiky in, well, everything – so the 2 different margin styles might be the problem. In the first margin rule, you margin: 0 auto 0 auto (top-right-bottom-left), so you’re giving the bottom 0, but then you give it 20px.

    I have no idea if this is the actual cause, but common sense would suggest that it is. Get rid of the margin bottom and change the 1st margin to margin:0 auto 20px auto; and see if that works.

    Cheers, Michael.

    Thread Starter Truth

    (@truth)

    thanks Michael, I tried that but it’s still the same

    try viewing this: http://liberta.espoireve.com/

    in IE and at the bottom there still isn’t the 20 px margin

    or maybe I added the CSS in the wrong place?

    I’m not sure what the nomargin.js script does, I know nothing about java, so looking at it is about as productive as me looking at, well java!

    You added the margin code to the #container, maybe try adding it to the footer and then the body if that doesn’t work. If that’s a no go, sometimes padding (for me anyway) does the trick, so you could try just adding padding-bottom:20px; if there is none already in the div or just amend the padding that’s there (top-right-bottom-left).

    If all none of that works, then I am just as mystified as you – it’s late here though, so I will blame any obvious oversight on being tired!

    The sight looks great though! Even without the bottom space in IE, it still looks good! I’ll check back on this thread tomorrow and try it again if the solution is still elusive.

    Cheers,
    Michael.

    Thread Starter Truth

    (@truth)

    The nomargin.js is for pops up 🙂

    I tried with padding-bottom: 20px and it works but I wanted the 20px area to have no background but it renders a background to that of the #container. I wanted it to be like what it looks like in FF in other words. Thanks for the help 🙂 I’ll look for other ways..

    Thread Starter Truth

    (@truth)

    I think I fixed it.

    I added

    border-bottom: 20px solid #FFA99F;

    to #container and it works in IE, FF and Opera.

    Thanks for the help 🙂

    Thread Starter Truth

    (@truth)

    Edit: Not yet fixed, this doesn’t work when I’ve fixed background 🙁

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘bottom margin in IE’ is closed to new replies.