Archive for June, 2006
List Authors Widget 1.0
Jun 21st
Display a list of authors in your WordPress Sidebar Widgets linking to the authors.php page.
(6 votes, average: 4.33 out of 5)
Loading ...Removing the Dotted Outline from Focused Links
Jun 16th
Have you ever noticed the dotted outline that appears around links as you click on them? That is an accessibility feature for people who can’t use the mouse for whatever reason. It is supposed to show where the current focus is when you use the TAB key to move through a document, and does a fantastic job.
But why does it appear when you are using the mouse to click on a link?
(No Ratings Yet) Loading ...Rate-in-Place 1.0
Jun 6th
Now you can not only display a rating for each one of the Links in your Blogroll, but you can update the rating right from the front page (logged-in with editing privledges, of course) with AJAX!
(7 votes, average: 3.71 out of 5) Loading ...Achilles’ Heel of Tabless CSS Design
Jun 1st
By now most people have noticed the Achilles’ Heel of tabless CSS design is currently the inability to align footers to the bottom of the window. (eg. always at the very bottom until content actually overflows)
Currently you can only achieve this effect in all browsers with *gasp* tables—but it’s different now in XHTML 1.0 Strict than it was in HTML 4.01 Traditional.
For some CSS purists, that fact is an acrid pill to swallow. I tend to agree with Eric Meyer though—don’t try to map table design mental models onto CSS—it’s a recipe for heartache; practicality over purism.
In my case–designing a WordPress template–I used the THEAD, TBODY, and TFOOT tags to distinguish between the blog’s template header, content, and footer. Like so:
<table cellspacing="0"><thead><tr><td>
<h1><a><img /></a></h1>
</td></tr></thead>
<tbody><tr><td>
<div id="content"></div>
<div id="sidebar"></div>
</td></tr></tbody>
<tfoot><tr><td>
<p>Powered by WordPress.</p>
</td></tr></tfoot>
</table>
Then I used CSS to get the table to fill the full height of the window. Like so:
html, body, table, thead, tbody, tfoot, tr, td, h1, img {
margin:0;padding:0;border:0
}
html, body, table { width:100%;height:100% }
thead td, tfoot td { height:1px }
td { vertical-align:top }
Remember: This solution is Section 508 Accessible, Well-Formed, and Valid XHTML 1.0 Strict markup.
Not too bad once you understand it.
(No Ratings Yet) Loading ...