CSS border problem in firefox, looks good in IE

I have a site that uses CSS to seperate some boxes and add a border. It looks good in IE but there's no division in Firefox.

The CSS file has this code:

.rightnavbox {
	BORDER-RIGHT: #ccc 1px solid;
	BORDER-TOP: #336699 3px solid;
	FONT-SIZE: 11px;
	BACKGROUND: #ffffff;
	BORDER-LEFT: #ccc 1px solid;
	BORDER-BOTTOM: #ccc 1px solid;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 5px;
}
.spacer {
	height: 5px;
}

Code (markup):

and on the page each box starts like this:

<div class="spacer"></div>
<div class="rightnavbox">

Code (markup):

In IE it looks pretty good, like this:


But in Firefox it doesn't really do anything, it looks like this:

What can I change to get it to look good in both IE and Firefox (and the rest of the other browers)

 

It's hard to say without looking at the rest of your code.

What's your URL?

 

You might also try "background-color:" instead. It seems to be more universally recognized.

 

The W3 sz that empty <p> should be ignored and 'strongly suggests' that empty block elements be ignored. I don't do empty block elements, so &#8230; Why wouldn't you use margins instead of a 'spacer' element?

A look at the page will tell us more.

cheers,

gary

 

Someone from another forum corrected my CSS file, there were flaws in it that Firefox picked up but IE ignored. Thanks for your help, you could consider this closed.

But, when I get a little more time to play around with things I'll give the background color thing a try.