Category Archives: HTML

My Favorite FireFox Plugins for Web Development

  • Firebug – debug your applications. An absolute must. Best features:
    • Debugger – step through, over, etc.
    • Console log for monitoring AJAX interactions -shows parms sent, data returned, round-trip time.

  • Web Developer – fantastic CSS diagnostic support. Best features:
    • View generated source – important if your script modifies the original DOM of your page
    • Display Element Information – shows all the properties of an element in a convenient popup. To use, press Ctrl+Shift+F or select menu Information/Display Element Information
    • Edit CSS – lets you edit the CSS selectors in real-time, and shows you the results – almost as you type
  • MeasureIt. Lets you find the height and width of any element or area of the page, in pixels. Helps diagnose CSS issues, for example, when you use combinations of margin, width, padding and border attributes.
  • Codeburner from Sitepoint, one of my favorite online journals (www.sitepoint.com). Integrates with Firebug to provide comprehensive cross-reference information on HTML and CSS. Best feature:
    • Browser compatibility tables

Checked attribute of checkboxes- IE versus FireFox

In FireFox, <input type="checkbox" name="checkme" value="ok" "checked"> results in the checkbox being checked by default. In IE (version 7 – haven’t tried 8), it does not. This is one of the few times FireFox is more liberal than IE, and wrong. The correct code is: <input type="checkbox" name="checkme" value="ok" checked="checked">

See this W3C specification.

It’s a bit difficult to find the rule on this page, but if you scroll down to section 17.4 The INPUT element you’ll see this text for the checked attribute:

checked (checked) #IMPLIED — for radio buttons and check boxes —

Even then, it’s still confusing, because if you click the link for the ‘checked’ attribute, you’ll see it referred to as ‘this boolean attribute’. While it’s correct that it is a switch – either “checked” or nothing, it’s not a true boolean – either ‘true’ or ‘false’. Anyway, this one bit me because I wrote some markup with checkboxes and only tested the page in FireFox. In my test, all the checkboxes were checked, by default, which is what I wanted. The IE users got a different result altogether.

Update: Chrome also requires that you use the correct (strict) syntax.

CSS and Tables – Margins don't work on rows or cells (tr or td)

Tables do not conform to the normal CSS box model as W3C explains .

A consequence of this is that you cannot use the margin property for cells or rows. Citing the above page: “Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins. (my emphasis). So, something like this:

tr.spaceme { margin-top:15px; }

does nothing.

I wanted to have a table with a ‘heading’ row followed by details, another heading row, more details, etc. So the solution is to style an empty row using the padding and/or border properties. Suppose we want to have 15 pixels of white space between the top of the next heading row. Here’s some example markup:


CSS:

<style>
tr.gap {padding: 15px; }
</style>

HTML:

<table>
<tr class="gap"><td colspan="2">&nbsp;</td></tr>
<tr><td>Customer: 1</td><td>Name: Acme</td></tr>
<tr><td>Order: foo1</td><td> Item: bar1 </td></tr>
<tr><td>Order: foo2</td><td> Item: bar2 </td></tr>
<tr class="gap"><td colspan="2">&nbsp;</td></tr>
<tr><td>Customer: 1</td><td>Name: Bolts Inc.</td></tr>
<tr><td>Order: foo3</td><td> Item: bar3 </td></tr>
<tr><td>Order: foo4</td><td> Item: bar4 </td></tr>
</table>

I don’t really like this, because it requires an unnecessary table row for each heading. My example requires a colspan, too, as I suspect in most cases tables like these will have more than one column for the headings and/or details. Anyway, I’m posting this to remind myself of this quirk in the CSS box model, as I’m bound to forget it next time I have to render tables like this.