Internet Explorer 6 and compatibility

dr4cula

09-17-2007, 04:17 PM

Hi,

I have a slight problem with my design. I coded it into xHTML and CSS. Everything seems to work fine and it actually works fine with most of the browsers:

Safari 3.0.3 - works as it should
Firefox 2.0.0.6 - works as it should
Internet Explorer 7 - works as it should
Opera 9.23 - works as it should
Internet Explorer 6 - header is out of place

Can someone tell me how can I fix my design with IE 6? The page itself is here (http://www.dbzclan.com/selko_valid), CSS file is here (http://www.dbzclan.com/selko_valid/style.css).

Thanks,
dr4cula

jlhaslip

09-17-2007, 05:27 PM

Use padding instead of Margin on the header like this:

.header_logo {
width: 199px;
padding-left: 9px;
margin-top: 3px;
float: left;
}
IE gets borked with margins on floated elements.

_Aerospace_Eng_

09-17-2007, 06:06 PM

IE6 doubles margins if they are in the direction of the float. I wouldn't recommend using padding in this case. You can still use margins but you need to add display:inline;
.header_logo {
width: 199px;
margin-left: 9px;
margin-top: 3px;
float: left;
display:inline;
}

dr4cula

09-19-2007, 03:39 PM

Thank you both for your quick answers! Unfortunately I don't have any access to IE6 any time soon, so I will have to test it later on. When I have tested it and it didn't succeed, then I'll let you know. Thank you both again for useful information.

_Aerospace_Eng_

09-20-2007, 01:41 AM