Blog
LOL Cats Binge
Saturday, May 3, 2008
see more crazy cat pics
see more crazy cat pics
see more crazy cat pics
see more crazy cat pics
see more crazy cat pics
see more crazy cat pics
Cursor sometimes fails to appear in input text fields
Friday, April 25, 2008
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
Tuesday, April 22, 2008
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
Monday, April 21, 2008
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
Monday, April 14, 2008
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
Friday, April 4, 2008
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
Tuesday, April 1, 2008
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.
Wild Animal Park Early Risers Caravan Tour
Tuesday, March 25, 2008
link: Early Risers Tour photos
Last weekend for Cybil’s birthday we went on this awesome tour at the Wild Animal Park in San Diego and bought the photo set (we spend too much money there, since it goes back to the animals).
The tour we took is the best one the park offers (we’ve also taken the Cheetah Run, Medical Center, and Carnivores Tours). The Early Risers tour is the Photo Caravan, a talk with a bird keeper, behind the scenes with the Asian elephants, a private animal encounter, and brunch in the place where the original founder hit people up for money. All of that starts at 7:30am and is done before noon, so you miss the worst of the heat.
After the tour we went up to the Kupanda Falls Botanical Center, up above the Conifer Forest (map) and played Ra, which is this nifty bidding game that works surprisingly well with just 2 players. The top of the park is really nice. It’s a steep walk and there aren’t many animals (none if you go up as high as the Botanical Gardens), so there aren’t many people. We’re down at the park enough for tours that when we’re done we often just hang out and play board games.
I’ll fill in titles and descriptions of those photos eventually. In the meantime highlights are the cloned cow (with the short horns), the mean-ass cows with the nasty curved horns, and the funny anime/pokemon looking animal at the end is a Springhaas.