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 (http://www.dynamicdrive.com/forums/showthread.php?t=24866) 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.