Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Why will my browser read HTML but not CSS?


  • Please log in to reply
3 replies to this topic

#1 Deli Worker

Deli Worker

  • Members
  • 4 posts
  • OFFLINE
  •  
  • Local time:08:13 PM

Posted 30 November 2011 - 11:49 AM

I'm a student working on my first CSS lesson. And things are going bad, thanks to the textbook I'm using. I'm using the book "Head First HTML" authored by the Freeman's.

When the Freeman's give the first CSS lesson on page 30 (I show their exact format at the end of this post) you can clearly see CSS working in their web browser as the the book has color images. You can also see the CSS add margins as you would expect CSS to do.

But things are different in my web browser. when I 1) type the code in by hand into Notepad or 2) copy and paste the code in by hand into Notepad the HTML portion is read by my web browser but the CSS portion is not. The CSS portion is ignored/is not read/does not show. But again, the HTML portion is fine.

Anyone know why? Here's the exact format, as created by the Freeman's and taken from their book, that I'm talking about:


<html>

<head>

<title>Starbuzz Coffee</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 Beverages</h1>
<h2>House Blend, $1.49</h2>
<p>A smooth, mild blend of coffees from Mexico, Bolivia and
Guatemala.</p>
<h2>Mocha Caffe Latte, $2.35</h2>
<p>Espresso, steamed milk and chocolate syrup.</p>
<h2>Cappuccino, $1.89</h2>
<p>A mixture of espresso, steamed milk and milk foam.</p>
<h2>Chai Tea, $1.85</h2>
<p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>

</html>

Edited by Andrew, 02 December 2011 - 01:26 PM.
Mod Edit: Add [code] tags for readability - AA


BC AdBot (Login to Remove)

 


#2 mr roman

mr roman

  • Members
  • 24 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:CT / Puerto Rico
  • Local time:11:13 PM

Posted 30 November 2011 - 01:26 PM

you may need to specify a DOCTYPE so the browser knowns what version of language your using, as well as using a META tag between your <head></head> tags to specify the content-type.

Also, to verify that your code is there, if your on Firefox: right click > view page source and look for your CSS.

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>Starbuzz Coffee</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 Beverages</h1>
<h2>House Blend, $1.49</h2>
<p>A smooth, mild blend of coffees from Mexico, Bolivia and
Guatemala.</p>
<h2>Mocha Caffe Latte, $2.35</h2>
<p>Espresso, steamed milk and chocolate syrup.</p>
<h2>Cappuccino, $1.89</h2>
<p>A mixture of espresso, steamed milk and milk foam.</p>
<h2>Chai Tea, $1.85</h2>
<p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>

</html>


You can read more about DOCTYPE here: http://www.w3schools.com/tags/tag_doctype.asp
and META tag here: http://www.w3schools.com/tags/tag_doctype.asp

Edited by mr roman, 30 November 2011 - 01:30 PM.


#3 Andrew

Andrew

    Bleepin' Night Watchman


  • Moderator
  • 8,260 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:Right behind you
  • Local time:08:13 PM

Posted 02 December 2011 - 01:34 PM

This may be just the forum's formatting but, the line:
<style type=”text/css”>
looks like it contains "curly" quotation marks. This would certainly screw up any browser that tried to parse it. Make doubly sure that all quotation marks are simply standard quotation marks and not one of the other glyphs commonly used for prettier punctuation. If you're using some sort of word processor like Microsoft Word to type your code then stop using it; editors like MS Word are not appropriate for source code as they tend to replace characters like quotation marks. Use either MS Notepad or (my favorite) Notepad++.


Related handy tools: W3C HTML Validator; W3C CSS Validator.

Edited by Andrew, 02 December 2011 - 01:36 PM.


#4 Romeo29

Romeo29

    Learning To Bleep


  • Members
  • 3,194 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:127.0.0.1
  • Local time:11:13 PM

Posted 02 December 2011 - 03:57 PM

Andrew pin-pointed the error. I tried the code in Notepad++ yes its the curly quotation marks. :thumbup2:




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users