Help on Chapter 1, page 30 (when you start practicing CSS)

#1 Manami

New Member

Group: Members
Posts: 2
Joined: 25-August 08

Posted 25 August 2008 - 09:10 AM

Good day everyone, I am new here.

I bought this book to learn how to build websites a week ago and after I reached on page 30 and did the following, I noticed that the border "1px dotted gray" doesn't appear the same as it shows on the examples of the book.

I'm pretty sure I have everything good and there's no error. The gray border doesn't appear on the center of the web page. I maximized the px by 4px and it shows that the gray border is on the end (or on the edge) of the computer screen. Is this an error from the book? Or is it because I'm using a PC and not a MAC like shown in the book?

Can this be fixed?
I want to have this right before I contine to chapter 2.

Thanks in advance!

#2 gmarinoni

New Member

Group: Members
Posts: 1
Joined: 25-August 08

Posted 25 August 2008 - 01:22 PM

You have to add the following tag before the HTML tag to the sample to fix the problem with the border :

<DOCTYPE>

The meanning of this will be explained later in the book.

#3 bob_s

New Member

Group: Members
Posts: 7
Joined: 07-August 08

Posted 25 August 2008 - 02:04 PM

The example on page 30 works correctly with Firefox, but not Internet Explorer.

There's an easy fix. Write the following command as the first line of the index.html file (before the <html> tag):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

After you do this, IE7 will show the border.

This line (or something like it) should really be at the start of all HTML files, but it's not discussed in the book until page 241. Except for this border problem, however, the examples before page 241 don't really need this line.

#4 Manami

New Member

Group: Members
Posts: 2
Joined: 25-August 08

Posted 26 August 2008 - 10:51 AM

Thanks!

Now I can continue on to chapter 2.

#5 rbrts3sims

New Member

Group: Members
Posts: 3
Joined: 07-October 08

Posted 07 October 2008 - 02:32 PM

I just got the book a couple days ago and I enjoy it very much so far.

Thanks "bob_s" for the fix before html, I was also not seeing the border when using Internet Explorer.

#6 rohit.kshirsagar

New Member

Group: Members
Posts: 1
Joined: 16-November 11

Posted 19 January 2013 - 10:19 AM

Thanks for the help. The example was not displaying correctly on chrome. Your tip helped.

#7 Beth Robson

Advanced Member

Group: O'Reilly Employee
Posts: 321
Joined: 17-September 08
Gender:Female
Location:Seattle, WA
Interests:I am interested in computer science, the Web, social media and the internet, Mac development, and adult learning.

Posted 19 January 2013 - 08:35 PM

Note, that in the new version of the book the doctype has changed to the HTML5 doctype:

<!doctype html>

along with a couple of other small things.

We put the border on the body tag in the first chapter, which probably wasn't a good idea because different browsers have different ideas of how that should be rendered (specifically IE doesn't like to show a border on a body).

However, if you keep going in the book, the rest of the examples should all work (fingers crossed!). We tried to avoid anything that would cause an issue in a browser, but it's tricky to do that with all browsers, especially as they change quickly!

Elisabeth Robson
Co-founder, WickedlySmart.com
Author: Head First HTML5 Programming, Head First HTML and CSS, Head First Design Patterns