Box Color Styles in Firefox

Forum Moderators: open

Message Too Old, No Replies

Box Color Styles in Firefox

border-[bottom,right,top,left]-color styles do not seem to work in Firefox

tagsin action

5:44 pm on May 8, 2005 (gmt 0)

I could get the box to display the styles in IE 6.0, but not
in Firefox 1.3. How can I get the box below to display styles
like it does in IE 6.0? I prefer Firefox to IE.

***[markup code]***
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>border-[bottom,right,top,left]-color No Show in
Firefox</title>
<style type="text/css">
div.heading1 {
text-indent:"1em";
color:"#fff";
background:"#a52a2a";
border:"2px solid";
border-bottom-color:"#000";
border-right-color:"#000";
border-top-color:"#f33";
border-left-color:"#f33";
}
</style>
</head>
<body>
<div class="heading1">
<h1>XML Examples Given</h1>
</div>
<p>I could get the box to display the styles in IE 6.0, but not
in Firefox 1.3. How can I get the box above to display styles
like it does in IE 6.0? I prefer Firefox to IE.</p>
</body>
</html>
***[markup code]***

encyclo

6:04 pm on May 8, 2005 (gmt 0)

Welcome to WebmasterWorld [webmasterworld.com] tagsin_action. You've got some errors in your CSS, and IE is far more forgiving than Firefox.

Your specific problem is that you are using quote marks around the CSS values: this is invalid and incorrect - it is only in HTML that you need to quote the values. So your CSS should read:

<style type="text/css">
div.heading1 {
text-indent:1em;
color:#fff;
background:#a52a2a;
border:2px solid;
border-bottom-color:#000;
border-right-color:#000;
border-top-color:#f33;
border-left-color:#f33;
}
</style>

While we're about it, you can save a few bytes by defining the border color as #000 then just overriding it for just two sides:

<style type="text/css">
div.heading1 {
text-indent:1em;
color:#fff;
background:#a52a2a;
[b]border:2px solid #000;
border-top-color:#f33;
border-left-color:#f33;[/b]
}
</style>

Hope that helps! ;)

tagsin action

6:21 pm on May 8, 2005 (gmt 0)

That worked great, I also used the style overides. Great tips! Thanks!

I feel like I am kicking A in the styles department now.

iamlost

6:26 pm on May 8, 2005 (gmt 0)

Remove the "quotes": they cause a standards compliant browser to ignore such quoted rules. The following works:

<style type="text/css">
div.heading1 {text-indent: 1em; color: #fff; background: #a52a2a; border: 2px solid ; border-bottom-color: #000; border-right-color: #000; border-top-color: #f33; border-left-color: #f33;
}
</style>

<edit>boy am I slow typing today ... and forgetting to check if faster types answering before posting.</edit>

tagsin action

10:48 pm on May 8, 2005 (gmt 0)

Thank you. I appreciate the tip.

I'm now finally on the same page as you both.