Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML and CSS is valid... but DTDs are ruining my life

    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/...ithdoctype.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!

  • #2
    New Coder
    Join Date
    Apr 2006
    Location
    Manchester, UK
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have never seen that DTD before, try using this:

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

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,785
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Quote Originally Posted by Dan Williamson
    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 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.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,785
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    AAAAH MAN! It's soooo easy that you wanna cry!

    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.

    Edit: 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?
    Last edited by VIPStephan; 05-09-2006 at 11:52 PM.

  • #6
    New Coder
    Join Date
    Apr 2006
    Location
    Manchester, UK
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan
    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 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.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,338
    Thanks
    29
    Thanked 282 Times in 276 Posts
    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/
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    New Coder
    Join Date
    May 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by shanstafari; 05-10-2006 at 01:35 AM.

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by shanstafari
    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.

  • #10
    New Coder
    Join Date
    May 2006
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good to know, thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •