Avatar
Log In
Please consider registering
Guest
Forum Scope


Match



Forum Options



Min search length: 3 characters / Max search length: 84 characters
Register Lost password?
sp_topic_old
Help: My web browser will read HTML but not CSS
Avatar
The Blind Side
2 Posts
(Offline)
1
November 30, 2011 - 10:53 am

I'm in my my first CSS lesson and the code, as copied straight out of the book and copied into Notepad, for some odd reason is not being read by my browser. The HTML code is being read. But not the CSS code. Can someone tell me why my browser won't read the CSS portion of the code below?

[code:35hcqq0i]<html>

<head>
<title>Starbuzz Coffee

Avatar
Chad Johnson
867 Posts
(Offline)
2
November 30, 2011 - 8:03 pm

Well...we're not much for the programming here, but I'll take a stab at it:

The issue comes from this line of code:
[code:fj1sjvxb]<style type=

Avatar
David Hartsock
1117 Posts
(Offline)
3
December 1, 2011 - 6:41 am

Yup, Chad's exactly right. The "smart" quotes are killing it.

I copied the code into Dreamweaver, which removed the smart quotes and it displays fine. That's one thing you have to be careful about as not every program handles encoding the same. All you need is plain text.

Here's the corrected code:
[code:jrvmdrzh]<html>

<head>
<title>Starbuzz Coffee's Mission</title>
<style type="text/css">
body
{
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>

<body>
<h1>Starbuzz Coffee's Mission</h1>
<p>To provide all the caffeine that you need to power your life.</p>
<p>Just drink it.</p>
</body>

</html>[/code:jrvmdrzh]

I don't want to put the cart before the horse, but you also need to declare a doc type and encoding for a proper web page. As an example this would appear before your code and replacing the <html> tag:
[code:jrvmdrzh]<!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">[/code:jrvmdrzh]

So the proper page code would look like this:
[code:jrvmdrzh]<!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>
<title>Starbuzz Coffee's Mission</title>
<style type="text/css">
body
{
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>

<body>
<h1>Starbuzz Coffee's Mission</h1>
<p>To provide all the caffeine that you need to power your life.</p>
<p>Just drink it.</p>
</body>

</html>[/code:jrvmdrzh]

Avatar
The Blind Side
2 Posts
(Offline)
4
December 1, 2011 - 9:20 am

Declare a doc type? Really?? I'm not arguing with you. But my teacher, thus far, has never used the words "Doc type" in any of our lessons. So in our world, the students world, a doc type doesn't exist...not yet. I'm on page 30 of "Head First HTML with CSS & XHTML a Learner's Guide." Page 30 is where you'll find the very first CSS problem/example for the student to address. Up to that point the student was getting instruction on XHTML. And yes, I had and have created a couple of web pages thanks to those first 29 pages of instructions.

So, in essence, the teacher(s) were telling us that we could use CSS on Notepad (yeah i use Notepad in Windows XP) and then see the results using IE (Internet Explorer). If you could see page 30 you would clearly see what i mean by that.

The teachers are the authors of the book, Elisabeth and Eric Freeman. I applied your suggestion. I changed the quotation marks. That's all I did, i just changed the quotation marks. And to my utter amazement my browser can now read the problem/example located on page 30, Chapter 1. But I did not add the doc type, not yet. Right now I feel like saying "Thank you very much for your time and assistance. It saved the day." And it did. Because I spent many hours in an unproductive postion, learning nothing, unable to move on to Chapter 2.

But now I have to wonder what would happen if I ad the doc type. I wonder if that might illicit a change. What's up with that theory, you ask? Well, the CSS code for the page 30 example adds approximately 4 or 5 styling changes. And from what I see on my browser is that most, but not all, of those changes were made. For instance, the background is now a tan color as it should be. Along with the margins, now we have margins thanks to the CSS. But there is one thing missing. And that's what the book calls (and shows in a picture on page 31) and I quote "A gray border around the content....". I see the gray border in the book on page 31. But when I look at it on my computer monitor/web browser there is no gray border. But that's okay. I'm not sweating that. It's a small detail. I just wonder, and surmise, that if I add the doc type perhaps then gray border will show up (?)

Avatar
David Hartsock
1117 Posts
(Offline)
5
December 1, 2011 - 9:53 am

[quote="The Blind Side":1sni9msn]But now I have to wonder what would happen if I ad the doc type. I wonder if that might illicit a change. What's up with that theory, you ask? Well, the CSS code for the page 30 example adds approximately 4 or 5 styling changes. And from what I see on my browser is that most, but not all, of those changes were made. For instance, the background is now a tan color as it should be. Along with the margins, now we have margins thanks to the CSS. But there is one thing missing. And that's what the book calls (and shows in a picture on page 31) and I quote "A gray border around the content....". I see the gray border in the book on page 31. But when I look at it on my computer monitor/web browser there is no gray border. But that's okay. I'm not sweating that. It's a small detail. I just wonder, and surmise, that if I add the doc type perhaps then gray border will show up (?)[/quote:1sni9msn]

As I said, cart before the horse. I'm sure they will get to that at a later time. It basically tells the browser what to expect and is required for the page to pass validation, but don't let that concern you at the moment. I didn't mean to confuse you!

I use Dreamweaver and it displays fine for me.
[attachment=0:1sni9msn]12-1-2011 9-51-44 AM.png[/attachment:1sni9msn]

Avatar
Jim Hillier
2700 Posts
(Offline)
6
December 1, 2011 - 2:28 pm

Displays fine for me too, gray border and all (just using Notepad).

Forum Timezone: America/Indiana/Indianapolis
All RSSShow Stats
Administrators:
Jim Hillier
Richard Pedersen
David Hartsock
Moderators:
Carol Bratt
dandl
Jason Shuffield
Jim Canfield
Terry Hollett
Stuart Berg
John Durso
Top Posters:
Chad Johnson: 867
Mindblower: 664
carbonterry2: 356
Flying Dutchman: 278
grr: 211
Newest Members:
JudeLandry
benjaminlouis680309
drogers97439
travishead60
Gohighlevelsnapshots
Forum Stats:
Groups: 8
Forums: 20
Topics: 1941
Posts: 13516

 

Member Stats:
Guest Posters: 11
Members: 3177
Moderators: 7
Admins: 3
Most Users Ever Online: 2303
Currently Online: leslieroy
Guest(s) 38
Currently Browsing this Page:
1 Guest(s)
Scroll to Top

WHY NOT SUBSCRIBE TO OUR NEWSLETTER?

Get great content like this delivered to your inbox!

It's free, convenient, and delivered right to your inbox! We do not spam and we will not share your address. Period!