Fbloggs Geekdom

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

Tags: CSS, FireFox, JavaScript, jQuery, Web Development

Summary: Quirks of checkbox markup in HTML – differences between IE and FireFox…

Tags: Browser differences, HTML, JavaScript, Web Development

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.

Tags: CSS, HTML, Web Development