Vertically Aligning Images within a <div>

[Marc Bradshaw]

Hi guys,

After googling this for 2 hours, I've come to the same age old
conclusion: IE sucks. However, before succumbing to the evils of
sticking a pointless table in, I wondered if someone here might know if
there is a workaround.

I'm trying to centre an image within a <div>, both horizontally and
vertically. Firefox 3 handles it with ease, but IE7 seems disinterested.

Here is the CSS I have:

div#content ul#shopitems li div.itemimage {
height: 102px;
width: 102px;
border: 1px solid #17516E;
padding: 1px;
text-align: center;
display: table-cell;
vertical-align: middle;
}

So because div.itemimage has fixed dimensions you would think it easy
but the problem is that the image is dynamically inserted and could be
anything up to 100px by 100px, so I can't use the trick of positioning
the image 50% down and then using a negative top-margin to move it up.

You can see the clearest example at this page, and you can get past the
..htaccess box using the details below:

http://www.spafixdirect.co.uk/products/heater

Username: username
Password: password

In Firefox 3 the item images are neatly centred within the blue boxes.
In IE7 they sit at the top of the blue box, though they are horizontally
centred.

I'm using Windows Vista Business with SP1, which may be relevant as
search results suggest that this problem may be limited to IE on Windows.

Can anyone help?

Thanks in advance,
Marc

 

[Chris F.A. Johnson]

You can see the clearest example at this page, and you can get past the
.htaccess box using the details below:

http://www.spafixdirect.co.uk/products/heater

Username: username
Password: password

You have other problems, too:
<http://cfaj.freeshell.org/testing/spafix.jpg>

 

[Bergamot]

I'm trying to centre an image within a <div>, both horizontally and
vertically. Firefox 3 handles it with ease, but IE7 seems disinterested.
http://www.spafixdirect.co.uk/products/heater

I think there are a few more alignment issues you need to address:
http://www.bergamotus.ws/screenshots/spafixdirect.png

Maybe it doesn't like my 17px minimum font size, or my 800px wide
browser window.

 

[Neredbojias]

Hi guys,

After googling this for 2 hours, I've come to the same age old
conclusion: IE sucks. However, before succumbing to the evils of
sticking a pointless table in, I wondered if someone here might know
if there is a workaround.

I'm trying to centre an image within a <div>, both horizontally and
vertically. Firefox 3 handles it with ease, but IE7 seems
disinterested.

Here is the CSS I have:

div#content ul#shopitems li div.itemimage {
height: 102px;
width: 102px;
border: 1px solid #17516E;
padding: 1px;
text-align: center;
display: table-cell;
vertical-align: middle;
}

So because div.itemimage has fixed dimensions you would think it easy
but the problem is that the image is dynamically inserted and could
be anything up to 100px by 100px, so I can't use the trick of
positioning the image 50% down and then using a negative top-margin
to move it up.

I don't think ie 7 honors display:table-cell;

 

[Marc Bradshaw]

Hi Chris,

Thanks for your reply.

You have other problems, too:
<http://cfaj.freeshell.org/testing/spafix.jpg>

Could you please give me the details of your environment so that I can
investigate?

Thanks,
Marc

 

[Marc Bradshaw]

Hi Chris,

Thanks for your reply.

You have other problems, too:
<http://cfaj.freeshell.org/testing/spafix.jpg>

Could you please give me the details of your environment so that I can
investigate?

Thanks,
Marc

 

[Marc Bradshaw]

Hi Berg,

Thanks for your reply.

I think there are a few more alignment issues you need to address:
http://www.bergamotus.ws/screenshots/spafixdirect.png

Maybe it doesn't like my 17px minimum font size, or my 800px wide
browser window.

Could you please provide details of your environment, so that I can
investigate?

Thanks,
Marc

 

[Marc Bradshaw]

Hi Berg,

Thanks for your reply.

I think there are a few more alignment issues you need to address:
http://www.bergamotus.ws/screenshots/spafixdirect.png

Maybe it doesn't like my 17px minimum font size, or my 800px wide
browser window.

Could you please provide details of your environment, so that I can
investigate?

Thanks,
Marc

 

[Marc Bradshaw]

Hi Nered,

I don't think ie 7 honors display:table-cell;

Yeah, I came to the same conclusion, but was hoping there might be a
workaround.

Marc

 

[Marc Bradshaw]

Hi Nered,

I don't think ie 7 honors display:table-cell;

Yeah, I came to the same conclusion, but was hoping there might be a
workaround.

Marc

 

[Marc Bradshaw]

Hi richard,

Thanks for your reply, but I'm not quite clear on your proposed
solution. Perhaps you could clarify for me?

Add a div for each image.
Use the same class for each div.

<div class=bigbox>
<div class=pic>
<img src="">
</div>
<div class=pic>
<img src="">
</div>
</div>

Use CSS to do all the work in each cell.

The content on this page is an image with product information on the
right of each. There is only one image per product listed, and the
problem is the image not appearing correctly within the box. Are you
suggesting all of the content (including the product information) should
go within div.bigbox? If so, what CSS would you recommend? Perhaps I'm
missing your point.

