IE6 Margin/Padding problem

John_Mc

Hi,

I have a problem in IE6 whereby I have a container floated on the right of the page, with 0 margin & 0 padding. However, there is still a gap of between 5-10 pixels between the div container and the right hand side.

In IE7 & Firefox everything is fine and the page looks perfect.

The CSS styles are as follows:

The container is located within #ContentSection:

#ContentSection {
width:745px;
float:right;
padding-top:3px;
padding-bottom:2px;
margin-left:0px;
margin-right:0px;
padding-left:0px;
padding-right:0px;
}

The container itself is:

.OTCRightCol
{
float:right;
width:210px;
margin:0px;
padding:0px;
}

I have included screenshots to show you how it's meant to look and how it actually looks.

Would appreciate any suggestions as I'm just about out of them!

Adam

How does your html and body tag look? Try putting

html, body {
margin: 0;
padding: 0;
}

at the top of your css.

John_Mc

Mirror wrote: »

How does your html and body tag look? Try putting

html, body {
margin: 0;
padding: 0;
}

at the top of your css.

Hi,

Thanks for your reply - I tried that but no luck

louie

have you any other "body" tag in your css file?

John_Mc

louie wrote: »

have you any other "body" tag in your css file?

I have 2 stylesheets, one for FF & IE 7. I have a HTML conditional comment which loads a stylesheet for IE6 after this so any styles in that over-ride the main stylesheet.

The Body tag for IE7/FF is:

body {
background-color: #ebece6;
}

Adding that other Body tag to IE6 should be alright.. shouldn't it?

Adam

Oh well if you already have seperate stylesheets why not just add a line to the css for IE6 saying margin-right: -10px; ?

John_Mc

Mirror wrote: »

Oh well if you already have seperate stylesheets why not just add a line to the css for IE6 saying margin-right: -10px; ?

Haha nice one, that worked a treat!

Never had to use negative margin before, thanks a million for the help - you saved me a lot of banging my head against the wall!

Liam Byrne

John_Mc wrote: »

Hi,

I have a problem in IE6 whereby I have a container floated on the right of the page, with 0 margin & 0 padding. However, there is still a gap of between 5-10 pixels between the div container and the right hand side.

It sounds like it's some variation of the IE6 double-margin float bug ? Try adding display:inline to the CSS for that object, and see if that solves the problem.

Liam