Forum Moderators: open
<!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
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
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?
<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.
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
into my css file for BODY the problem goes away.
Thanks
Mike
*{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.
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.)
Quirks Mode vs. Standards Mode - overview [webmasterworld.com]
<!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.
html {overflow-x:hidden}
body {overflow-x:inherit}
