Negative Margin issue in either Safari or Firefox

HTML & CSS
1

Hey guys,

Here’s the issue:

If you look at the site here, you’ll see that in Safari 4, there’s a big gap between the pricing table and the navigation. In Firefox there’s just a tiny gap. I’m using a negative margin on the Nav to pull it out of the content box by -54px, which is applied directly to the <ul id=“nav”> containing it.

It seems that these browsers interpret this differently. Do you know which one is doing this correctly? And how to fix the other one?

Here’s the Nav css:

#nav {
	float: right;
	margin: 40px -54px 0 0;
	padding: 0;
}
#nav li {
	margin: 0;
	padding: 0;
}
#nav a {
	display: block;
	padding: 0;
	margin: 0;
	width: 182px;
	height: 52px;
	background: url('../images/nav.png') top left no-repeat;
	text-indent: -999em;
}

Here’s the table css:

.col1 {
	width: 35%;
}
.col2 {
	width: 65%;
}
caption {
	padding: 1em 0;
	font-size: 1.2em;
}
th {
	font-weight: bold;
}
th, td {
	font-size: .8em;
	vertical-align: top;
	padding: 4px;
}
table#pricing {
	margin-right: 10px;
}

I’m also using a reset similar to Eric Meyer’s that’s first in the imported files.

2

Here’s some screen captures in case you don’t have access to one or the other.

In Safari

In Firefox

3

Hi,
Your page renders different for me in FF3,Safari 3, and Opera 10.

You have that #pricing ID on your table and if you target that ID and reset your margins/paddings the browsers will all render the same then.


[B]#pricing[/B] [COLOR=Blue]{margin:0;padding:0}[/COLOR]
#pricing a {
    background-position: -2px -104px;    
}
4

Thanks Rayzur, I’ll try it. Nice to see you again by the way!

5

Thanks!
It looks like margin:0; is all that is really needed here.
From the looks of FF it does not apply any default margins to the table as the others do.
None of them apply a default padding.

#pricing {margin:0;}

6

That did it. So the margins and padding were rendering inconsistently then.

7

Oops…I also discovered that I had two ids on the same page called #pricing. I’ve changed the table ID to #price_table, but it’s the margins that did the trick!

Thanks!