Tables For Layout: Now Conforming

In case you’ve been lost in all of the SXSWi hullabaloo, or just neck deep in work like myself, it seems the W3C HTML Working Group has decided using role=presentation on a table element is now conforming. So it seems after 5 years of fighting this out in the trenches, per one rebuttal to the proposal:

Over the past decade or more, Web designers have been moving away from tables for layout. For a while, limitations in the market leading Web browser made this somewhat impractical for sites with complicated flexible layouts that had to be compatible with a broad range of user agents, but this is no longer the case, and new sites can avoid using tables without difficulty. Old sites won’t change, but old sites are not affected by changes to conformance criteria, since they already exist. Conformance criteria only affect actively developed sites, and those can move away from tables (and many avoid using tables at all).

The counter argument from the working group:

This assertion does not mention a specific example. By contrast the authors of the proposal to make

conforming cite gmail, facebook, yahoo mail, numerous IBM applications, and toolkits such as DOJO and YUI. As each of these are actively maintained, we find that there was insufficient evidence provided to back up this assertion.

So Facebook prevails (again)? God help us all.

Mzingi

updated: New versions available. See bottom of post for details.

Mzingi development will no longer done on Bloggingmeta, as it’s now included in Habari’s core theme directory. Any bugs, comments, or suggestions should be pointed to Trac

I have had the idea for a foundation type theme for Habari since I first started working with the platform earlier in the year. After spending time converting k2 to the design for this site, as well as for my cooking site, I knew that if I wanted to continue working on Habari theme design, I would need something else to work off of. No offense at all intended for the developers and users of k2, I have extreme respect for what it has achieved, I simply feel that it’s conversion to Habari was a difficult task, considering the advanced features in k2, vs being adapted to Habari at such an early stage. Andrew (aka freakrz), has done great work in advancing k2 to catch up to where the rest of Habari development is, however, I still felt I wanted my own framework to work off of.

screenshotThat said, I took the initial work I had done here on Blogging Meta, and started working on a purely CSS based theme, that could be used out of the box, as well as be flexible enough to be used as a framework. I still have a long way to go in the design world, but trying to use all of the reading I’ve done, I think the markup is fairly semantic, HTML strict, and though the CSS validator chokes on the YUI font CSS, it should be valid CSS as well. I quite like the simple percentage based font sizing of the YUI CSS, as well as the built in font family cascading. Again, still plenty to learn in this direction, and perhaps at some point I’ll drop it, but it’s a good building block (perhaps after getting some time to mature, as well allow me to spend some time with it, I’ll convert to the Blue Print CSS framework).
Continue reading “Mzingi”

UserStyles

A few months ago, I came across Jon Hicks’ Mac inspired Google Reader, but recently noticed the version I was using was outdated, and Google Reader wasn’t looking so hot. Off I went in search of an update, and subsequent posts on Jon’s site, found User Styles. Though the site could use some better search functionality, I really like it in the sense that you can easily add styles via the Stylish extension for Firefox. I’ve employed Stylish for BaseCamp, and have thought more about how it could be used, User Styles gives plenty to think about now.

Custom Style Sheets and Basecamp

I’ve mentioned that I primarily use BaseCamp these days with the company that I work with to manage the many sites they handle. That’s all good, but whenever I log in, I am overwhelmed with many, many, late milestones and upcoming milestones. Sure, some of it’s relevant to me, however most is not. Even what is relevant, I’m well aware of my tardiness. I don’t need a constant reminder 🙂

Enter a handy little Firefox extentsion, Stylish, that I became aware of after adopting Hicks Designs handy Mac OS styled Google Reader style sheet. (Note, there are instructions for using the style sheet with other browsers).

Another quick use of the Web Developer extension (I couldn’t live without this extension), I was able to determine the class of the milestones on the dashboard (.milestones – go figure), and add a quick display:none to a custom style for the company’s Basecamp dashboard.

