HTML 4.0 vs. XHTML 1.0 and font sizes

Ron Howerton · October 10th, 2008, 01:10 PM

I have been trying to implement a floating button on a page that has been in use for several years. The code works fine in XHTML 1.0 but not in HTML 4.0, where the button will not move with the user's page scrolls. I'm OK with changing the doctype reference to make the button move, but when I do, the size of all the text on the page DOUBLES in size. Font-size="100%" in XHTML 1.0 does not appear to be the same thing as Font-size="100%" in HTML 4.0.

Can somebody explain why this is happening, or at least provide a clue about what I need to do to use XHTML and retain the existing font sizes WITHOUT changing every font-size reference on the page or using CSS.

richard.york · October 10th, 2008, 02:07 PM

I can only imagine that you're using a quirksmode DOCTYPE for the HTML 4.0 version, and a standards mode DOCTYPE for the XHTML version. IE7 only implements fixed position content in standards mode (which each XHTML DOCTYPE invokes), all other browsers implement it in either rendering mode. For HTML, which rendering mode you get depends on the DOCTYPE you're using.

A link to the page would be helpful. I can't help you fix the problem without seeing the code.

And what is font-size="100%" ?? That is not valid HTML or CSS.

--
http://www.deadmarshes.com
Author, Various Wrox Books

Ron Howerton · October 10th, 2008, 02:49 PM

I humbly beg your pardon! It didn't occur to me that using pseudocode for a simple style attribute would prevent anybody from explaining why the DOCTYPE statement should cause identical code to be rendered differently. But to be absolutely precise, the style statement actually reads:

font-size:200%

Here's a stripped down version of the page which demonstrates the issue quite simply on my machine, at least:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang='en'>
    <head>
        <title>Test Report</title>
    </head>
    <body ms-positioning='FlowLayout' style='color:Black; font-family:Arial; font-size:200%; font-weight:normal; font-style:normal; text-decoration:normal; text-align:center; ; background-color:White' onLoad="placeIt()">
       <form method='post' name='frmReport' id='frmReport'" >
           <table style='width:100%' border='0' >
               <tr>
                   <td tabindex='0' style='width=100%; color:Black; font-family:Arial; font-size:200%; font-weight:normal; font-style:normal; text-decoration:normal; text-align:center; '>
Test2<br/>Detail Report
                   </td>
               </tr>
           </table>
</form>
    </body>
</html>

Replace the first line with this:

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

And suddenly the title is twice as large. Perhaps I'm being naive to expect consistency from HTML, but all other things being equal, I would normally expect the font-size to remain constant regardless of the doctype reference.

I have no idea what "quirksmode" is. I found an example of a feature I needed to use on another web site. It works fine with XHTML 1.0, but not with HTML 4.0, so I must use XHTML but as I have already said, XHTML is rendering the page in a larger font.

Hence my question: WTF?

Clearer now?

richard.york · October 10th, 2008, 03:24 PM

Well, ignoring the tone of your reply, which strikes me as a little snarky for someone looking for help. I can't read your mind, I need to see the code you're using to make an absolute determination about the problem you're having. Otherwise, I'm just speculating, and what's the point of that? Have no idea what "quirksmode" is? Try a search engine... I hear those help you learn about things you don't already know about.

That said; What you're running into is a DOCTYPE that invokes quirksmode, and a DOCTYPE that invokes standards mode. This is known as the DOCTYPE switch. The DOCTYPE switch was first introduced in IE6 so that Microsoft could make their browser more standards compliant, but at the same time avoid breaking legacy content that up to that point had been created based on fragmented, de facto, proprietary standards created as Microsoft and Netscape fought out the first browser war.

Understanding the DOCTYPE switch is a fundamental necessity for any content that strives to use CSS and markup to become more compliant with modern standards.... and also for any of the CSS support introduced in IE6 or later.

If you want to learn more about DOCTYPE switching, Google, or your search engine of choice can turn up loads of pages that explain the topic. I also explain that topic in greater detail in my Wrox Beginning CSS book.

That said, this DOCTYPE:

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

triggers quirksmode, which, in IE, causes content to be rendered with its defunct legacy rendering engine. This is just one of several DOCTYPEs that trigger quirksmode, the primary triggering factor being the exclusion of the dtd URL "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd. Having no DOCTYPE altogether also triggers quirksmode.

The other DOCTYPE triggers standards mode, which renders content as closely to the various W3C standards as possible, and will always give you standard rendering, even if that means breaking legacy content. One example would be the way IE6 and IE7 handles the rendering of some things incorrectly in standards mode, but IE8 fixes that incorrect rendering, improving its standards mode even if some content might break in IE6 and IE7s' standards mode. Standards mode in IE also means that some features that are available in standards mode, are not available in quirksmode. The IE team only implements new features for their standards rendering mode. Some examples are CSS fixed positioning in IE7, the white-space: nowrap declaration in IE6, and many others... those features only work in standards mode in IE. And there's a long list of other things that render differently between rendering modes. You can think of this like there being two browsers in one.

Here are a few URLs where you can find more information on this topic:
http://en.wikipedia.org/wiki/Quirks_mode
http://msdn.microsoft.com/en-us/library/bb250395.aspx
http://www.google.com/search?q=DOCTYPE+Switch

--
http://www.deadmarshes.com
Author, Various Wrox Books

Ron Howerton · October 14th, 2008, 07:05 AM

Had I been able to find one in Google I would not have turned here. Thanks for answering my question.