CSS strangenbess with td tag

[MidiMagic]

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>>
   ...
  </div></td>

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

Anyone got any ideas?

[MidiMagic]

No Ideas?

[MattEvans]

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*/
td{
  padding:[number]px;
  vertical-align:middle;
}
/*This rule will only work in browsers that understand the direct child selector; IE6 doesn't*/
html>body td{
   padding:2%;
}

Again, not ideal.

However; if you use code like this:

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

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?

[MidiMagic]

IE7.

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