The Stylish extension easily offers you the option of using the style for a URL, a domain, or a global style, so I can be sure that it’s only being used where and when I want. The extension author recommends using the !important declaration, however I found no need for that with Basecamp. Certainly worth checking out if you are looking to hide some annoying element of a site you often visit.

Edit: I went ahead and changed my style to only drop the upcoming milestones, and left the overdue ones there, as that seemed more relevant to my job. The class for that is .Dashcal. That way, I can still see what’s overdue, and potentially avoid issues. Upcoming milestones I’ll leave to the project manager to advise on.

Humbling Attention

As I’ve had this site for a while, I’ve become less and less of a stats whore, but at least a few times a month I check my referrer logs. The past month or so, I’ve been linked to by two separate design showcase sites. The first, Liquid Designs, showcases sites that use liquid width design. A lot of this site is based on that concept, and it’s something I’m learning more about. The second, and more recent is from Design Melt Down, part of their “Beautiful Blogs” section.
I did put a lot of time into this past springs CSSReboot for the site, and have tried to maintain the site despite the lapses in content. However I would have never expected ANY type of recognition for the work. So to the operators of the site, and those that have clicked over, thanks.

Image Links and Hover Background Colors

I did a google search for the solution to a problem I had with some CSS and image links, and didn’t find a good solution, so I’m throwing this out there for anyone who might stumble upon it.
The problem I was having was that I was creating a site with a black ground. There was a global setting for all a:hover links to have a background color and different font color, a common effect. However, any image links that I had were also getting a small box of the same color at the bottom when I moused over it, not at all good looking. I tried setting the selector a:hover img to a black backgroud, but the color still showed up. After closer inspection of my style sheet, I had set a global marign and padding on all images. When I set those to zero, the color didn’t show up. However, I didn’t want to sacrifice all images to not have to margin or padding, or force the end user to add a special class to images, so I tried setting the a:hover img margins and padding to zero. The problem there was that the image would “jerk” when moused over, as the margin and padding shifted. So I simply set a img to zero margins and padding, and my problem was solved. The only down fall is if someone wants to post an image in a blog post that’s a link, the text will butt right up against it. However, if that problem arises, I can then set a class for that image, and should be able to give the image room.
Anyway, like I said, I didn’t find a solution in the first few pages of google, not that this will make those pages neccessarily, but it’s worth throwing out there.

CSS Reboot Spring ’06

I cobbled this design out of something else I was working on, to break out of the constraints of using someone else’s work, but intend on something extrordinary for the site, especially the oft-not used entry page. So I signed up for the CSS Reboot as a means of having a tangible goal, as well as some pressure to knock one out of the park. So things won’t change much around here until May, but check back then for a whole new miklb.com.

Internet Explorer 7: Beta 2 Preview

Internet Explorer 7: Beta 2 PreviewI never thought I’d herald the release of an IE product, and after testing it I may not be so interested, but if you’ve ever sat up until 5am trying to hack IE bugs in a completely valid site while your client in California keeps saying, “In IE…”, then the prospects of some of those bugs being gone is well, worth the annoucement.
Annouced last July on the developer’s blog, these bugs are supposed to be addressed in beta 2.

  • Peekaboo bug
  • Guillotine bug
  • Duplicate Character bug
  • Border Chaos
  • No Scroll bug
  • 3 Pixel Text Jog
  • Magic Creeping Text bug
  • Bottom Margin bug on Hover
  • Losing the ability to highlight text under the top border
  • IE/Win Line-height bug
  • Double Float Margin Bug
  • Quirky Percentages in IE
  • Duplicate indent
  • Moving viewport scrollbar outside HTML borders
  • 1 px border style
  • Disappearing List-background
  • Fix width:auto

And I’ll say a bug I spent several hours hacking last night is fixed in beta2. Good sign (it was a lesser known a:hover background sticking bug, for those who care).

Like I said, maybe a little less cursing now.