Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
|
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old October 10th, 2008, 01:10 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 428
Thanks: 57
Thanked 2 Times in 2 Posts
Default HTML 4.0 vs. XHTML 1.0 and font sizes

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.
 
Old October 10th, 2008, 02:07 PM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
 
Old October 10th, 2008, 02:49 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 428
Thanks: 57
Thanked 2 Times in 2 Posts
Default

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?
 
Old October 10th, 2008, 03:24 PM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
 
Old October 14th, 2008, 07:05 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 428
Thanks: 57
Thanked 2 Times in 2 Posts
Default

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





Similar Threads
Thread Thread Starter Forum Replies Last Post
font sizes in multiselect list mat41 CSS Cascading Style Sheets 2 June 3rd, 2007 06:30 PM
w3 HTML (XHTML) validation crmpicco HTML Code Clinic 6 June 7th, 2006 07:33 AM
Sending XHTML as text/html Considered Harmful skillmanp BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 3 August 3rd, 2005 12:37 PM
How a user can change font styles and sizes xristina Javascript 2 October 15th, 2004 06:01 AM
New HTML, XHTML, and CSS book jminatel HTML Code Clinic 0 July 30th, 2004 04:41 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.