SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Australia
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Including DOCTYPE tags changes layout

    Hi All,
    I've completed my first site using HTML and CSS. As I've been developing I've been testing in both Mozilla, and IE - looks fine in both. Now I've published the site, and I've realised I don't have a DOCTYPE tag at the start of my pages. I've validated the html using w3c validators as valid strict XHTML, I've validated the css as valid css 2.0. But when I include the DOCTYPE tag (that the validator recommends) it changes the look of the pages. It seems to be changing the width of both the left-hand column div and the right-hand column div. I'm not sure what I've done wrong. Would appreciate any advice. Link to the site is http://www.diamondcuttercentre.org/
    tia,
    Ben

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Different DTDs have different effects on how some things are 'measured'.

    For example, if you have a 200 pixel DIV with its padding set to 3 pixels, with XHTML 1.1, the DIV would be 206 pixels wide in total (because the padding enlarges it), however with XHTML 1.0 (transitional, I think), the contents of the DIV are made to fit in a smaller space instead

    In order to fix this, you should use a different DTD or decrease the measurements of your elements in the CSS.

    Hope this helps!

    -Sam
    Sam Hastings

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Australia
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Sam, I will try that out.
    Ben

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem - if you get stuck, then post here again

    -Sam
    Sam Hastings

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Your first mistake was not putting the doctype in at the beginning before you started coding .

    In effect you have made your pages work in quirks mode and by testing as you went you made changes that would suit the mode you were in.

    IE5 has a broken box model and IE6 uses the broken box model in quirks mode. When you switch to standards mode by adding a full doctype then IE6 will work in standards mode and use the correct box model. Mozilla uses the correct box model at all times even in quirks mode.

    Devilware.net mentioned that some doctypes interprets width differently with different doctypes but this only refers to IE and the broken box model as mentioned above. Here is a good link about rendering different doctypes: http://www.ericmeyeroncss.com/bonus/render-mode.html

    In your css you have used the voice family hack to account for the broken box model in IE5 however you have adjusted it so that it only works in quirks mode because you have fed IE6 the same value after the voice family hack as you did before it. In fact there is no need in your code for the voice family hack because you feed mozilla and Opera the different width using the child selector hack.

    If you are feeding 160px width to IE5 (broken box model) and you have 10x padding and 1px border then IE6 and Mozilla need to receive 138px in order for both to match up.

    Here is the way these styles should be set when you are using a valid doctype.
    Code:
    #main-menu {
      position:absolute;
      width:160px;
      top:137px;
      left:20px;
      border:1px solid black;
      background-color:#ff9900;
      padding:10px;
      z-index:2;
      voice-family: "\"}\"";
      voice-family:inherit;
      width:138px;
      }
    body>#main-menu {width:138px;}
    
    #event-news {
      position:absolute;
      width:185px;
      top:137px;
      right:20px;
      border:1px solid black;
      background-color:#ff9900;
      padding:10px;
      z-index:2;
      voice-family: "\"}\"";
      voice-family:inherit;
      width:163px;
      }
    body>#event-news {width:163px;}
     
    #event-news h2 {
      font:bold 12px/14px verdana, arial, helvetica, sans-serif;
      margin:0px 0px 5px 0px;
      padding:0px;
      border-bottom: 1px solid #ffcc00;
      }
     
    #feature-img {
      position:absolute;
      width:168px;
      top:330px;
      right:15px;
      background-color:#ffcc66;
      padding:10px;
      z-index:2;
      visibility: hidden;
      voice-family: "\"}\"";
      voice-family:inherit;
      width:148px;
      }
    body>#feature-img {width:148px;}
    
    #main-menu li a {
      display: block;
      padding: 8px 5px 8px 0.5em;
      background-color: #FF9900;
      font-size:11px;
      font-weight:bold;
      color: #ffcc00;
      text-decoration: none;
      position:relative;
      }
    With the changes above you should be on your way to achieving a similar layout in IE and Mozilla. (There may be a few extra tweaks to be made as there are other differences between standards and quirks mode besides the box model hack.)

    Hope this helps.

    Paul

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Australia
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    That's great. Thanks for the advice. It'll be another 48 hours before I can get back to this - day job gets in the way :-( I'll post again once I've tried it out.

    thanks,
    Ben

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Australia
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How embarassing. 18 months has passed and I haven't got around to this. I'm going to be redesigning this site soon so will start with a valid doctype this time.
    cheers,
    Ben

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    18 months and I'm still here

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Australia
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    18 months and I'm still here
    Not just still here, but web designer of the year! Congratulations. Maybe you could advise me on my current problem? Browser Compatibility Problem


Bookmarks

Posting Permissions

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