I had a strange thing happen in IE when I tried to apply multiple styles to td tags:

td {padding: 2%; vertical-align: middle;}

Applying the padding style removes the vertical-align style in IE.

It works correctly in Firefox.

I found a fix: Put a div inside each td, with the following style:

.fixtd {margin: none; border: none; padding: 2%;}
td {vertical-align: middle;}


  <td><div class="fixtd>>

The only problem is that adding all of those divs almost doubles the size of the webpage file.

Anyone got any ideas?

Did you solve this yet? I would have to put it down to a bug in IE. I tested on IE6 and can confirm the same behaviour... it occurs only when the padding is expressed as a percentage.

I can't really suggest a fix if it is indeed a bug; the best you could do is either, do as you've done already, which is obviously not ideal, or use a padding in px rather than %, which also might not be ideal.

You might want to try expressing the padding in px for IE and in % for modern browsers:

/*Will apply on all CSS-enabled browsers*/
/*This rule will only work in browsers that understand the direct child selector; IE6 doesn't*/
html>body td{

Again, not ideal.

However; if you use code like this:


There's no problem; it works as you might expect.. So if it's possible to use a constant padding on the top and bottom, you could try that.

IE6 sucks.. are you testing in IE6 or 7?


I need the padding to leave space between the border and the text for legibility purposes.