body tag not working in css

stevenmw

10-26-2009, 12:37 PM

Fo some reason my body tag won't work. Everything in the stylesheet works except the body piece.

Here is my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css">

<title>...</title>
</head>

<body>
<div class="page">
<div class="outline">
<div class="topbox">
</div>
</div>
<div class="outline2">
<div class="mainnav">
</div>
</div>
<div class="outline3">
<div class="secondnav">
</div>
</div>
</div>
</body>
</html>

Here is my css:
/* CSS Document */
<style type="text/css">

body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background: #949ca9;
}

.page {
background-color: #FFFFFF;
border-top: #FFFFFF 0px solid;
border-left: #847f7b 1px solid;
border-right: #847f7b 1px solid;
width: 900px;
height: 700px;
margin-top: 0px;
padding-top: 0px;
padding-left: 5px;
padding-right: 5px;
margin-left: auto;
margin-right: auto;
}

/* header navigation */
.outline {
border: #92928f 1px solid;
height: 22px;
background: #f7f7f3;
margin-left: auto;
margin-right: auto;
}

.outline2 {
border: #92928f 1px solid;
border-top: #92928f 0px solid;
height: 22px;
background: #f7f7f3;
margin-left: auto;
margin-right: auto;
}

.outline3 {
border: #92928f 1px solid;
border-top: #92928f 0px solid;
height: 30px;
background: #f7f7f3;
margin-left: auto;
margin-right: auto;
}

.topbox {
border: #d9d8d2 1px solid;
height: 20px;
background: #f7f7f3;
margin-left: auto;
margin-right: auto;
}

.mainnav {
border: #d9d8d2 1px solid;
height: 20px;
background: #837e7a;
margin-left: auto;
margin-right: auto;
}

.secondnav {
border: #d9d8d2 1px solid;
height: 28px;
background: #f7f7f3;
margin-left: auto;
margin-right: auto;
}

</style>

abduraooft

10-26-2009, 12:41 PM

.body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background: #949ca9;
} .body is the selector for an element having class="body". So you need to either add that attribute in your html or remove the period(.) before .body in CSS

ahayzen

10-26-2009, 12:41 PM

Body tag should be written without the '.' because it a tag not a class

body{font-family: Verdana, Helvetica, Arial, sans-serif;
background: #949ca9;
}

stevenmw

10-26-2009, 01:01 PM

Body tag should be written without the '.' because it a tag not a class

body{font-family: Verdana, Helvetica, Arial, sans-serif;
background: #949ca9;
}

That's how I've got it, but it just doesn't work?

ahayzen

10-26-2009, 01:16 PM

No you have a dot before body take this away

body
{
font-family: Verdana, Helvetica, Arial, sans-serif;
background: #949ca9;
}

stevenmw

10-26-2009, 01:33 PM

No you have a dot before body take this away

body
{
font-family: Verdana, Helvetica, Arial, sans-serif;
background: #949ca9;
}

This is so weird... Haha. I didn't realize i had made body a class, but still. I've removed the period and it still doesnt work.

The code in the first post is now exactly like my code still is. See any problems? I don't...

ahayzen

10-26-2009, 01:54 PM

Sorry for slow reply - went for lunch!!!

The code you gave in the first post.

The CSS passes validation however the Html comes back an error. (error is at bottom)

You are writing your code in XHTML meaning that you need to close the link tag with a /> not >

Fixed Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>

<title>...</title>
</head>

<body>
<div class="page">
<div class="outline">
<div class="topbox">
</div>
</div>
<div class="outline2">
<div class="mainnav">
</div>
</div>
<div class="outline3">
<div class="secondnav">
</div>
</div>
</div>
</body>
</html>

# Error Line 5, Column 57: end tag for "link" omitted, but OMITTAG NO was specified

…t" href="style.css" type="text/cs…

✉

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
# Info Line 5: start tag was here

><link rel="stylesheet" href="style.css" type="text/css">

# Error Line 8, Column 7: XML Parsing Error: Opening and ending tag mismatch: link line 5 and head

</head>

✉
# Error Line 26, Column 7: XML Parsing Error: Opening and ending tag mismatch: head line 3 and html

</html>

✉
# Error Line 26, Column 7: XML Parsing Error: Premature end of data in tag html line 2

</html>

ahayzen

10-26-2009, 01:56 PM

By the way after changing the closing link tag this fixes all of the other errors!!

abduraooft

10-26-2009, 02:01 PM

This is so weird... Haha. I didn't realize i had made body a class, but still. I've removed the period and it still doesnt work.

The code in the first post is now exactly like my code still is. See any problems? I don't...Could you post your current code?

VIPStephan

10-26-2009, 02:11 PM

/* CSS Document */
<style type="text/css">

body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background: #949ca9;
}
…
…
…
.secondnav {
border: #d9d8d2 1px solid;
height: 28px;
background: #f7f7f3;
margin-left: auto;
margin-right: auto;
}

</style>

This is not CSS, and therefore it doesn’t belong in a CSS file.

ahayzen

10-26-2009, 02:13 PM

take out the <style> tags and change the ending of the link tag to /> because you are writing in XHTML

stevenmw

10-27-2009, 12:00 AM

Thanks everyone. My problem was the <script> </script>

Those tags weren't needed.

chyssa

10-27-2009, 02:58 AM

Thanks for the advice and codes it can help a lot...