PDA

Click to See Complete Forum and Search --> : [RESOLVED] FireFox Not Adopting My CSS

jack_o_lantern
03-06-2006, 08:43 PM
Hi,

I'll try to keep this short. I'm redesigning a page I'd previously done with antiquated techniques (eg, tables) using CSS. I've read 'Cascading Style Sheets' 3ed. by Lie and Bos. Now I'm trying to create a very simple test page to apply my style sheet to.

I'm testing only in FireFox at this point (I'm trying to take the advice that if you get it right in FireFox, IE will come easier).

I've validated the html using the W3C tool, and also validated the CSS.

Now, I know there is a lot of old junk (from the original site's style sheet) at the bottom of my CSS, but I thought I'd successfully commented it out. The validator says that the new rules I've set are valid.

My background color and font property don't seem to be working in FireFox. Is this an inheritance problem? I know there has to be something I'm overlooking.

If someone could help clear this up, I'd really appreciate it. I feel like if I can just understand what I'm doing wrong and get FireFox to recognize my properties, it would be a major roadblock out of the way.

I'm trying to learn how to do it the 'right' way, honest!

Thanks,
Michael

Here's the code:

<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK REL="stylesheet" TYPE="text/css" HREF="djstyles"
</head>

<body>
<p>Some text</p>

</body>
</html>

Here's the style sheet:

/*
Body - provides underlying color (light yellow),default font color (black), font style and some margins
*/
body {
background-color: #FEF4DE;
color: #000000;
font: 11pt "Gill Sans MT", Arial, sans-serif;
margin-left: 5%;
margin-right: 5%
}
/*
Links - hyperlink color values
*/
a:link a:hover{
color: #990033 }
a:visited {
color: #336600 }
/*
Area 2 - Sidebar
*/
UL.sidebarlinks {
width: 25%;
float: left;
font: 1em "Arial Narrow", sans-serif;
text-transform: uppercase;
line-height: 1.2em;
list-style: none;
margin-top: 0.5em;
margin-bottom: 0.5em
}
/*
Below this line is all the old 'junk' from the first version of the site
h1 { font-family: Gill Sans MT, Arial; font-size: 14pt; text-align: left; line-height:
100%; margin-left: 36px; margin-top: 0; margin-bottom: 9px }
h2 { margin:5 0; font-size: 24pt; font-family: FuturaTCEExtBol, Arial; color: #333333; letter-spacing:
1pt; text-align:left; line-height:100% }body { font-family: Gill Sans MT; font-size: 11pt; text-align: left; word-spacing: 0;
width: 0; height: 0; margin: 0; padding: 0 }
li { font-size: 11pt; font-family: Gill Sans MT, Arial; margin-left: 18; margin-top:0; margin-bottom:0; line-height:100% }ul { font-size: 11pt; margin-top: 0; margin-bottom: 0; line-height:100% }
table { font-size: 11pt; font-family: Gill Sans MT, Arial; line-height:100%; margin-bottom:0 }h3 { font-family: Gill Sans MT, Arial; font-size: 12pt; text-transform: uppercase;
font-weight: bold; text-align: center; margin-top: 12; margin-bottom:12 }a:active { font-family: Gill Sans MT; line-height: 100%; font-size:11pt }*/
drhowarddrfine
03-06-2006, 08:46 PM
Is the name of the file really djstyles with no extension like .css? You are missing the closing '>', also.
jack_o_lantern
03-06-2006, 10:42 PM
Thank you DrHoward. You were right about using the .css extension and closing the tag.

The background color works, but unfortunately I still have a question: my text is still appearing in serif font, despite the Font property in my body rule. It also wraps the second word under the first.

Is this something I'm leaving out, or due to the font not being inherited by the <p>?

Thanks again
drhowarddrfine
03-07-2006, 07:44 AM
Assuming the font styles are installed on your computer, CSS is case sensitive. Put all your CSS tags in lower case. For that matter, it would be good practice to put all tags in lower case.
jack_o_lantern
03-08-2006, 08:57 PM
Hi,

I've tried to take DrHowardFine's advice on my style sheet and simplified it even further (see below):

/*
Body - provides underlying color (light yellow),default font color (black), font style and some margins
*/
body {
background-color: #FEF4DE;
color: #000000;
}
/*
Links - hyperlink color values
*/
a:link a:hover{
color: #990033 }
a:visited {
color: #336600 }
/*
Area 2 - Sidebar
*/
UL.sidebarlinks {
width: 25%;
float: left;
font: 1em sans-serif;
text-transform: uppercase;
line-height: 1.2em;
list-style: none;
margin-top: 0.5em;
margin-bottom: 0.5em
}
p {
font-family: sans-serif;
}

Here's my html:

<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="djstyles.css">
</head>

<body>
<p>Some text</p>

</body>
</html>

Firefox just isn't adopting sans-serif. I don't have a clue why not. Can anyone enlighten me?

Michael
ray326
03-08-2006, 09:38 PM
Works fine for me. Since you've only listed the generic family, maybe your Fx mapping for sans-serif is wacky.
jack_o_lantern
03-08-2006, 09:46 PM
Hey,

Thanks for the quick response. I don't know what happened, but it righted itself. I started fooling with other classes and adding more content, and now it's adopting sans-serif just fine.

Anyway, while we're at this, would anyone know the best way to get a div that I've floated left to hug the left-hand margin of the page?

Here's the code I've added:


/*
Area 2 - Sidebar
*/
div.sidebarlinks {
background-color: #c0c0c0;
float: left;
min-height: 100%;
padding: 2em 2em;
}
UL.sidebarlinks {
width: 25%;
float: left;
font: 1em sans-serif;
text-transform: uppercase;
line-height: 1.2em;
list-style: none;
margin-top: 0.5em;
margin-bottom: 0.5em
}


By the way, as a newcomer to html and css, I really appreciate being able to come here for help. I didn't know this site existed two months ago, and I've found it really helpful!

Michael
ray326
03-08-2006, 10:26 PM
Got link?
jack_o_lantern
03-08-2006, 11:17 PM
Ray,

No, I'm working this out on my PC. Here's the full code though:


/*
Body - provides underlying color (light yellow),default font color (black), font style and some margins
*/
body {
background-color: #FEF4DE;
color: #000000;
}
/*
Links - hyperlink color values
*/
a:link a:hover{
color: #990033 }
a:visited {
color: #336600 }
/*
Area 1 - Banner
*/
div.banner {
background-color: #c0c0c0;
width: 100%
padding: 2em .4em
}
/*
Area 2 - Sidebar
*/
div.sidebarlinks {
background-color: #c0c0c0;
float: left;
min-height: 100%;
padding: 2em 2em;
}
UL.sidebarlinks {
width: 25%;
float: left;
font: 1em sans-serif;
text-transform: uppercase;
line-height: 1.2em;
list-style: none;
margin-top: 0.5em;
margin-bottom: 0.5em
}
p {
font-family: sans-serif;
font: 11pt arial;
}

And here's the html:

<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
<div class="banner">
<p>Banner</p>
</div>
<div class="sidebarlinks">
<p>Some text</p>
</div>
<p>Other text</p>
</body>
</html>
NogDog
03-08-2006, 11:23 PM
Specify a margin and padding of zero for body (or at least margin-left and padding-left) if you want things to be able to "hug the left-hand margin of the page."