TABLE > TD padding

HTML & CSS
1

Im getting a padding effect (padding set to 0) for a TD element when viewed in firefox but not when in IE ??

Is this a bug in firefox ??

2

That’s impossible to say without seing your code.

3 

<table width="600" border="0" cellspacing="0" cellpadding="0"  style="border: 1px solid #ccc; border-top: none; border-bottom: none;">
          <tr>
            <td width="389" align="left" valign="top" style="padding-left: 10px; padding-right: 10px;font-family:Arial; font-size: 12px;"><p>Dear Mr spaz</p>
              <h2 style="font-size: 31px; color: #003399;">Thank you for your application</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis arcu id felis facilisis id aliquet nunc molestie. </p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis arcu id felis facilisis id aliquet nunc molestie.  </p>
              <h3 style="font-size: 12px; color: #003399;">Donec sagittis arcu id felis facilisis</h3>

           </td>
            <td valign="top" ><a href="#"><img src="images/image.jpg" width="210" height="407" alt="image" /></a></td>
          </tr>
        </table>
4

You have the left and right padding set to ten pixels in the first td.

5

Yes I know but I talking about the top and bottom.

6

Can you post a screenshot from both Internet Explorer and Firefox?

7

Attched image has guides to show 12px padding at the top in left firefox render.

8

Anyone have a suggestion to the cause of the faux padding ??

9

Doesn’t look like tabular data, the BORDER, CELLPADDING, and WIDTH attributes have no business in ANY HTML written after 2001ish (when we kicked netscape 4 to the curb) – and you’re declaring so much CONFLICTING CSS (that also shouldn’t be in the markup) I’d be surprised if any two browsers rendered that the same way.

I’d have to see it live on a page to comment further – though I suspect the real answer is to lose the table altogether… I also question the element you put the H2 on – and I VERY much doubt that the bit you have as a H3 is in fact a heading – aka the start of a new subsection! (Lemme guess, choosing your HTML tags based on their default appearance?)

10

It looks like the default top margin on the p element.

Try this:


p{margin:0 0 1em}

Some browsers apply top and bottom margins and some like IE apply only a bottom margin so you need to explicitly control it.

11

I agree with Paul on the source, but I also agree that this shouldn’t be in a table in the first place. You can create the same effect much more easily and with less mark-up using CSS.

12