CSS problems between Firefox and Mozilla 2

mcowen · Feb 13, 2005

I'd like to have a 3d appearance to my divs (I want to use this for the top of the page navigation links in much the same way as

http://www.theregister.co.uk

does) but I cant get the same from firefox as I can from IE.

The style is...

Code:

#test{
	border-top-color:#CCCCCC; 
	border-left-color:#CCCCCC;
	border-bottom-color:#666666; 
	border-right-color:#666666; 
	background-color:#9A9A9A; 
	border:1px solid; 
	width:100%
}

My page is

Code:

</html>
<link ....>
<body>
<br>
<div id="test">HI</div>
<div id="test">HI</div>
</body>
</html>

What have I missed?

Thanks

Matt
"Success is 10% inspiration, 90% last minute changes

Vragabond · Feb 13, 2005

You haven't really told us which browsers fails to give you desired result and how the actual result varies from the desired. But anyway, here's a few things that might help:

1. Add a complete and valid doctype.

2. Try switching around the border properties:

Code:

#test {
    border: 1px solid;
    border-color: #cccccc #cccccc #666666 #666666;
    background-color: #9a9a9a;
    width: 100%;
}

3. Use one id only once per page. If you need it for several elements, use class instead.

mcowen · Feb 13, 2005

Thats worked thanks. For completeness, the problem I had was that Firefox wouldnt display a different border colour for left, right top etc. It seems that it prefers the border-color: #cccccc #cccccc #666666 #666666; rather than border-<side>-color call.

Matt
"Success is 10% inspiration, 90% last minute changes

ChrisHunt · Feb 14, 2005

Firefox wouldnt display a different border colour for left, right top etc.

No, the real problem was that this rule came last:

Code:

border:1px solid;

The [tt]border[tt] rule is a shorthand rule that lets you set all border properties at once (though not, sadly, apply different colours to each side). As you didn't explicitly include a colour in your [tt]border[/tt] rule, FF assumes an implicit value of "the same as the text colour" which overrides the colours you've already chosen (this is probably what the spec says it's supposed to do, however unintuitive it may be). If you do it like this, you'll find it works as expected:

Code:

#test{
    border:1px solid;
    border-top-color:#CCCCCC;
    border-left-color:#CCCCCC;
    border-bottom-color:#666666;
    border-right-color:#666666;
    background-color:#9A9A9A;
    width:100%
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS problems between Firefox and Mozilla 2

mcowen

Programmer

Vragabond

Programmer

mcowen

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor