Forum Moderators: not2easy
I don't know if it's a block vs. inline issue, I was hoping someone can clarify this. I believe a TD is an inline element?
The issue is, when specifying padding on a TD as 10px, it is added onto the width, when specifying as 1em, it is included in the width. Doesn't happen with DIVs I know these are blocks.
Test page to demonstrate:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<style>BODY{font-size: 62.5%;}/* 1em should be 10px! */
.one{padding: 10px;width: 500px;height: 100px;border: 1px solid red;}
.two{padding: 1em;width: 500px;height: 100px;border: 1px solid blue;}</style>
</head><body>
<table><tr><td class='one'>TD Width 500px, height 100px, padding 10px</td></tr></table>
<table><tr><td class='two'>TD Width 500px, height 100px, padding 1em</td></tr></table>
<br><br>
<div class='one'>DIV Width 500px, height 100px, padding 10px</div>
<div class='two'>DIV Width 500px, height 100px, padding 1em</div></body>
</html>
This is not a problem, just a query and hopefully a learning experience.
IE7 in PX: 522x122 (padding and border added)
IE7 in EM: 502x102 (only border added)
FF in PX: 522x100
FF in EM: 522x100
It seems FF adds padding and border to width only in both cases, and IE adds includes the EMs in both width and height.
Anyone try this in IE6?
Fotiman.. yes what you're seeing in IE6 is what Dabrowski is saying.. the difference as I understand isn't related to 1em.. it's the fact that IE doesn't add (any) em padding to the width of the table cell i.e. not adhering to the box model.
I tried using 1em borders too IE adds them OK, but try percentage padding.. both IE and FF have fun with it ;)
I believe a TD is an inline element?
No it's a "flow element" definition of TD [w3.org] - which means it can contain both block and inline elements, technically it's display setting should be
display: table-cell;display: block;which makes it even stranger that it doesn't treat it as a block? - changing the display of the TD to inline-block makes no difference either..
I'm glad it's not just me.
Suzy I tried with 2% (10px based on 500px), FF and IE are almost the same.
IE on TD: 502x102, same as with EM.
IE on DIV: 542x142, for some reason has doubled the padding, but text is in correct place. So somehow it's added 2% to left side, which is fine, but 6% to right side?
FF on TD: 502x100, it's now also forgotten about the borders top and bottom.
FF on DIV: 541x141, again doubled padding like IE, but also lost 1px vertical and horiz. Work that one out?
Fotiman, yes the fact that it hasn't widened the TD is the point, but the text is NOT right on the left so padding is there.
I'm annoyed because I found the problem whilst writing a JS, and on my test page it DOES affect FF too, but I can't get it to do it on FF now for you guys to look at.
They both get DIVs right which I suppose is good, but the fact that they mess up tables differently makes it even harder for us to use them. Damn W3C!
IE has top/bottom padding 20px, doubled, but left/right has 10px, then the inner border, then another 10px! As if it's inherited it. It obviously hasn't as the text remains in the same place when you remove the inner DIV!
No wonder people don't use fluid/elastic layouts!
