margin attribute not working in Firefox

Forum Moderators: not2easy

Message Too Old, No Replies

margin attribute not working in Firefox

and I've had it up to here

netninja

12:37 am on Jan 27, 2006 (gmt 0)

OK, so I've got a table where I want to set the cellpadding to zero. I want some of the cells in this table to have a cellpadding (actually, I just need space on the right side of the cell) and thought that I would use the w3c approved "margin-right: 2px" attribute in my stylesheet and apply this style to the cells desired. This works fine in IE, but FF does not display correctly. It seems to just ignore this portion of my css.

I did run my css through the wc3's validator and it says that my document is fine. Everyone seems to say how Firefox is more wc3 compliant than IE, but in this case, I don't see that as true.

Any help with this would be greatly appreciated.

Thanks

Span

12:52 am on Jan 27, 2006 (gmt 0)

Welcome to the forums netninja.

It sounds like the validator made that up to make you a member here.
A table is a grid of cells and it is physically not possible to add margin to some cells without destroying the table's structure.

What you want is padding. You can add padding to any side of any cell.

piskie

12:54 am on Jan 27, 2006 (gmt 0)

Not quite enough information to be certain, but maybe you should apply paddding instead of margin.
"padding-right: 2px"

In most cases (just about all), Firefox is compliant and IE is forgiving. This usualy leads to the type of statement made by yourself about Firefox vs IE in respect to Compliance.

netninja

12:59 am on Jan 27, 2006 (gmt 0)

My bad, I actually did mean "padding" instead of margin.

I actually have "padding-right: 2px" in my css.

Works in IE, not in FF.

Hester

9:53 am on Jan 27, 2006 (gmt 0)

I am seeing exactly the same effect in both IE6 and FF1.5 using the following code on WinXP:


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">td {padding-right:2px}</style>
</head>
<body>
<table border="1" cellpadding="0"><tr><td>TEST</td><td>TEST</td></tr><tr><td>TEST</td><td>TEST</td></tr></table>
</body>
</html>

Put an "x" infront of the word "padding" to temporarily knock the style off and reload in both browsers. They both move the cells in. Note the padding only affects the first column for some reason.