CSS and Firefox - <H1> works in IE but not in Firefox (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Catrine -> CSS and Firefox - <H1> works in IE but not in Firefox (1/7/2007 12:44:22)

WHY doesn't the headers work in Firefox, only in IE?

I'm still trying to be good at using CSS, but it never works when I need it the most...

The website is : http://www.blackcreekbsa.org/

and my CSS looks like this:


body
{
font-family: Verdana, Arial, sans-serif;
color: #000000;
font-size:10pt;
table-border-color-dark: rgb(204,153,102);
font-family:Verdana;
background-image: images/logos/Background.gif;

}

table { font-size: 10pt; font-family: Verdana, Arial, sans-serif; margin-top:0; margin-bottom:0 }
a:link
{
color: green; text-decoration:none;

}
a:visited
{
color: green;
text-decoration:none
}
a:active
{
color: #FF0000;
}

a:hover
{
text-decoration: underline;
color: red;
}
}




}

h1
{
font-family: Verdana, Arial, sans-serif;
color: #000066;
font-size:16pt;
line-height:100%; word-spacing:0; margin-top:0; margin-bottom:0
}
h2
{
font-family: "Comic Sans MS", Verdana, Arial, sans-serif;
color: #FF0000;word-spacing:0; line-height:100%; margin-top:0; margin-bottom:0 ;
font-size:16pt;
}
h3
{
font-family: Verdana, Arial, sans-serif;
color: #000066;
font-size:12pt;
line-height:100%; word-spacing:0; margin-top:0; margin-bottom:0
}
h4
{
font-family: "Comic Sans MS";
color: #FF0000;word-spacing:0; line-height:100%; margin-top:0; margin-bottom:0
font-size:12pt; font-size:12pt
}
h5
{
font-family: Verdana, Arial, sans-serif;
color: rgb(255,153,0);
}
h6
{
font-family: Verdana, Arial, sans-serif;
color: rgb(51,102,204);
}


td {valign: top}
hr { word-spacing: 0; text-align: center; margin: 2 3; }
p { word-spacing: 0;
margin-top: 0; margin-bottom: 0 }ul { line-height: 100%; margin-top: 0; margin-bottom: 0 }

div.pagehead
{
font-family: Verdana, Arial, sans-serif;
color: #000066;
font-size:18pt; font-weight:bold; line-height:100%; word-spacing:0; margin-top:0; margin-bottom:0
}


.month { font-size: 12pt; text-align:center; background-color:#999966; color:#FFFFFF }

.dayNames { font-size: 8pt; text-align:center; font-weight:bold; background-color:#FFFFFF; color:#999966 }

.dayNumbers { font-size: 8pt; text-align:right; background-color:#CCCC99 }

.dayText { font-size: 8pt; text-align:left; vertical-align:top; }

.otherMonth { font-size: 8pt; text-align:right; background-color:#CCCC99; color:#CCCC99; }



Kitka -> RE: CSS and Firefox - <H1> works in IE but not in Firefox (1/7/2007 13:37:05)

Not sure exactly - but there are a couple of things:

First thing that stands out for me is two "spare" closing brackets just before the h1: 

a:hover
{
text-decoration: underline;
color: red;
}
}




}

h1
{
font-family: Verdana, Arial, sans-serif;
color: #000066;
font-size:16pt;
line-height:100%; word-spacing:0; margin-top:0; margin-bottom:0
}


You have a number of errors according to the W3C validator:

http://jigsaw.w3.org/css-validator/validator?uri=www.blackcreekbsa.org&warning=1&profile=css21&usermedium=all

Fix those errors and see if that helps.



jaybee -> RE: CSS and Firefox - <H1> works in IE but not in Firefox (1/7/2007 13:43:17)

quote:

WHY doesn't the headers work in Firefox, only in IE?
They are working in Firefox. It's IE that's getting it wrong.

Your css file is wrong, you have a three lots of closing brackets before the h1. Firefox rightly says this is an error and ignores everything afterwards.

a:hover
{
text-decoration: underline;
color: red;
}
}




}

h1

You will save yourself a lot of heartache if you remember that 99.999999999% of the time, what you see in Firefox is exactly what you should be seeing. If that's different to what you see in IE, then IE is wrong even though it may be what you want to see.

If it works in Firefox it will work in most of the other browsers so always design for Firefox and fix for IE.



Catrine -> RE: CSS and Firefox - <H1> works in IE but not in Firefox (1/7/2007 13:53:25)

THANKS!!!!!!!!!!!!!!!!!!



Kitka -> RE: CSS and Firefox - <H1> works in IE but not in Firefox (1/7/2007 14:02:32)

You're welcome [:)]

You also need to be aware that you do not have a Doctype. That can cause problems, because it throws browsers into Quirks Mode - with unpredictable results.

You might find it helpful to validate your HTML as well as the CSS - you have quite a number of errors there too:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.blackcreekbsa.org%2F



Catrine -> RE: CSS and Firefox - <H1> works in IE but not in Firefox (1/7/2007 14:25:31)

Oops. I have never used the validation check before. It's depressing reading :-)

Thanks again.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625