Question

Hopefully I can explain this clearly enough. I have a table that displays some images. The table is generated dynamically with PHP. In every browser the table render correctly and in the center of the page. In firefox the table gets pushed to the right almost out of the page entirely and the scroll bar shows at the bottom of the page but it’s behind elements.

This is the CSS for the table, don’t know if that will help.

/* Portfolio Table Styles */

table {
    position: relative;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

table td {
    height: 150px;
    width: 150px;
    border-spacing: 30px;
    padding: 10px;
}

table div {
    height: 150px;
    width: 150px;
    overflow: hidden;
}

table img {
    position: relative;
    top: -20px;
    left: -50px;
    height: 300px;

}

Hopefully this clears it up. This is the way it looks in firefox 7.0.1.
JSFIddle

Also, if you comment out the overflow-x at the bottom of the css it fixes it there. But in firefox that makes no difference.

Answer 1

#portContent {
    position: relative;
    top: 20px;
    left: 0;
    display: block;
    overflow-x: hidden
    clear: both; /*add this line*/

http://jsfiddle.net/XJj5B/4/