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> 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.