vertical align & internet explorer

[stitchy]

Hi,

I know this question has probably been asked a thousand times but I am totally stumped on this issue.

I have a site which needs photos vertically centered and while I can make it work nicely in Firefox, no matter what I do it never works in Internet explorer.
I've followed several different examples and its always the same, which makes me think I'm missing something obvious.

This is my first css site. What am I doing wrong?

The site is currently at: snip

And the vertical center technique I'm trying to make work is:

<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 900;
height: 600;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if IE]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->

Please please help. My brain is turning to mush.

[edited by: SuzyUK at 10:22 pm (utc) on April 24, 2007]
[edit reason] Please no URI's per TOS #13 [WebmasterWorld.com] [/edit]

[SuzyUK]

will have a proper look later BUT as I've already discovered this is a case where the HTML is important I'll post the HTML your gallery js generates as it might help,

note: stitchy's images are of varying heights and widths so the usual half offset method is not so easy for this application

<div id="content">
<div class="wraptocenter">
<span></span>
<span id="photo">
<a href="javascript:void(showNext());">
<img id="mainImage" src="image.jpg" alt="" border="0">
</a>
</span>
</div>
</div>

[SuzyUK]

Hi stitchy, thanks for posting this, a very interesting technique for an age old question ;)

You're not doing anything wrong except picking a technique, to solve an age old question, that I might just be compelled to write about now, because I think this one really does have interesting possibilities.

I found the technique on Bruno Fassino's site and it took me a minute to figure out why it wasn't working for you. It should work for any inline element once the empty span/inline-block workaround is in place

- BUT it's the second span (id="photo") that's causing you the problem, it's getting the 100% height and inline-block setting too and you don't want it to.

So a short possible solution to your problem and bearing in mind you may legitimately want to use spans inside your block as your HTML code indicates you have, I would change the "empty span hack" <span> to another inline element you're unlikely to use in your markup e.g. <i> - this will also have the advantage that it will make it very obvious that it is that element that is the workaround. or give that empty span a class name and only target that class name via the CSS rather than all spans.

<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 500px; /* please note add px */
height: 500px; /* please note add px */
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter i {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if IE]><style>
.wraptocenter i {
display: inline-block;
height: 100%;
}
</style><![endif]-->

HTML:
<div id="content">
<div class="wraptocenter">
<i></i>
<span id="photo"><a href="javascript:void(showNext());">
<img id="mainImage" src="yourimage.jpg" alt="" border="0">
</a></span>
</div>
</div>

there is more to this but as it stands just now with this code that should center anything as long as it's an inline element (which an <a>, <img> and <span> are). but this is untested and relies only on what I've read about the technique so let us know if that's now going to work for you.

I *think* I've managed to manipulate this technique so it vertically centers not only inline elements but also block level elements of unknown dimension - which is often asked about too - it might be slightly exciting as I don't think I've yet found a reliable technique to do this without widths/heights

Suzy

[edited by: SuzyUK at 12:28 pm (utc) on April 25, 2007]