smoothdvd smoothdvd - 8 months ago 42
CSS Question

IE8, IE7, IE6, height of td is 1px different

<table width="320" cellspacing="0" cellpadding="0" valign="top" bgcolor="#ffffff" style="border:1px solid #d6d6d6;border-collapse:collapse;">
<td height="131" valign="bottom" style="padding:0px 8px;">aaa</td>
<tr><td height="10" style="line-height:1px;">bbb</tr>
<td height="182" valign="top" style="padding:0px 8px;line-height:1px;">ccc</td>

In IE6 and IE7, the first td has same height value as exactly 131px, but in IE8 it has 132px.

How to fix it?


Have you used a browser reset? This can help smooth out browser inconsistencies. Try either the mayer or the newer style called normalize this can help remove padding and margins which differ from browser to browser even from the same manufacture.

If you don't know what a reset is its a css file that you add to your page and it simply resets or put a number of elements back to their default setting which in many cases is 0, when everything in all browsers is reset you can start to rebuilt the pages css with more consistently.

If you have tried this and its failed, then you could add a class to the table then use conditional comments to fix the height of the table. Paul Irish's html5 boiler plate comes with the conditional statement at the top of the document which helps target all the various versions of IE within the same style sheet, so no need for IE6, IE7, IE8 style sheets.

cheers, Stefan