...

View Full Version : HTML and CSS is valid... but DTDs are ruining my life



shanstafari
05-09-2006, 11:57 PM
I'm working on a site right now, and everything is working perfectly, my HTML and CSS have been validated, it all looks great... until I add a DTD. I'm sure this is something that comes up a lot and you guys get tired of hearing, but I really have tried looking everywhere with no luck, so I have to ask. You can see the site without the DTD at http://www.missoularaptors.com/test/wbp/index.php, and the site WITH the DTD at http://www.missoularaptors.com/test/wbp/index-withdoctype.php. The problem should be pretty obvious. I'm guessing it has something to do with my CSS around lines 95-120, (#sidebar .yellowSide a {... ) but I can't figure it out. Any help is tremendously appreciated. Thanks!

Dan Williamson
05-10-2006, 12:05 AM
I have never seen that DTD before, try using this:


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

shanstafari
05-10-2006, 12:09 AM
Same effect :( I have tried a lot of different DTDs, so I can now only assume that the problem is in my code, even though it has been validated :confused:

VIPStephan
05-10-2006, 12:15 AM
I have never seen that DTD before [...]
Well, actually the doctype he's using is one of the most used on the internet... look around on the pages you visit and you'll see that everywhere.

However, you might be somewhat right with your proposal. I noticed that you are using XHTML syntax (the slash for self closing elements like <img />) in combination with an HTML doctype. This is not correct and might cause the issue. So either use the XHTML doctype that Dan Williamson proposed (better use a strict (http://www.w3schools.com/tags/tag_doctype.asp) doctype) - but then you have to have everything written in lower case (onmouseover instead of onMouseOver) or use a HTML doctype (I would recommend strict too) and remove the slashes on the elements without closing tag.

VIPStephan
05-10-2006, 12:31 AM
AAAAH MAN! It's soooo easy that you wanna cry! :D

CSS is case sensitive and you have #sidebar in your stylesheet and id="sideBar" in your HTML so no wonder it's not working. best thing is to write everything in lower case then there won't be any confusion. :)

By the way: Just because your HTML and CSS is valid according to the validator it doesn't necessarily mean that it's used correctly (regarding the semantics or the structure). For example you could have ten divs all positioned absolutely above one another and this would be valid HTML/CSS but the page would still be unusable/inaccessible because you can't see the content of the nine divs that are layered below the topmost (or click links or whatever)... see the problem?

Dan Williamson
05-10-2006, 12:34 AM
Well, actually the doctype he's using is one of the most used on the internet... look around on the pages you visit and you'll see that everywhere.

However, you might be somewhat right with your proposal. I noticed that you are using XHTML syntax (the slash for self closing elements like <img />) in combination with an HTML doctype. This is not correct and might cause the issue. So either use the XHTML doctype that Dan Williamson proposed (better use a strict (http://www.w3schools.com/tags/tag_doctype.asp) doctype) - but then you have to have everything written in lower case (onmouseover instead of onMouseOver) or use a HTML doctype (I would recommend strict too) and remove the slashes on the elements without closing tag.

I have only ever worked with strict DTD and perhaps Transitional a few times, thats probably why I haven't seen it.

Arbitrator
05-10-2006, 01:27 AM
I'd advise using an XHTML 1.0 Strict instead of XHTML 1.0 Transitional doctype since according to the below resource, the latter puts Firefox and Opera into Almost Standards Mode as opposed to Standards Mode.

Resource: http://hsivonen.iki.fi/doctype/

shanstafari
05-10-2006, 02:22 AM
Awesome, thanks a ton guys. Especially VIPStephan for noticing the problem (I hate overlooking things like that)... So, I have my DTD working, got everything validated, but now on the left side of the page there are white spaces between the picture of the tree, "how you can help", and the vertical menu. These spaces appear in Firefox but not IE. I'm sure this is an easy fix, too, but I'm still lost. Thanks again!

Edit: I'm aware of the differences in IE and Firefox interpretations of the box model, but I'm pretty sure I don't have anything in the CSS that makes that a problem.

Edit again: I fixed it! (had to display the images as block and remove margin + padding) Thanks again for the help guys.

Bill Posters
05-10-2006, 03:38 AM
Edit: I'm aware of the differences in IE and Firefox interpretations of the box model, but I'm pretty sure I don't have anything in the CSS that makes that a problem.
Fwiw, if you're triggering full standards-compliant mode with a full and correct DTD, then IE6 will interpret the box model correctly.
It's only when in quirks mode that IE6 reverts back to its previous, broken box model.
(It doesn't help IE5/Win though.)

Note: Placing anything before the DTD will cause IE6 to revert to quirks mode.

shanstafari
05-10-2006, 04:39 AM
Good to know, thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum