...

View Full Version : Why css does not work (example from a book)?



joliett89
07-17-2011, 03:58 PM
<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>


Copy and try:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

Daniel_A_Varney
07-17-2011, 04:18 PM
What?

joliett89
07-17-2011, 04:26 PM
http://joliett89.comli.com/

No background color, formatting etc...

alykins
07-17-2011, 04:35 PM
your "s are screwed up... copy/paste it to an editor that applies colors; they show it all messed up... also if you save it as .html and open in chrome and inspect element you can see bc the "s are screwed up it changes it to <style type=""text/css"">... sorry, to direct you more, it is the "s in your style tag

joliett89
07-17-2011, 05:03 PM
your "s are screwed up... copy/paste it to an editor that applies colors; they show it all messed up... also if you save it as .html and open in chrome and inspect element you can see bc the "s are screwed up it changes it to <style type=""text/css"">... sorry, to direct you more, it is the "s in your style tag

Not sure what you mean. I run http://validator.w3.org/ and it did not find anything either (not in the code above itself) ...

I looked at the code in Notepad ++ and <style type=”text/css”> "type" is red and "text" is orange if that means anyting ...

alykins
07-17-2011, 05:14 PM
doesn't mean much to me at all... i dont use that editor. But i copy/pasted your code and saved it as .html... then i viewed in browser and inspected element and instead of it saying <style type="text/css">..... it said <style type=""text/css"">.... so i went back and deleted the "s and typed them in manually from keyboard and it worked fine. also notice how your "s in the style are not straigh "up and down" they are slanted.. you need to use the keystroke "s

joliett89
07-17-2011, 05:23 PM
Sorry, but I dont know what you mean. I have Core FTP (free program) and I just login to the server and then get to index.html file and right click on to edit. It is using notepad so all the letters are the same, just like any other text file that I have on my hard drives. I changed all the "s" letters within <style> and </style> tags, just in case, but that dont make no difference. This is as simple as it gets, but I honestly dont know how to get it to work (I've been working on more complex websites etc).

Website is suppose to look like that: http://joliett89.comli.com/example.jpg

alykins
07-17-2011, 05:26 PM
are you saving it as a .html file? or are you trying to view it on w3schools in browser "text editor"? All i did was copy/paste it, and then replace the "s.... it works fine for me. I am not seeing an issue

joliett89
07-17-2011, 05:29 PM
are you saving it as a .html file? or are you trying to view it on w3schools in browser "text editor"? All i did was copy/paste it, and then replace the "s.... it works fine for me. I am not seeing an issue

Yes. It is index.html. Doesn't work in Chrome either.

alykins
07-17-2011, 05:35 PM
i don't really know what to tell you... here is the code...


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

and attached is screen shot in chrome
Are you using some sort of international keyboard or something?

joliett89
07-17-2011, 05:38 PM
I copied your code and it is working now. Thanks. I dont know what the h*** was wrong with it...

I initially copied the code from an e-book with a little different fonts etc (Pdf). Maybe that was the reason why it was not working. I dont know...


border: 1px dotted gray; This part still aint working anyway :) I got Explorer 8, the newest Chrome and a US Laptop

leetvivi
07-17-2011, 05:39 PM
If you inspect it in FireBug or any other browser debugger (not a site like the w3 one you linked, I do not trust that), you can see that your line for declaring your CSS is showing this:
<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>
Now if you look, you will see it says ""Text/CSS"", you want it to say "Text/CSS". So inside your HTML file, make sure there are only one set of quotes surrounding the Text/CSS declaration.

alykins
07-17-2011, 05:39 PM
I copied your code and it is working now. Thanks. I dont know what the h*** was wrong with it...

the "s... that is the only thing i changed.

joliett89
07-17-2011, 05:44 PM
Now if you look, you will see it says ""Text/CSS"", you want it to say "Text/CSS". So inside your HTML file, make sure there are only one set of quotes surrounding the Text/CSS declaration.

I checked this part ealier. It is showing in "View source" in IE8:



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

vseprav
07-19-2011, 10:46 AM
where you took these quotes (””)?

Mike Walker
07-19-2011, 06:23 PM
Those are weird quotations, I noticed the " is the only thing that changed aswell.

It went from ” to "... slanted to straight... vury intrusting.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum