CSS and XHTML problems

**Eric_NewsMan** · Sep 14, 2006 05:07

I knows it may sound stupid but my page goes completely crazy when I add the line: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> to it!
Well, not exactly the page, but more the css style goes crazy - I mean it does not work properly as it would without the line above – playing around with it, I noticed it is the word “PUBLIC” that causes the mistake.
The problem with it is that I cannot validate the page without that line and with the line my page style FU$§S UP!
Does anyone have an idea to solve this problem???
TIA

Eric

**drhowarddrfine** · Sep 14, 2006 07:06

This is called a doctype. It is, essentially, telling the browser which set of rules you are following when you coded the page. This is why the doctype should be the very first thing you put on a page when you code it. If you put it in after it's done, then you are changing the rules and this is why your page 'goes crazy'.

The only thing you can do is validate and fix your errors and adjust your code so it fits the doctype. You always should code to the doctype and never try and make a doctype fit your code.

**Dan Schulz** · Sep 14, 2006 07:58

drhowarddrfine hit the nail right on the head. What he didn't tell you though is that the lack of a DOCTYPE will throw EVERY browser into "quirks mode" which is a nice way of saying that the browser will render the pages as if they were written with legacy code (think 1997 here). If you want to get all the browsers to render the pages you create the same way (and properly) you HAVE to use a proper DOCTYPE.

A quick note about XHTML and Internet Explorer. If you put ANYTHING (even a space) above the DOCTYPE, it will throw IE into quirks mode. If you use a WISIWYG editor (like Dreamweaver, Frontpage or GoLive), check the code your editor produces for something that looks like this at the very top of every page:

HTML Code:

 <?xml version="1.0" encoding="iso-8859-1"?>

If this is present, remove it, and be sure to declare a character encoding using the META element instead, if the editor has not already done so. If you hand-code your pages, make sure the META element is in your page.

**Eric_NewsMan** · Sep 14, 2006 12:07

Thanks for the answers guys, but I think I didnot explain my problem very well:
this is my code:

HTML Code:

<!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><title>xxxxxxxxxxx</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
...
<link href='style.css' rel='stylesheet' type='text/css' />

Well, everything works just fine if I DO NOT use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" , but if I do use it, I mean, if I start the page as it is up here, the CSS does not work anymore, well it works but not as it should, at least in Firefox. IE 6 it works as it has to.

**drhowarddrfine** · Sep 14, 2006 17:30

We understand your problem. With no doctype, you designed in 'quirks mode', meaning your code is being interpreted like (I forgot which) HTML 2.0? It also switches into the broken box model that Internet Explorer is famous for and now called 'quirks'. But Firefox and all other browsers do not make IEs mistake with the box model. When you properly inserted the doctype, IE switches to 'standards mode' (poorly at that) while all the other browsers already had the proper box model.

In other words, like I said earlier, you changed the rules when you added the doctype. This is why we never design using IE and why you must establish which rules you are going to follow at the very beginning before one line of code is entered. While your page may be looking fine in IE, it is because you designed using IE which is like designing to a bug.

**Dan Schulz** · Sep 14, 2006 18:53

drhowarddrfine, it's designing to a plague, not a bug

**Eric_NewsMan** · Sep 15, 2006 02:16

Ok ...

That means I'm gonna have to remake the whole thing, right???
Anyways...
Thanks a lot for the help! - This time I'm gonna try to start off on the right side of the road...
Eric.

**Dan Schulz** · Sep 15, 2006 02:33

Yeah, you're going to have to, I'm afraid. Fortunately it's not that hard. Before you even think about the content, sketch out on a piece of paper (even a napkin will do) or in a program how you want the site to roughly look. Most sites have a header, menu, content area, sidebar (or two - sometimes the menu can occupy one of the sidebars, othertimes it can appear directly below the header) and a footer.

Once you have that done, create an HTML wireframe using either a Transitional or Strict DOCTYPE. Use whichever is more comfortable for you. Don't even worry about the CSS at this point. If you can see groups of elements that are going to be related to each other, put them in the same container so you can position them later. You can see a perfect example of what I mean in this thread:

http://www.sitepoint.com/forums/showthread.php?t=404393

Look at the attachment in the first post, then look at my post (three replies down).

Also don't forget to validate your HTML after each step. Making sure you have valid (X)HTML is essential, since CSS is predicated on valid (X)HTML.

Once you have a completed layout, start working on the CSS. Begin by laying out your page elements (avoid positioning at all costs if possible - floats will serve you in better stead here). After each addition or change, save your stylesheet and validate it. If there are any errors, fix them, and then save and revalidate until the stylesheet is valid. Be sure to check your rendered page in a standards-compliant browser like FireFox or Opera first, then check against Internet Explorer for any problems. Usuallly, if there is a problem, a minor change to the stylesheet will fix it, without ruining the rendering of the page in the other browsers. However, there are times when a hack will be necessary. Of these, the Star HTML hack ( * html ) is the safest, since IE7 will ignore it. However, I prefer to use conditional comments, so your mileage may vary.

If you need any help at any stage during your redesign, let me know and I'll be more than happy to help you. My PM box is always open.

**gnarly** · Sep 15, 2006 03:55

Originally Posted by Eric_NewsMan

Ok ...

That means I'm gonna have to remake the whole thing, right???

No! All you need to do is adjust your quirks-compatible CSS to work correctly in "standards" mode.

User Tag List

Thread: CSS and XHTML problems

Thread Tools

Display

CSS and XHTML problems

Bookmarks

Bookmarks

Posting Permissions