Member Avatar for 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?

  • 2 Contributors
  • 3 Replies
  • 105 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

This thread shows a browser-specific rendering oddity: saw vertical centering lost when applying percentage padding inside table cells, and confirmed the behaviour in IE. If adding an inner div for every cell is too heavy, try lighter alternatives and diagnostics below.

A quick, low-markup fallback is the table cellpadding attribute. It still works in all browsers and gives consistent space between cell border and content without extra elements (note: it is deprecated in HTML5, so treat it as a legacy fallback for older targets).

You can also supply an IE-only override so modern browsers keep the percent padding while IE receives a safer value. Conditional comments let you ship a tiny rule just for IE7 and below:

<!--[if lte IE 7]>
<style>
/ small IE-only override /
td { padding: 8px !important; zoom: 1; }
</style>
<![endif]-->

For troubleshooting, confirm the page is rendering in standards mode (correct DOCTYPE). Also try forcing IE's layout engine on the cell (hasLayout) as a diagnostic: many strange IE7/6 layout bugs go away if an element has layout (common trigger: zoom:1 or an explicit dimension). If your cells already contain block elements such as p or a, apply padding to those existing children rather than inserting new wrappers.

Remember why percent padding can be odd: per the CSS spec percentage padding is calculated relative to the element's containing block width, which can interact badly with older table layout implementations. See CSS 2.1 — Padding properties for details. These approaches let you avoid doubling markup while keeping readable spacing in legacy IE.

Recommended Answers

All 3 Replies

Member Avatar for MidiMagic

No Ideas?

Member Avatar for 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?

Member Avatar for MidiMagic

IE7.

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.