Question

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

Answer 1

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.