Welcome to WebmasterWorld Guest from 54.197.116.116

Forum Moderators: incrediBILL

Message Too Old, No Replies

W3C Doctype (DTD) Causes Browser Problems

   
2:45 pm on Oct 13, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



On nearly all my sites I have this tag at the top:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Just recently some of the sites have suddenly gotten too wide i.e. the scroller bar appears at the bottom to go across. I spent nearly 6 hours trying to find where the bloating had come from when by chance I found that if I reduced the tag to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

instead the scrolling bar disappeared and the site was normal width again. How did that happen!?!? How could that have caused all my sites to suddenly be wider?

Any help would be appreciated.

Thanks
Mike

2:55 pm on Oct 13, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



From another thread [webmasterworld.com]:


Option 1: HTML 4.01 Transitional (full version)

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

the above doctype is the best choice when:

You are building new pages and you are unsure what doctype to choose

You are using a tables-based layout or are placing images in tables

You want to use older (presentational) markup

You want to open links in new windows
the "full" version of the HTML 4.01 Transitional doctype is the best all-rounder - it triggers Standards Compliance Mode in modern browsers ("Almost Standards Mode" in Firefox), it contains all the necessary elements and attributes including deprecated (older) features. If at all unsure, choose this doctype!

Option 2: HTML 4.01 Transitional ("half" version)

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

This doctype is different from the "full" version above in that the URL for the DTD is missing. This means that the page will be rendered in Quirks Mode in modern browsers. Quirks Mode means that the browser handles the markup in a compatible way with older browsers such as IE5 or Netscape 4.

the "half" doctype is the best choice when:

You have an existing tables-based layout that you are trying to validate

Using a newer doctype breaks the page design, and you do not want to rewrite the page

Your tables-based layout needs to work in very old browsers (IE3/5, Netscape 3/4...)
You should never use the "half" doctype when using CSS for layout, as the browser will not handle the the layout according to the established specifications. This will cause a lot of cross-browser headaches. Using the wrong doctype is an extremely common reason why CSS-positioned layouts fail. the "half" doctype is good for converting older pages when you don't want to recreate the whole thing - but for new pages, it is best to use the "full" version or HTML 4.01 Strict.

If you have older pages but you don't want to clean them up or make them pass validation, then there is no advantage in adding any doctype at all. When a browser encounters a page without a doctype, it automatically selects Quirks Mode and handles the page like an older browser. So if you have legacy pages without a doctype, don't worry about it until you want to rework those pages - they will continue to function as before for the foreseeable future!

Marshall

3:34 pm on Oct 13, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



As there were no comments along with your post am I to assume that what you are saying is that there is something wrong with my page code?

I've just looked at the site in Firefox and the error (extra width/scrolling) is still there. I'm at a loss, I've been here all day and can't find anything wrong. Validates 100% with the w3c validation checker so how do I find what's wrong?

Is it possible to "ask" Internet Explorer what bug it has fixed on that page that Firefox doesn't seem to be fixing?

3:38 pm on Oct 13, 2007 (gmt 0)

WebmasterWorld Senior Member vincevincevince is a WebmasterWorld Top Contributor of All Time 10+ Year Member



It might not help you in this case, but what I do when I have similar problems is to add borders:

<style>
div {border:1px solid red!important}
table {border:1px solid blue!important}
img {border:1px solid green!important}
</style>

etc..

Then you see which boxes extend to the very far right when you scroll, and narrow it down from there.

3:49 pm on Oct 13, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That's a brilliant piece of code vince, thanks! But all it shows is every table in a nice neat order, exactly what I've been seeing all day. I can't find anything wrong with the coding of the page!
4:22 pm on Oct 13, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Okay, found it, for some reason Firefox is adding extra padding to my pages (no idea why) but if I put:

margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;

into my css file for BODY the problem goes away.

Thanks
Mike

5:19 pm on Oct 13, 2007 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



You'll most likely want to do the default method for this...

*{margin:0;padding:0;}

That way you can control margin and padding where you need to and not have to worry about how the browsers interpret those.

5:57 pm on Oct 13, 2007 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



To re-state what may be obvious, when you removed the URL from your doctype, you put your page into Quirks mode as opposed to Standards compliance mode. In FireFox, you can see the rendering mode any time by right-clicking on the background of the page and viewing properties.

The effect is that in Standards mode, some of your CSS features are working that will not apply in Quirks mode. This is why you saw the difference, and as you figured out, it was related to your CSS.

The most basic example, colors specified without # (ff0000) will not work in Standards mode - you need the pound sign (#ff0000.)

5:09 am on Oct 14, 2007 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



This thread from the forum Library may be useful:

Quirks Mode vs. Standards Mode - overview [webmasterworld.com]

11:27 am on Oct 16, 2007 (gmt 0)

5+ Year Member



The previous post explains why, but its best to stick with the full declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Not only is it much easier and better to be consistent, but it'll also save you time if/when you go to XHTML.

1:25 pm on Oct 16, 2007 (gmt 0)

5+ Year Member



also for future reference, you may want to grab the firefox plugin "firebug". I find it a great tool when something is off I can inspect the whole page live.
6:22 am on Oct 28, 2007 (gmt 0)

5+ Year Member



Just an afterthought: had a similar problem with the full "loose" DTD, with IE showing a horizontal scrollbar—maybe because I used a negative margin on the main <div>.


html {overflow-x:hidden}
body {overflow-x:inherit}

fixed it.