ie fluid container background bug

[orthodoxkohen]

I'm having trouble with a 1px discrepancy when giving my wrapper a background image. The right side of my container is sticking out 1 pixel farther than the inner div's. This seems to be a problem only in ie. Here is a link to my page. www.para-media.net. CSS below.

***********************
/*layout.css*/
body {
text-align:center;
margin: 0px auto;
}

#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 760px;
background: url("/path/to/your/background_cols.gif") repeat;
}

#header {
margin: 0 0 0px 0;
background: yellow;
}

#side-a {
float: left;
width: 200px;
}

#side-b {
float: right;
width: 150px;
}

#content {
float: left;
width: 53%;
}

#footer {
clear: both;
background: #A2A2A2;
}
***************************

any fixes for ie would be greatly appreciated.

[boogyman]

Catching 1 pixel rendered incorrectly is very very difficult because of the rendering engines, especially IE, which notoriously has a poor rendering engine. If this is a margin/padding issue, what you can do is apply

margin: 0;
paddding: 0;

to all of your styles, and if the problem still persists, than its something to do with the browser itself not your coding.

Please review our Posting Policies especially in regards to Number 8 about posting computer code

[Medyman]

try adding overflow:hidden to the container.

If shouldn't do anything in FF, but if it does, make it an IE-only rule, as such:

*overflow:hidden

[orthodoxkohen]

After trying your suggestions, and a lot of reading, it seems that it is an IE bug.

I think what I need to do is remove the backround image from the container div and use fauxcolumns with equal heights to apply the background equally to all 3 columns.

I'm going to try that tonight and post the code if it works.