HTML <!Doctype> tag and Mozilla

Posted on May 11, 2003 by Rick Ross

I am still in the process of refactoring the HTML for my website. Along this slow and narrow path, I’ve learned some interesting things with the way Mozilla treats the HTML <!Doctype> tag.

I discovered this when Nucleus inserted the following DOCTYPE tag at the top of the HTML file:

   <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
      “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

and I looked at my site with both Internet Explorer and Mozilla.

Internet Explorer rendered my site beautifully, while Mozilla did not. Puzzled, I compared this to my main index.html page which looks fine within Mozilla. The only differences were the DOCTYPE tag and a few XML attributes in the HTML tag. So I commented out the DOCTYPE tag, and Mozilla rendered my site as nice as Internet Explorer.

Now my curiousity got the best of me, so I did some research and discovered that Mozilla (and others) actually use the DOCTYPE tag to determine how to render the HTML page. In order to handle the non-standard use of HTML, the DOCTYPE tag directs the browser how to render the page.

For more information on this topic see this link.

Posted in Uncategorized | Leave a comment

HTML: <div> and <table> tags

Posted on May 9, 2003 by Rick Ross

Last night, I was busy working on refactoring my blog web pages, as I have inline styles and an external style sheet. My goal is to move all of the style information into the external style sheet.

The normal browser I use is Mozilla, avoiding Outlook at any cost. Mozilla (at least version 1.3.1 and higher) has a cool development tool named DOM Inspector, which is found in the Tools | Web Development menu. This tool is a hidden gem for seeing things like what styles apply to the individual tags and what section of the page the tags apply. I am sure there is more in this tool, but these two things alone helped me tremendously.

I was trying to figure out why some HTML code would not use the style that I was attempting to use. I had some code similar to the following:

   .aclass {
      font-size: 150%;
   }

   <table>
      <tbody>
         <tr>
            <div class=”aclass”>
               <td>
                  bigger text here
               </td>
            </div>
         </tr>
         <tr>
               <td>
                  normal text here
               </td>
         </tr>
      </tbody>
   </table>

When I looked at Mozilla’s DOM Inspector, I noticed that the <div> tags were moved outside of the table definition. Wierd. So I did some googling and came across this link, which points out that a <div> tag is not valid inside a <table> tag.

Eureka! That explained the behavior of the DOM Inspector as well. In my case the solution was to apply the style like this:

   .aclass {
      font-size: 150%;
   }

   <table>
      <thead class=”aclass”>
         <tr>
            <td>
               bigger text here
            </td>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>
               normal text here
            </td>
         </tr>
      </tbody>
   </table>

So the moral of this story is to keep your <div> tags out of your <table&#62 tags!

Update: The correct moral of the story is to be careful where you put <div> tags when nesting them inside of a table. A good friend recently pointed out that the problem wasn’t with the <div> tag, but rather, where the <div> was being nested. A <div> tag is valid inside of a <td> tag, but not a <tr> tag.

Posted in Uncategorized | Leave a comment