Search code examples
htmlcssfirefoxgoogle-chromepositioning

CSS layout difficulties, site behaves in chrome, but not in Firefox

I am having cross browser problems with this site, can someone explain to me why it's not working in Firefox but does in google chrome please?

When an image is clicked, the text is not positioned correctly in Firefox

http://dl.dropbox.com/u/2306276/problem/index.html

I think it has something to do with

display: table;

but I do not know why.

thanks

Solution

  • Change these bits of your CSS:

    div.container {
    height: 215px;
    line-height: 215px;
    width: 215px;
    text-align: center;
}

div.child {
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
}

    It's normally safer to avoid display: table-* where possible.