Styles Not Working Ch3 Designing Sites

Axisbold2k2 · May 23rd, 2012, 10:28 AM

My styles will not work on the start of the exercise in Ch3.

I'm using Chrome as the browser. Could that be the issue? I can I
change the default browser?

I'm only getting text when I run the page.
Thanks for help or suggestions.

This is where head content goes
This is where the navigation goes
This is where left content goes
This is where main content goes

This is where the footer goes

Imar · May 24th, 2012, 08:25 AM

Does it work in other browsers? Sounds more like your CSS file can't be found. Can you show the relevant code?

Imar

Axisbold2k2 · May 27th, 2012, 10:47 PM

Imar...

Here is the code I am using....I just copied from page 55-57 exercises....

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset=âutf-8â />
<title></title>
<link href=âStyleSheet.cssâ rel=âstylesheetâ type=âtext/cssâ />
</head>
<body>
<div id=âheaderâ>
<div id=âheadâ>This is where head content goes</div>
</div>
<div id=ânavstripâ>
<div id=ânavâ>This is where the navigation goes</div>
</div>
<div id=âwrapperâ>
<div id=âleftâ>
<div id=âsearchâ>This is where left content goes</div>
</div>
<div id=âcontentâ>
<p>This is where main content goes</p>
</div>
<div id=âfooterâ>
<p>This is where the footer goes</p>
</div>
</div>
</body>
</html>

here is the CSS.....

/*
-------------------------------------------------HTML ELEMENTS
-------------------------------------------------*/
body {
font-family :Verdana, Helvetica, sans-serif;
font-size:80%;
color:#5f5f5f;
padding:0;
margin:0;v
background-color:white;
}

/*
-------------------------------------------------SITE STRUCTURE
-------------------------------------------------*/
#header, #navstrip{
width:100%;
background-color:#4b4b4b;
}
#header{
min-height:70px;
color:white;
}
#navstrip{
border-bottom:2px solid #c3c4c8;
}
#head, #nav, #wrapper{
width:900px;
margin:auto;
}
#head{
font:normal 4em Tahoma;
line-height:2em;
}
#wrapper{
background-color:white;
border:2px solid #717171;
}
#nav{
background-color:#717171;
line-height:25px;
color:white;
}
#nav a, #nav a:hover, #nav a:visited{
color:white;
font-size:1.0em;
text-decoration:none;
text-transform:uppercase;
padding:5px 15px;
}
#left, #content{
float:left;
min-height:400px;
}
#left{
width:180px;
background-color:#e8e8e8;
}
#content{
width:700px;
background-color:white;
padding:10px
}
#footer{
clear:both;
font-size:90%;
color:#999;
text-align:center;
}
#nav, #login {
border-bottom:1px solid black;
padding-bottom:4px;
}

dejohnny · June 2nd, 2012, 08:08 PM

Quote:

Originally Posted by Axisbold2k2

Imar...

Here is the code I am using....I just copied from page 55-57 exercises....

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset=âutf-8â />
<title></title>
<link href=âStyleSheet.cssâ rel=âstylesheetâ type=âtext/cssâ />
</head>
<body>
<div id=âheaderâ>
<div id=âheadâ>This is where head content goes</div>
</div>
<div id=ânavstripâ>
<div id=ânavâ>This is where the navigation goes</div>
</div>
<div id=âwrapperâ>
<div id=âleftâ>
<div id=âsearchâ>This is where left content goes</div>
</div>
<div id=âcontentâ>
<p>This is where main content goes</p>
</div>
<div id=âfooterâ>
<p>This is where the footer goes</p>
</div>
</div>
</body>
</html>

here is the CSS.....

/*
-------------------------------------------------HTML ELEMENTS
-------------------------------------------------*/
body {
font-family :Verdana, Helvetica, sans-serif;
font-size:80%;
color:#5f5f5f;
padding:0;
margin:0;v
background-color:white;
}

/*
-------------------------------------------------SITE STRUCTURE
-------------------------------------------------*/
#header, #navstrip{
width:100%;
background-color:#4b4b4b;
}
#header{
min-height:70px;
color:white;
}
#navstrip{
border-bottom:2px solid #c3c4c8;
}
#head, #nav, #wrapper{
width:900px;
margin:auto;
}
#head{
font:normal 4em Tahoma;
line-height:2em;
}
#wrapper{
background-color:white;
border:2px solid #717171;
}
#nav{
background-color:#717171;
line-height:25px;
color:white;
}
#nav a, #nav a:hover, #nav a:visited{
color:white;
font-size:1.0em;
text-decoration:none;
text-transform:uppercase;
padding:5px 15px;
}
#left, #content{
float:left;
min-height:400px;
}
#left{
width:180px;
background-color:#e8e8e8;
}
#content{
width:700px;
background-color:white;
padding:10px
}
#footer{
clear:both;
font-size:90%;
color:#999;
text-align:center;
}
#nav, #login {
border-bottom:1px solid black;
padding-bottom:4px;
}

What happens if you put the CSS code inside a <style> tag before the closing </head> tag?

Mike Brind · June 3rd, 2012, 06:56 AM

It looks like you have copied and pasted from a PDF version of the book. The double quotes are all wrong. Replace them with real double quotes and it should work