Question

I am having an issue with the way these tables I am attempting to create with CSS are being rendered in IE9. They look fine in Chrome and Firefox, but IE9 seems to have them taking up extra space and they flow over onto the next “row”

Chrome:

IE9:

Code example:

<div class="prodDetail">
<h2>Sales History</h2>
<div class="salesTotals">
    <h3>Sales history for previous 12 months</h3><br>
    <span class="column">UOM</span>
    <span class="column">Quantity</span>
    <span class="column">Total $</span>
    <span class="column">Avg. $</span>
    <span class="column">Ord. Count</span>
    <span class="column">Ord. Freq.</span>
    <span class="column">Core</span>
    <span class="column">Last Ord.</span><br>
    <span class="column">BX</span>
    <span class="column">1</span>
    <span class="column">5.03</span>
    <span class="column">5.03</span>
    <span class="column"></span>
    <span class="column">1</span>
    <span class="column">N</span>
    <span class="column">07/26/2011</span><br>
    <br>
</div>
<div class="salesHist">
    <span class="columnHist">Loc</span>
    <span class="columnHist">Order</span>
    <span class="columnHist">UOM</span>
    <span class="columnHist">Qty. Ordered</span>
    <span class="columnHist">Qty. Shipped</span>
    <span class="columnHist">Order Date</span>
    <span class="columnHist">Ship Date</span><br>
    <span class="columnHist data odd">1</span>
    <span class="columnHist data odd"><a href="ordDtl.php?ord=813703&amp;s=H&amp;co=1&amp;oid=269460">418703</a></span>
    <span class="columnHist data odd">BX</span>
    <span class="columnHist data odd">1</span>
    <span class="columnHist data odd">1</span>
    <span class="columnHist data odd">07/26/2011</span>
    <span class="columnHist data odd">07/27/2011</span><br>
</div>

CSS:

div.prodDetail {
height: auto;
width: auto;
border: 2px solid gray;
margin: 3px;
background: whiteSmoke;
}

div.salesTotals {
display: block;
margin: 0 auto 0 auto;
}

div.prodDetail span {
padding: 0;
display: inline;
font-size: 12px;
background: none;
font-weight: normal;
}

div.prodDetail span.column {
width: 12.5%;
display: inline-block;
margin: 5px auto 5px auto;
height: 14px;
text-align: center;
}

div.salesHist {
display: inline-block;
margin: 0 auto 0 auto;
width: 100%;
}

div.prodDetail span.columnHist {
width: 14.3%;
display: inline-block;
padding-top: 8px;
padding-bottom: 6px;
height: 12px;
text-align: center;
}

div.prodDetail span.columnHist.data {
padding-bottom: 8px;
}

div.prodDetail span.columnHist.data.odd {
background: lightGrey;
}

I hope I included enough relevant CSS.

Answer 1

Before I delve into my suggested solution below, I’d like to point out some things in your CSS that could be cleaned up a bit…

div.prodDetail span.column {
    width: 12.5%;
    display: inline-block;
    margin: 5px auto;  /* shorthand: top/bottom, right/left */
    padding: 0;        /* shorthand: top/right/bottom/left */
    height: 14px;
    text-align: center;
}

div.prodDetail span.columnHist {
    width: 14.3%;
    display: inline-block;
    margin: 0 auto;      /* shorthand: top/bottom, right/left */
    padding: 8px 0 6px;  /* shorthand: top, right/left, bottom */
    height: 12px;
    text-align: center;
}

• moved zero margin into span.columnHist.
• moved zero padding into span.column.
• converted to shorthand where possible.

I don’t believe this solves anything but it improves readability and it’s more logical since padding & margin are now together in each of these two column classes instead of split between two classes.

---

On the first section of your table, you have 8 columns evenly divided giving you 12.5% each, which you used here…

div.prodDetail span.column {
    width: 12.5%;
}

On the second section of your table, you have 7 columns evenly divided which give you 14.2857% each, and you rounded it to 14.3% here…

div.prodDetail span.columnHist {
    width: 14.3%;
}

Note that you only have an issue on the section section wrapping to a new line.

Consider this: Every browser is going to do its layout calculations differently.

• different rules for when/how to round calculations
• different rules for when/how to round fractional percentages
• different rules for when/how to round fractional pixels
• and rules for when/how to calculate width of parent versus individual children

I assume you’re using percentages because you want a fluid layout.

Examples assuming a container width of 901 pixels:

Scenario 1: 14.3% x 901 = 128.843 (pixels per column)

Assume a random browser is rounding the final value up…

129 x 7 columns = 903 pixels wide

Even if the browser does not round up until the end…

128.843 x 7 columns = 901.901 => 902 pixels wide

Both are wider than your container and you’ll get a wrap to the next line.

Scenario 2: 14.3% x 7 columns = 100.1% = 901.90 => 902 pixels wide

You’ve defined a total width width greater than 100% of the container can hold, and this too will create a wrap. One browser may round down the total percentage and you’re fine. Another may take it literally and round up the total pixel value instead.

Browsers may look at the total width first and construct the table columns second or maybe vice-versa.

Point being, by using decimal fractions in this precise of a fashion, you are forcing the browser to make mathematical conversions which may introduce some compounding mathematical rounding errors along the way.

Suggested workarounds:

• if your table is a fixed width, then define the column width as a whole pixel value.

• or use a percentage less than the amount you initially calculated. Something like 14.2% instead. Personally, I’d play it safe and just deal with any left over space.

---

As far as the overall width of the table, you have not shown any code for its parent element, so it’s impossible to tell how its overall width is determined. Perhaps solving the issue above will take care of the width issue as well.