Div off center in IE 5.5

[gwh]

Hi everyone,

I have a div (div#navretail) in a page that's wrapping some nav buttons (just an unordered list). I've given this outer div a specific height and width and also given it auto left and right margins. The div and the nav inside all center correctly in all browsers - even Internet explorer 5, but for some reason in IE 5.5 it's off center quite a bit.

I've uploaded my page here:

http://www.officelinkonline.com.au/kc/

... so I wondered if anyone would be able to take a look to see what might be happening here, or if there is a workaround. The css files used are in the same directory as the page if needed.

I just can't work it out. You'd think that if it worked in IE 5 then it should at least work in 5.5 - right?

Would really appreciate any help.

[Neno]

Just a thought, maybe you should use text-align: center in your main div, whatever the name is? You would however specify the text-align for all other divs in that case...

[mark87]

I've had a look through and can't see anything which stands out really as being the culprit.

How does it look in IE6? - that'll be the browser the majority of users use now.

I also noticed that you could use CSS shorthand alot to shorten your CSS.

ie.

margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;

Can become :

margin: 0 auto;

And :

border-top: 1px solid #D4E3D9;
border-right: 1px solid #D4E3D9;
border-bottom: 1px solid #D4E3D9;
border-left: 1px solid #D4E3D9;

Can simply be :

border: 1px solid #D4E3D9;

[_Aerospace_Eng_]

Neno is right, IE5.5 doesn't understand margin:auto; the trick is to use text-align:center; in the body and use text-align:left; for everything else just as Neno stated. I don't code for IE5 but I'm a bit surprised that an older version does support margin:auto;

[gwh]

Thanks for the reply. It does work in IE 6 but I really need to support at least as far back as IE 5.5.

I've tried putting conditional comments in to target just 5.5:

<!--[if IE 5.5]>
<style type="text/css">
div#navretail, div#navcorp { margin-left: -40px; }
</style>
<![endif]-->

but even this won't work. I cant' figure it out - I thought this would work.

Also, just one other thing if I could ask: the image "jumptocorporate" in the top right corner is overlapping the line below it in IE 5 and 5.5, whereas in IE6 it's fine - is there a workaround for this also?

[_Aerospace_Eng_]

Read this (http://tantek.com/CSS/Examples/boxmodelhack.html). You can target IE5.5 by using the box model hack. This might work in IE5 as well not sure. Basically anything after the voice family isn't read by IE5.5

[gwh]

Unfortunately the box model hack targets 5.0 and 5.5 so it probably won't help me out here because it's working already in 5 so I just need to somehow target 5.5.

Not sure why the conditional comment isn't taking - any further suggestions?