Marc

 

[Marc Bradshaw]

Hi richard,

Thanks for your reply, but I'm not quite clear on your proposed
solution. Perhaps you could clarify for me?

Add a div for each image.
Use the same class for each div.

<div class=bigbox>
<div class=pic>
<img src="">
</div>
<div class=pic>
<img src="">
</div>
</div>

Use CSS to do all the work in each cell.

The content on this page is an image with product information on the
right of each. There is only one image per product listed, and the
problem is the image not appearing correctly within the box. Are you
suggesting all of the content (including the product information) should
go within div.bigbox? If so, what CSS would you recommend? Perhaps I'm
missing your point.

Marc

 

[Jonathan N. Little]

Hi Chris,

Thanks for your reply.



Could you please give me the details of your environment so that I can
investigate?

Not important except that you have set up the page in pixel dimensions
while assuming that everyone has their default font size the same as
YOUR browser. Very bad assumption. Much discussed issue here. Try Google

http://www.google.com/search?hl=en&...paper+pixel-perfect+is+bad+design&btnG=Search
web is not paper pixel-perfect is bad design - Google Search

 

[Jonathan N. Little]

Hi Chris,

Thanks for your reply.



Could you please give me the details of your environment so that I can
investigate?

Not important except that you have set up the page in pixel dimensions
while assuming that everyone has their default font size the same as
YOUR browser. Very bad assumption. Much discussed issue here. Try Google

http://www.google.com/search?hl=en&...paper+pixel-perfect+is+bad+design&btnG=Search
web is not paper pixel-perfect is bad design - Google Search

 

[Marc Bradshaw]

Hi Jonathan,

Thanks for your reply.

Not important except that you have set up the page in pixel dimensions
while assuming that everyone has their default font size the same as
YOUR browser. Very bad assumption. Much discussed issue here. Try Google

Granted, it is a fixed width design, but when the leading two browsers
(Internet Explorer and Firefox) have replaced the text-size feature with
a 'zoom' feature, is a standard default font size not a reasonable
assumption?

The issue here in fact seems to be that the width of the two boxes in
the top right corner has been set in em, (meaning they increase in size
when the text does) whereas the design's width is set in px. A
potential workaround would be to set the design's width in em, but that
poses the problem that the overall browser width is set in px. I
suppose an alternative would be to set the width of these boxes in px,
but that is, I suppose, further bad practice...

Marc

 

[Jonathan N. Little]

Hi Jonathan,

Thanks for your reply.


Granted, it is a fixed width design, but when the leading two browsers
(Internet Explorer and Firefox) have replaced the text-size feature with
a 'zoom' feature, is a standard default font size not a reasonable
assumption?

No, because it does not address what my DEFAULT font size. Relying on
"zoom" to keep your pixel-perfect design intact only work if you assume
that the user has the exact same default font and font-size at you do.
You have no control on what the user has on his system. So much better
to design with "relative" parameters.

The issue here in fact seems to be that the width of the two boxes in
the top right corner has been set in em, (meaning they increase in size
when the text does) whereas the design's width is set in px. A
potential workaround would be to set the design's width in em, but that
poses the problem that the overall browser width is set in px.

Yes, it does, do don't constrain the overall in a pixel-bound shoe box.
If the browser window is wide or narrow the content will adjust to
accommodate. You could set a reasonable min-width, but remember some
might be using a cell phone. Better to wrap the text then force
horizontal scrolling on web media. It involves a different basic approch
to design.

I suppose an alternative would be to set the width of these boxes in px,
but that is, I suppose, further bad practice...

No, in ems, or % and let the text flow...

 

[Bergamot]

Could you please provide details of your environment, so that I can
investigate?

I already did. OS is irrelevant. Screen size is irrelevant. Browser
might possibly be more relevant, but regardless, your design is
dependent on the visitor using (what I consider to be) a small text
size. Mine is large, and the layout falls apart. Set your browser's
default size to something a few notches up from factory settings and
observe.

Your mistake is setting a fixed height of 105px on each of those list
items in the content area. Larger text sizes will easily blow that apart
and give undesirable results. Learn how to clear floats properly and you
can avoid such errors.

I haven't looked at the main navigation positioning quirks, but it is no
doubt float-related as well.

 

[dorayme]

The content on this page is an image with product information on the
right of each. There is only one image per product listed, and the
problem is the image not appearing correctly within the box.

Consider a table for this, it is simple and it is appropriate
semantically, this means it is as good a tool for this job as any other.
Perhaps no one has told you this, I have not been following this
thread...

 

[Marc Bradshaw]

Hi Ben,

You could try this approach:

div.itemimage
{
height: 102px;
line-height: 102px;
}
div.itemimage img
{
vertical-align: middle;
line-height: normal;
}

<div class="itemimage">
<img src="item.png" alt="some item">
</div>

But I don't know how much, if any, CSS works in IE7.

Thanks for your suggestion, this works in both IE7 and Firefox 3.

Much appreciated.

Marc