I have the following code on my page, but the CSS formating that I have does not show up in Mozilla Firefox. What am I doing wrong?
<head>
<LINK REL=StyleSheet HREF="Style.css" TYPE="text/css" MEDIA=screen>
</head>
Printable View
I have the following code on my page, but the CSS formating that I have does not show up in Mozilla Firefox. What am I doing wrong?
<head>
<LINK REL=StyleSheet HREF="Style.css" TYPE="text/css" MEDIA=screen>
</head>
Looks fine. Show us the CSS file and the rest of your HTML.
It works fine in IE but doesnt in Firefox.
Here is my html
And this is my CSS fileHTML Code:<head>
<LINK REL=StyleSheet HREF="Style.css" TYPE="text/css" MEDIA=screen>
</head>
<body>
<table width="95%" align="center">
<Tr>
<Td>
<div align="center"><font class="header">Fitness Calculators</font></div>
<br><br>
<a href="http://www.exrx.net/Calculators.html">www.exrx.net/Calculators.html </a>
</TD>
</TR>
</table>
</body>
</html>
[CSS]
.header
{
COLOR: #ac2b31;
FONT-FAMILY: Bauhaus 93;
FONT-SIZE: 18pt;
FONT-WEIGHT: normal;
}
.heading
{
COLOR: #00ABC7;
FONT-FAMILY: Bauhaus 93;
FONT-SIZE: 14pt;
text-decoration: underline;
}
body
{
margin-top: 0px;
margin-bottom: 0px;
scrollbar-3d-light-color: #00ABC7;
scrollbar-arrow-color: #ac2b31;
scrollbar-base-color: #00ABC7;
scrollbar-darkshadow-color: #00ABC7;
scrollbar-face-color: #00ABC7;
scrollbar-highlight-color: #ac2b31;
scrollbar-shadow-color: #ac2b31;
scrollbar-track-color: #00ABC7
}
[/CSS]
If you are using XHTML you must enclose all attributes with quotation marks and all tags/attributes must be in lowercase as XML is case sensitive. You should not use <font> tags and you should specify things like width's in your CSS.
Although, none of that will cause the page to display incorrectly, it will simply be invalid XHTML, and if you are not using XHTML then it is perfectly OK. The unfortunate part is that CSS is also case sensitive :)
CSS:HTML Code:<html>
<head>
<link rel="stylesheet" href="Style.css" type="text/css" media="screen">
</head>
<body>
<table>
<tr>
<td>
<div align="center">
<span class="header">Fitness Calculators</span>
</div>
<br /><br />
<a href="http://www.exrx.net/Calculators.html">www.exrx.net/Calculators.html</a>
</td>
</tr>
</table>
</body>
</html>
Code:.header
{
color: #ac2b31;
font-family: Bauhaus 93;
font-size: 18pt;
font-weight: normal;
}
.heading
{
color: #00ABC7;
font-family: Bauhaus 93;
font-size: 14pt;
text-decoration: underline;
}
body
{
margin-top: 0px;
margin-bottom: 0px;
scrollbar-3d-light-color: #00ABC7;
scrollbar-arrow-color: #ac2b31;
scrollbar-base-color: #00ABC7;
scrollbar-darkshadow-color: #00ABC7;
scrollbar-face-color: #00ABC7;
scrollbar-highlight-color: #ac2b31;
scrollbar-shadow-color: #ac2b31;
scrollbar-track-color: #00ABC7
}
body table
{
width: 95%;
}
Open up the JavaScript console. See if there's a warning that says something like, "Style sheet declared as text/css, but actually is text/plain." If there is, you have a server misconfiguration.
Edit: Although looking at your HTML, I very much doubt Mozilla is in standards mode, so it wouldn't ignore the style sheet ...
Ok I figured it out myself.
Apprently I cant use the following in CSS: font-family: Bauhaus 93;
I put in the following line:FONT-FAMILY: "Bauhaus 93", Verdana, Helvetica, sans-serif;
And it works like a charm.