Question

I am having the problem that my website is displaying differently at different stages of the same session. Here is how the page displays on PageLoad:

The table is populated with some data and all of the empty fields are DropDownLists for user input. Note that the table is centered and the fields containing DropDownLists all have the same width.

Here is how the page displays after some user input has been saved:

The DropDownLists have all been replaced by the images that were selected (possibly nothing) but now the table is not centered, the righthand border is missing from every table, and the 3rd and 4th tables in the righthand column have arbitrary widths for the fields that contained the DropDownLists even though these are all class=image and should have a fixed width of 75px.

Here is the relevant CSS:

.outer
{
    border: none;
    margin-left: auto;
    margin-right: auto;
}
.image
{
    padding: 0;
    margin: 0;
    width: 75px;
}

The outer class is for the outer, containing table (these are nested tables) and the image class is for the fields that contain the DropDownLists that are replaced by the selected images.

I don’t have this problem in Firefox and I have only tested this in Firefox and IE8.

Any advice is appreciated.

EDIT: Here is the complete CSS file:

.outer
{
    border: none;
    margin-left: auto;
    margin-right: auto;
}
.outer td
{
    vertical-align: top;
}
.column
{
    border: none;
}
#rightColumn table, #leftColumn table
{
    width: 100%;
}
.cell
{
    border-collapse: collapse;
    border: 2px solid black;
    margin: 5px;
}
.cell td
{
    border-collapse: collapse;
    border: 2px solid black;
    text-align: center;
    vertical-align: middle;
}
.image
{
    padding: 0;
    margin: 0;
    width: 75px;
}
.messages td
{
    border-collapse: collapse;
    border: 2px solid #FF0000;
    text-align: left;
}
h1
{
    text-align: center;
    font-size: 350%;
}
h2
{
    text-align: center;
}
th
{
    background-color: #2B60DE;
    color: #FFFFFF;
}
.gray
{
    background-color: #AAAAAA;
}
.blue
{
    background-color: #2B60DE;
}
.orange
{
    background-color: #FFA500;
}
.green
{
    background-color: #00FF00;
}
.red
{
    background-color: #FF0000;
}
.yellow
{
    background-color: #FFFF00;
}
.white
{
    background-color: #FFFFFF;
}
#lob
{
    vertical-align: bottom;
    text-align: center;
}
.centered
{
    text-align: center;
    padding: 10px;
}

EDIT: HTML tab of developer tools:

Answer 1

I’m going to throw a guess out there: Something in your postback is forcing the browser into Quirks mode. In particular, setting margin to auto doesn’t work in Quirks Mode.

To confirm this, hit F12 on the affected page. In the Developer Tools that appear, look at the top for “Document Mode”. If it’s Quirks, something’s wrong. Providing a screenshot of the “HTML” tab of that window would be helpful in diagnosing further.