Horizontal Image NavBar - breaking in IE

Why is IE doing this?

[DiAMOndDavE]

Hello folks,

Trying to be progressive I have ditched HTML tables and built a XHTML/CSS page. It has four pictures running horizontally across the page which are sized exactly to the pixel to fit inside the container div. I would show you a URL but it will get snipped out so bear with me.

It validates as XHTML transitional, the CSS validates. It looks fine on Mozilla/PC and Safari/Mac but using IE it breaks. The navbar uses CSS instead of JavaScript for the rollovers as per an Eric Meyer tutorial. In IE6 for instance the last pic on the end of the row stubbornly refuses to stay in line and wraps underneath and busts the page layout.

It is as if the pixel width dimensions are too 'fat' for IE and it's choked. I have been careful to avoid any box model issues so am lost as to why IE is doing this.

Anyone heard of IE doing that kind of thing and suggest a fix?

[isitreal]

I had that problem on the last site I did too, I was trying to line up 3 divs to the pixel, I gave up finally since I was on the clock.

It sounds like you might be trying to float them, if you are, that tends to lead to these kinds of problems.

Try this: set the four sub divs like this:

#container {
position:relative;
width: 500px;
}
#div1, #div2, #div3, #div4 {
position: absolute;
top: 0px;
}
#div1 {
left:0px;
}
#div2 {
left:125px;
}
#div3 {
left:250px;
}
#div4 {
left:375px;
}

see if that works, put background colors on each to see what's going on. If you are using margins or borders (both add to the dimensions of the divs) on them don't, same with padding, then once you have it stable start adding stuff until you find what is breaking it in IE.