CSS Layout not working in IE 5

[missing-score]

Ok, some of you may have seen my other thread in genereal web building, but anyways, I am having a bit of a problem getting this site to work in IE 5.

http://www.freeipb.net/ibe

Basically, due to IE5 not supporting CSS or doctypes properly, my code is causing the right had navigational menu to start below the content block. Its to do with the XHTML 1.0 box model I think, and the way padding works.

As you can see, it validates XHTML 1.0 strict at the moment, which is good, and I want to keep it that way. I know of a method for loading an alternate stylesheet in ie. The:

<!-->
<link.....
<!-->

method which use the CSS in IE but not in any other browser. The problem is my site works in IE6, so using that method would cause it to break in IE 6 becuase of how I would have to use the CSS.

Finally, I dont want to use any form of javascript to detect browser ect.

This is alot I know, but does anyone have any suggestions on how I could make it work in IE5?

Thanks
Matt

[ez4me2c3d]

this is just another reminder of what a pain in the *** web design really is. html is easy, but coding for 50 different browsers isn't. sucks, good luck in your journey.

[missing-score]

actually i think i have a way to overcome the problem.

its becuase of the IE box model, but if i remove all padding and then add more padding to the paragraph elements then it will stay at its fixed width and as the paragraphs are arent fixed width, it *should* solve the problem.

[ronaldb66]

CSS Hack

That, or use any one of the numerous CSS hacks to supply IE5.x/win with the appropriate value for width; see the HTML & CSS Documentation sticky on top of this forum for more info, or try the infamous Box Model Hack by Tantek اelik.

[me']

Erm... did you fix it already, because it looks fine in IE5.0

[missing-score]

hmm... doesnt on my machine, and at school which is running IE 5

The exact version i believe is 5.0.1 Service Pack 2

[me']

Screenshot:

(IE5.01sp2)

[missing-score]

thats very odd. What resolution are you at (although it shouldnt make much difference)?

Very odd, looks like this on mine:

[me']

1024x768. I'm running IE5 alongside IE4, IE5.5 and IE6 but again, that shouldn't matter

What does anyone else get?

[missing-score]

same here.

ok, when you rollover the menu items does the item indent itself very slightly (2px) or does it stay static.

[me']

Indents. I assume that's intentional as Fx does the same.

[missing-score]

hmm, on my IE 5.0.1 SP2 it doesnt have any effect onmouseover which is odd. I know its like this at school aswell.

[missing-score]

Ive managed to get it working now.

My original idea didnt work, as I had already done that during the design process, so there wasnt any padding to change, but in the end what I did was changed the width of the right hand content block from 140px to 130px (this made it line up in IE5), then I added 10px left padding which made it look more central in IE6 and Mozilla. The design looks very slightly different (the menu is more in the center) but i think it looks better like that anyway so im happy.

If you want to have a look to see how I did it or at the css you can goto:

http://www.freeipb.net/ibe/index.html and get the source, and:
http://www.freeipb.net/ibe/emotion.css for the CSS file.