Vertically Aligning Images within a <div>

Discussion in 'HTML' started by Marc Bradshaw, Sep 6, 2008.

  1. 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
     
    Marc Bradshaw, Sep 6, 2008
    #1
    1. Advertisements

  2. Chris F.A. Johnson, Sep 6, 2008
    #2
    1. Advertisements

  3. Marc Bradshaw

    Bergamot Guest

    Bergamot, Sep 6, 2008
    #3
  4. Marc Bradshaw

    Neredbojias Guest

    I don't think ie 7 honors display:table-cell;
     
    Neredbojias, Sep 6, 2008
    #4
  5. Hi Chris,

    Thanks for your reply.

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

    Thanks,
    Marc
     
    Marc Bradshaw, Sep 8, 2008
    #5
  6. Hi Chris,

    Thanks for your reply.

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

    Thanks,
    Marc
     
    Marc Bradshaw, Sep 8, 2008
    #6
  7. Hi Berg,

    Thanks for your reply.
    Could you please provide details of your environment, so that I can
    investigate?

    Thanks,
    Marc
     
    Marc Bradshaw, Sep 8, 2008
    #7
  8. Hi Berg,

    Thanks for your reply.
    Could you please provide details of your environment, so that I can
    investigate?

    Thanks,
    Marc
     
    Marc Bradshaw, Sep 8, 2008
    #8
  9. Hi Nered,
    Yeah, I came to the same conclusion, but was hoping there might be a
    workaround.

    Marc
     
    Marc Bradshaw, Sep 8, 2008
    #9
  10. Hi Nered,
    Yeah, I came to the same conclusion, but was hoping there might be a
    workaround.

    Marc
     
    Marc Bradshaw, Sep 8, 2008
    #10
  11. Hi richard,

    Thanks for your reply, but I'm not quite clear on your proposed
    solution. Perhaps you could clarify for me?
    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, Sep 8, 2008
    #11
  12. Hi richard,

    Thanks for your reply, but I'm not quite clear on your proposed
    solution. Perhaps you could clarify for me?
    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, Sep 8, 2008
    #12
  13. 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, Sep 8, 2008
    #13
  14. 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, Sep 8, 2008
    #14
  15. 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?

    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
     
    Marc Bradshaw, Sep 8, 2008
    #15
  16. 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.
    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.
    No, in ems, or % and let the text flow...
     
    Jonathan N. Little, Sep 8, 2008
    #16
  17. Marc Bradshaw

    Bergamot Guest

    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.
     
    Bergamot, Sep 8, 2008
    #17
  18. Marc Bradshaw

    dorayme Guest

    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...
     
    dorayme, Sep 8, 2008
    #18
  19. Hi Ben,

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

    Much appreciated.

    Marc
     
    Marc Bradshaw, Sep 17, 2008
    #19
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.