Cross Browser Div Centering Problems

How to center a Div with a max-width so it works in both IE6 and the others

[Old_Enough]

Here is a slightly different twist to something that seems to have been much discussed here.

I want to center an image horizontally in a window using just CSS. The image should automatically re-size if the window is smaller than the width of the image, otherwise the width of the image should be roughly the same as the original graphic.

I am much more concerned with future compatability than backwards for this exercise, so lets just worry about the more recent releases of browsers.

The following works a charm in Netscape and Opera, but has a problem in IE6. Since IE6 doesn't support the max-width attribute, I have to use an expression to achieve the desired results, however... the expression seems to clobber the auto margins left and right which I usually use to center a div, and the image winds up hard against the left margin. I really have to work to pry it off the left margin and when I do get it to move, it (whatever I've had to do to get it off the left margin) screws up how the div/image appears in the other browsers.

If I can figure out how to get it centered in IE6, I suppose I could use some browser specific CSS to avoid causing problems for the others, but just getting it off the left side of the page is a challenge, much less getting it centered.

Any comments or suggestions?

the CSS:

div.normalpic {
margin-right:auto;
margin-left:auto;
}

div.normalpic img {
border: 2px solid #000000;
position: relative;
width: 100%;
height: auto;
}

the xhtml:

<div class="normalpic" style="max-width:446px; width:expression(
document.body.clientWidth > (1.14*446)?
'446px':
'auto');">
<img src="Images/fig2.jpg" alt="Fig. 2" name="Fig2" />

(The math in the expression is to account for a 10% margin on the page plus a bit. This div is nested inside of another one that sets up the general page attributes, including 10% margins. 446px is the width of the image I have been experimenting with.)

Thanks! (and great board -- I just discovered it)

[TGecho]

Well, it seems to work fine in my copy of IE6. However it crashes IE every time I resize the page.

Oh yeah, and Welcome to WebmasterWorld!

[Old_Enough]

LOL... well, that isn't quite the effect I was after, but it is different.

In my version of IE 6 (6.0.288) the image resizes until the window is large enough to hold the whole picture and then stays constant from that point on. Unfortunately, right up against the left margin.

And thanks for the welcome.

[TGecho]

Hmm... looking at your expression again, what if you changed

'446px':'auto');">
to
'446px':'100%');">

[Old_Enough]

Just tried it. It didn't make any difference to how things are working. And since that change would only apply when the window was smaller than the picture, and the problem exists no matter what the window width is, it wasn't a very likely place for the problem to be. It should be something that applies no matter how wide or narrow the window is.

But thanks for the suggestion. It was something I hadn't tried before.