Help: My web browser will read HTML but not CSS

Avatar

Please consider registering
Guest

Search

— Forum Scope —






— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

Register Lost password?
sp_Feed sp_topic_old
Help: My web browser will read HTML but not CSS
Avatar
The Blind Side
Member
Forum Posts: 2
Member Since:
March 8, 2010
sp_UserOfflineSmall Offline
1
November 30, 2011 - 10:53 am
sp_Permalink sp_Print

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
Mod
Forum Posts: 867
Member Since:
August 11, 2011
sp_UserOfflineSmall Offline
2
November 30, 2011 - 8:03 pm
sp_Permalink sp_Print

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
Admin
Forum Posts: 1105
Member Since:
August 7, 2011
sp_UserOfflineSmall Offline
3
December 1, 2011 - 6:41 am
sp_Permalink sp_Print

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
Member
Forum Posts: 2
Member Since:
March 8, 2010
sp_UserOfflineSmall Offline
4
December 1, 2011 - 9:20 am
sp_Permalink sp_Print

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
Admin
Forum Posts: 1105
Member Since:
August 7, 2011
sp_UserOfflineSmall Offline
5
December 1, 2011 - 9:53 am
sp_Permalink sp_Print

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
Admin
Forum Posts: 2492
Member Since:
August 9, 2011
sp_UserOfflineSmall Offline
6
December 1, 2011 - 2:28 pm
sp_Permalink sp_Print

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

Forum Timezone: America/Indiana/Indianapolis

Most Users Ever Online: 188

Currently Online:
15 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Member Stats:

Guest Posters: 10

Members: 1273

Moderators: 3

Admins: 4

Forum Stats:

Groups: 8

Forums: 19

Topics: 1538

Posts: 11824

Administrators: Jim Hillier, Richard Pedersen, David Hartsock, Marc Thomas

Moderators: Judy Novotny, Jason Shuffield, Mail Poet