scriptygoddess

07 Apr, 2004

CSS – Paste now, Understand later

Posted by: Jennifer In: Lessons learned

So I'm moving along in my CSS understanding. I (think) I get float, positioning. I even get the box model, and box model hack.

I had a small site that used a tabled-design that is due to go live next week, so I decided I'd quickly convert it to CSS before the launch. (Yes, I know it's Wednesday. Yes, I'm a glutton for punishment).

I got my layout working 99%. I had previously removed the doctype declaration – so when I put in the box model hack – it didn't seem to work in IE 6. I pasted this one in from a page online that I knew used the hack and worked, and then it worked for me too:

<!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" xml:lang="en" lang="en">

I don't understand doctype declarations. I know they're important and that I should understand them. Right now, I'm just glad my layout is happy again. Baby steps here… baby steps!

7 Responses to "CSS – Paste now, Understand later"

1 | dwlt

April 7th, 2004 at 2:08 pm

Avatar

I think the situation is that the browser uses the doctype declaration to determine whether to use standards compliant mode or 'quirks' mode.

If you're smart enough to put in a valid doctype, the browser assumes you're smart enough to do everything else correctly.

Hope that helps.

/dwlt

2 | theresa

April 7th, 2004 at 2:43 pm

Avatar

All the doctype does is tell the browser the "document type" – in other words, what kind of HTML document it is. The doctype you have in this entry says it's an XHTML document. The doctype you removed earlier said it was an HTML 4.01 document. see this site for a better explanation.

3 | theresa

April 7th, 2004 at 2:43 pm

Avatar

All the doctype does is tell the browser the "document type" – in other words, what kind of HTML document it is. The doctype you have in this entry says it's an XHTML document. The doctype you removed earlier said it was an HTML 4.01 document. see this site for a better explanation.

4 | theresa

April 7th, 2004 at 2:54 pm

Avatar

Er, sorry for the double post. I forgot to add earlier..

If you're using Dreamweaver MX 2004, when you create a new document (file -> new), you get the dialog box for what kind of file you want to create. If you choose Basic -> HTML, there is a little checkbox at the bottom of the dialog box that says "make document XHTML compliant". If you check that box, Dreamweaver will give you the XHTML doctype and XHTML compliant code too!

5 | Jared

April 8th, 2004 at 9:42 am

Avatar

Take a look at this. This is your site on OS 9 in IE 5. I am sure you dont care about the small amount of viewers that still use OS 9 but I thought it was interesting.

6 | Jared

April 8th, 2004 at 9:46 am

Avatar

Sorry about breaking the page with this big screen shot. I tried to make a small thumbnail size that linked to a larger image but for some reason it would not recognize the high and width of the img element.

7 | Andy Mac

April 9th, 2004 at 3:25 am

Avatar

A great article on doctypes and there implications on CSS design can be found at ALA
and another at Position Is Everything

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements