Braveheartt Posted July 8, 2008 Share Posted July 8, 2008 Hi there. I'm going through a XHTML and CSS book, it told me to type all of this directly off the page: <html> <head> <title>Starbuzz Coffee</title> <style type="text/css"> body { background-colour: #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 Cafe Latte, $2.35</h2> <p>Espresso, steamed mil and chocolate syrup.</p> <h2>Cappuccino, $1.89</h2> <p>A mixture of espresso, steamed milk and foam.</p> <h2>Chai Tea, $1.85</h2> <p>A spicy drink made with black tea, spices, milk and honey.</p> </html> Now that should display with a tan background colour and a grey border, but it displays like so for me... And I don't think that's even the correct font it's suppose to be using. IE: Firefox: That code is in the book and shows me a picture of how it should display... Have I done something wrong? Why is it not working? Thanks! Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted July 9, 2008 Share Posted July 9, 2008 close the body tag just prior to teh closing html tag </body> </html> Quote Link to comment Share on other sites More sharing options...
PHPQuack Posted July 9, 2008 Share Posted July 9, 2008 Somebody answered part of your post before I did. Another thing, your following property background-colour: should be background-color: Take out the "u", that's why the background color is not showing. I tried it on firefox 2 and all works fine, if your browser is not displaying it correctly, could be a browser compatibility issue. Look around on this site http://css.maxdesign.com.au/index.htm, there may be a section showing what issues certain version of browsers may have. with or without the closing body tag, does not make a difference in firefox 2 or win IE6, but it should be there anyway. Quote Link to comment Share on other sites More sharing options...
haku Posted July 9, 2008 Share Posted July 9, 2008 It should definitely be there. But in this case it was the spelling error (from an American perspective, and CSS appears to be American English). Quote Link to comment Share on other sites More sharing options...
Braveheartt Posted July 9, 2008 Author Share Posted July 9, 2008 Thanks. Fixed the missing </body> tag and the color spelling, still the border thing is not there: Internet Explorer: IE 7 if that helps. Quote Link to comment Share on other sites More sharing options...
rajivgonsalves Posted July 9, 2008 Share Posted July 9, 2008 your code should be <html> <head> <title>Starbuzz Coffee</title> <style type="text/css"> body { background-color: #d2b48c; margin-left: 20%; margin right: 20%; border: 1px solid gray; font-family: sans-serif; } #border {border: 1px dotted gray; padding: 10px 10px 10px 10px;} </style> </head> <body> <div id="border"> <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 Cafe Latte, $2.35</h2> <p>Espresso, steamed mil and chocolate syrup.</p> <h2>Cappuccino, $1.89</h2> <p>A mixture of espresso, steamed milk and foam.</p> <h2>Chai Tea, $1.85</h2> <p>A spicy drink made with black tea, spices, milk and honey.</p> </div> </html> Your applying border to body that does not make sense your body is the whole browser inner Window, hope it helps Quote Link to comment Share on other sites More sharing options...
Braveheartt Posted July 9, 2008 Author Share Posted July 9, 2008 Your applying border to body that does not make sense your body is the whole browser inner Window, hope it helps It's what the book told me to type! Head first with HTML, XHTML & CSS. In the book it shows the text with a dotted frame all the way around it (.....). Quote Link to comment Share on other sites More sharing options...
rajivgonsalves Posted July 9, 2008 Share Posted July 9, 2008 Yes but the style if applied to body is applied to the window so the border will be there but it cannot be seen because it will go to the furthermost corners of the page. Quote Link to comment Share on other sites More sharing options...
haku Posted July 9, 2008 Share Posted July 9, 2008 That is both incorrect, and bad advice. There is a margin on both sides of the body (which isn't necessarily the greatest practice itself, though lets just ignore that), which means that the border will appear. On top of this, you told him to take the border setting out of the body, but didn't put it into any tag. This means the border isn't set to anything, and wont show up anywhere. Finally, as to the problem, the 'dotted' border style is not supported by many browsers. Use a different border style. Here is a list of possibilities: http://www.devguru.com/technologies/css2/8067.asp Quote Link to comment Share on other sites More sharing options...
rajivgonsalves Posted July 9, 2008 Share Posted July 9, 2008 Yeah Haku, your the help guru, whatever... I was trying to help.. Quote Link to comment Share on other sites More sharing options...
haku Posted July 9, 2008 Share Posted July 9, 2008 I wasn't doing it to be a jerk, and it's good of you to help (I appreciate it when people help me), and I don't think the guy is going to be angry or anything with you. But it was incorrect, and it was bad advice! I maybe didn't say it very softly, but I also didn't say it that harshly. I was just pointing out the errors in it. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted July 9, 2008 Share Posted July 9, 2008 there is nothing wrong with putting a margin on the body. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb"> <head> <title>Starbuzz Coffee</title> <style type="text/css"> body { background-color: #d2b48c; margin: 20px 20%; border: 1px dotted #999; 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 Cafe Latte, $2.35</h2> <p>Espresso, steamed mil and chocolate syrup.</p> <h2>Cappuccino, $1.89</h2> <p>A mixture of espresso, steamed milk and foam.</p> <h2>Chai Tea, $1.85</h2> <p>A spicy drink made with black tea, spices, milk and honey.</p> </body> </html> try that - the doc type is why you are not seeing the results in internet exploder... Quote Link to comment Share on other sites More sharing options...
Braveheartt Posted July 10, 2008 Author Share Posted July 10, 2008 there is nothing wrong with putting a margin on the body. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb"> <head> <title>Starbuzz Coffee</title> <style type="text/css"> body { background-color: #d2b48c; margin: 20px 20%; border: 1px dotted #999; 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 Cafe Latte, $2.35</h2> <p>Espresso, steamed mil and chocolate syrup.</p> <h2>Cappuccino, $1.89</h2> <p>A mixture of espresso, steamed milk and foam.</p> <h2>Chai Tea, $1.85</h2> <p>A spicy drink made with black tea, spices, milk and honey.</p> </body> </html> try that - the doc type is why you are not seeing the results in internet exploder... That fixed it! Even though I have no idea what the whole: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb"> means! Why does IE require that for it to show the border? But Firefox does not? Also I noticed I had done the "margin right: 20%;" wrong, should be "margin-right: 20%;"! Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted July 11, 2008 Share Posted July 11, 2008 without it ie works in quirks mode - with a good dtd ie works in standards 'compliant' mode Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.