Homer CSS

Homer Simpson in CSS

Cursor sometimes fails to appear in input text fields

link: Bug 167801

This bug won’t be fixed until Firefox 3. The fixed range from awful to horrible, involving both CSS and JavaScript. I am rather annoyed.

I think what’s throwing me off is that I’m used to IE bugs. I expect them. And so many of them are related to having layout, I know where to start.

Text Figures

link: Use titling figures with full caps, and text figures in all other circumstances, from The Elements of Typographic Style Applied to the Web.

Explored this myself 4 years ago in Typography Time. Back then I was going so far as to wrap all inline numbers in spans of class textfigure. Looks like the future of web typography is getting better, if only microsoft can build an operating system to go with those new fonts that people actually want to use.

Pulp Bard

link: Pulp Bard Wiki

It started over on ceruleanst’s livejournal. Now I might have to watch pulp fiction again just to read this. I wonder if we own it?

Dungeon

My copy of Dungeon that I picked up on eBay just arrived. I’ll have to ask my brother to see if he remembers, but I think this was our first introduction to fantasy gaming, before we even started playing AD&D, and long before M:tG.

Table-less Columnar Form or Key

I just implemented the solution to my longest outstanding CSS challenge: how to create two columns of elements with a gutter between them, without any knowledge of the height of either element. Two common examples are a graph key, and a form with labels to the left of the fields.

Your HTML could look something like this:

<dl>
    <dt>*</dt>
    <dd>required</dd>
</dl>

or this:

<div class="columnarForm">
    <label>fieldname</label>
    <div class="inputBlock">
        <input type="text" />
    </div>
</div>

The trick is to float the two elements left against each other, but make sure that the first element is set to clear left. Here’s the CSS for the form:

.columnarForm label {
    clear: left;
    float: left;
    width: 140px;
    margin: 0 10px 10px 0;
    text-align: right;
}

.columnarForm .inputBlock {
    float: left;
    margin-bottom: 10px;
}

I first attempted this challenge back in 2002 during my first days of learning hard-core CSS at Baxter. Jon asked me about it again recently, maybe last summer.

I’d be happy to see some more browser testing, might even find the time to build a sample page to facilitate that. I’ve tried it in Firefox and Safari on Mac and PC, IE6 & IE7 on PC.

Common CSS Layout Challenges

I’m switching gears at work from JavaScript widgets to CSS layout, and let me just say that web browsers, they are humbling things. But I’ve been making an effort to make better use of outside resources during my development process, and it is really helping. Here are some of the challenges I’ve banged my head against in the past but solved more elegantly today with the help of our friend Google:

Layout combining fixed and flexible elements

Specifically, a flexible main content column with a fixed width sidebar, the main content coming first in the code. If it weren’t for the source code order problem the sidebar could just be floated right. If we were using the same units for both columns we could float them left against each other, or use opposing floats. The solution is to use negative margins, which behave differently on floating elements. Here’s a good tutorial: Creating Liquid Layouts with Negative Margins.

Parent element inherits the top margin of its first-child

So I’ve got this #content div with no margins. The first element inside it is an H1 with a 1em top margin. The div actually takes on the margin of the header, creating an unsightly gap. As I suspected this is some bastardized form of margin collapsing. The solution in code looks like this: #content { padding-top: 1px; margin-top: -1px; }, for an explanation we turn to Eric Meyer’s article on Uncollapsing Margins.

Clearing floats in IE7

EasyClearing, the most popular clearing method without structural markup, needs a minor update for IE7: EasyClearing, the Aslett/PIE way is NOT broken in IE7! There’s another method that’s brilliantly simple, applying overflow: auto; to the containing element, but in my experiments it had a nasty tendency to introduce scrollbars.