IE/FF Discrepancy - CSS Odd Space? 1

[fallenacorn]

ack. this is driving me nuts. i've got these CSS tabs going.

http://www.thefallenacorn.com/test/test.htm

http://www.thefallenacorn.com/test/test.css

Everything is PERFECT in IE (figure that), but in firefox, there is an odd block of space along the top of the tabs.

if i make the menu background clear, my "active" tab gets a
1px line thru it, spoiling the tabbed-page effect.

eh?

 

[cLFlaVA]

Add this to your CSS:

dl {
	padding: 0;
	margin: 0;
}

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[fallenacorn]

hey awesome! thanks. what exactly is this doing?

 

[Vragabond]

It eliminates default margin and padding from the element and sets it to 0. Some block elements have certain margins and padding by default.

 

[cLFlaVA]

Thanks Vrag.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!

 

[cLFlaVA]

To add to this:

Certain browsers add certian padding at certain times. In other words: all browsers add the correct padding and margins, while IE decided to add its own.

Therefore, you will often find padding/margin descrepencies between different browsers.

The Unordered List is a good example. IE adds a left-margin to unordered lists, while other browsers add left-padding.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!