...

View Full Version : Firefox Table TD ignores padding-bottom:0;



wormy123
12-28-2009, 12:44 AM
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 :confused:

VIPStephan
12-28-2009, 01:32 AM
Try td {vertical-align: top;}. This is sometimes the cause for confusion.

wormy123
12-28-2009, 01:37 AM
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
12-28-2009, 03:15 AM
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
12-28-2009, 03:18 AM
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
12-28-2009, 06:26 AM
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
12-28-2009, 11:07 AM
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
12-28-2009, 11:15 AM
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
12-28-2009, 11:20 AM
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
12-28-2009, 11:32 AM
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
12-28-2009, 05:09 PM
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.

...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum