Firefox Table TD ignores padding-bottom:0;

[wormy123]

Hello,

I have a table as follows:

<table>
<tr>
<td>
*PROBLEMATIC CELL*
</td>
<td rowspan="2">
</td>
<td rowspan="3">
</td>
</tr>

<tr>
<td>
</td>
</tr>

<tr>
<td colspan="2">
</td>
</tr>
</table>

The first cell of the first row, has a padding at the bottom. Well it's not really padding but it looks like padding and using firebug I can not find what the space there actually is.

I think what is happening is that, firefox automatically adjusts the bottom padding of the first td in the first tr with the padding top of the first and only td of the second tr.

p.s. works perfectly fine in Chrome.

please help me

[VIPStephan]

Try td {vertical-align: top;}. This is sometimes the cause for confusion.

[wormy123]

Originally Posted by VIPStephan

Try td {vertical-align: top;}. This is sometimes the cause for confusion.

I have the vertical align set to top on the first td of first tr.

On the first td of the second tr the vertical align is set to bottom.

But things still don't work

[drhowarddrfine]

Originally Posted by wormy123

I think what is happening is that, firefox automatically adjusts the bottom padding of the first td in the first tr with the padding top of the first and only td of the second tr.

Well, no, FF does not do that, but I don't see the problem anyway.

[drhowarddrfine]

Originally Posted by wormy123

I have the vertical align set to top on the first td of first tr.

On the first td of the second tr the vertical align is set to bottom.

But things still don't work

Now I'm confused.

[abduraooft]

p.s. works perfectly fine in Chrome.

please help me

Please post your complete code including DOCTYPE.
If you are using tables for making your layout, read http://www.hotdesign.com/seybold/ first.

[wormy123]

Originally Posted by abduraooft

Please post your complete code including DOCTYPE.
If you are using tables for making your layout, read http://www.hotdesign.com/seybold/ first.

Here is the website:

http://mmamail.com/index.php

[abduraooft]

Try adding

*{margin:0;padding:0;}

into your CSS, to reset all browser specific default values of margins and paddings from all elements. If that doesn't solve, please provide the location where the issue resides.

[wormy123]

I have the following in my CSS:

table, tbody, thead, tfoot, tr, th, td {
border:0;
margin:0;
padding:0;
}

If you try using firebug to see what that space actually is you will see that it is not any padding or margin of any sort.

however I tried the suggested solution but it still didn't work.

The problem is that this is not actually a padding problem, it's the way Firefox tries to fight two conflicting paddings to achieve the best results. Unfortunately it decides to respect the 20px top padding of the TD underneath it more than the padding-bottom of the first TD.

Can this be resolved anyhow using the !important property?

[wormy123]

Originally Posted by abduraooft

Please post your complete code including DOCTYPE.
If you are using tables for making your layout, read http://www.hotdesign.com/seybold/ first.

Unfortunately I am using tables for my layouts. The problem I encounter when not using tables is that browsers(IE) don't support stuff like display:table-cell properly so I am left with two options

1. use tables and fix webpages quickly and easily with less code
2. use divs and css an put in a hundred different hacks for every browser, specify div widths, float everything and really bloat up my css.

For now I will continue to use tables until browsers such as IE start supporting more CSS properties.

[Excavator]

Originally Posted by wormy123

Unfortunately I am using tables for my layouts. The problem I encounter when not using tables is that browsers(IE) don't support stuff like display:table-cell properly so I am left with two options

1. use tables and fix webpages quickly and easily with less code
2. use divs and css an put in a hundred different hacks for every browser, specify div widths, float everything and really bloat up my css.

For now I will continue to use tables until browsers such as IE start supporting more CSS properties.

That is not a valid argument for using tables. Your using CSS3 stuff for your rounded corners in spite of the fact that it is not supported by IE and adds bloat to your CSS.
In fact, nothing on your page would require any sort of hack at all... maybe something for IE to get your min-width settings right.


p.s. There is a link in my signature line about tables that I like better than the one it was originally suggested you look at.

...