Margin-top -bottom messed up on floating divs in IE 8

I’m designing a website for a friend. It looks great in Firefox and has no CSS errors according to this.

Website: http://paekas.kenkendersonpresents.com/summer/

However, when viewed in IE 8, the menu and content area jump up into the title bar. I’m used to hearing about how IE messes up the left and right margins, but I’m not familiar with this.

Does anyone have any tips on how to resolve this issue?

As for the code if you would like to look at it, the css is inside the html document for now, so if you view source, you’ll be able to see it.

I just hope you are planning on moving all those images for text into the CSS where they belong, and maybe actually use semantic markup for things like the menus.

But again, write semantic markup for all the content FIRST, then make the layout in CSS, THEN hang the graphics on it.

Otherwise you end up with broken image interactions like the one behind that “updates” image with it’s broken height forcing a scrollbar on it… all thanks to using a fixed height image behind it, the pinnacle of web design /FAIL/.

Hi,

The first thing you need is a doctype on your page so that IE is in standards mode:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

You’ve made it very awkward with all that negative positioning and it would have been so much easier if you just did everything in order. :slight_smile:

It looks as though you can fix IE by using a margin-bottom here and it shouldn’t affect anyone else.:


#profile {  margin-bottom:130px;}


You’ve set the container to both min-height:100% and height:100% which means that it can never grow. Remove the height :100% as follows:


#container {
 [B]   /*height: 100%;*/[/B]
   [B] min-height: 100%;[/B]
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-image: url(http://paekas.kenkendersonpresents.com/summer/images/header.png);
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
}
[B]* html #container{height:100%}/( min-height for ie6*/[/B]


You have also done this in multiple rules:


    height: 266px;
    min-height: 266px;
    max-height: 266px;

There is no point in setting all three properties to be the same and the same units as all you get is height:266px so remove the other two. If you want min-height then just use min-height.

Remove that deprecated center tag as it is not needed as the layout will be centred with auto margins on the fixed width containers anyway.

The tree root is on top of your scrollbar n the header and therefore can’t be scrolled so you will have to move one or the other.

Hope that helps :slight_smile:

Thanks for all your help!!

The margin-bottom method didn’t work but I followed some of your other tips and rearranged some of the divs and got rid of a lot of the negative margins. I’ve got it to work now so thank you very much :3