The context: You’re designing a multi-column layout with CSS using
float. The frustration: There is a mysterious, tiny gap between columns or content when viewed in Internet Expolorer for Windows, versions 5 and 6. You try everything. Nothing works.
Upon further investigation, you find that the mysterious number of pixels added is exactly “3″. There is hope.
If you hadn’t already found it, Holly Bergevin and Big John not only document this bug (thank you, thank you), but also offer a workaround. (One that I’ve had mixed results with. Sometimes works like a charm–other times, when more complex styles are added, the gap still remains an issue. But just knowing of the problem can at least offer some solace.)
Over the past year or so, I’ve run into this problem numerous times, luckily stumbling onto the aforementioned writeup at just the right time. For those first trying to discover what’s causing it–it can be nightmarish and impossible to try and solve. So, spreading the word on this bug can only be beneficial.
If you’re struggling with tiny gaps or seemingly inconsistent width and spacing issues in IE/Win only–be sure to read about this one. Even if the problem turns out to be something else, the 3px gap could easily be the culprit in the future.
Archive for July, 2004
The context: You’re designing a multi-column layout with CSS using
I suppose this is supposed to make sense, it being MSN, and I being on a Mac–but sheesh…
Since the release of Web Standards Solutions, positive feedback has been received–some in the form of online reviews that I’ve been collecting.
Related to the book, just today friends of ED has published an interview where I not only talk about the book–but more important topics like the relationship between typefaces and seminal bands, robots, monkeys and more.
<tooting type="one's horn">And to top it off, I’ve just learned last week that a second printing of Web Standards Solutions is already in the works.
I feel fortunate, humbled, and unexpectedly amazed by the success of the book thus far, as well as thankful for the kind words from those that have read and enjoyed it.
Maybe it’s the impending presidential election. Maybe it’s the convention that’s in town. There are numerous things that are reminding me of the power in numbers.
Lance Armstrong and Nike’s Wear Yellow campaign is a nice example: pay $1, get a yellow bracelet in return and help raise $5 million for those living with cancer. Brilliant. $1 is a tiny amount to pay for anything, and you even get a little something to wear.
Another example that comes to mind is John Gruber’s membership drive for his site, Daring Fireball: pay $30, get a cool t-shirt (I can confirm they are cool, as mine arrived yesterday) and help John to keep delivering great content. Pay a little, get something cool in return, help a good cause or fund something you enjoy.
These models work because of the power in numbers. Much like my somewhat unrealistic idea for generating power through exercise machines or a hand-crank that’s installed in every home worldwide (crazy, yes).
This is merely a fleeting observation, and one that doesn’t have a real purpose, other than to point out a cliché phrase: big things can happen, and are made easier, when people come together.
I’ll admit it. I’ve caught the bug. Le Tour de France bug that is. My wife has been into cycling for years, even competing in triathlons. And now, I’m finally addicted, soaking up all the details on Lance Armstrong’s bid to win 6 straight.
I don’t even have a bike. Well, I have a mountain bike–but I might as well be pedaling with cinder blocks dragging behind. And even the knobby-tired beast hasn’t seen the top of the basement stairs yet this year.
Next year. I’ll get a real bike. One with curvy handlebars and pedals that you can only use with special shoes. I’ll wear lycra from head to toe, and I’ll carry liquid protein in a pack that sits on my lower back while I power through miles of self-propelled movement. I went straight from BMX to Mountain, skipping the lighter, faster Road bike all these years.
Last year, and now this year, watching Lance in amazement–hearing the commentators refer to cyclists going on an “attack” (I love this… attacking on a bike!)–the strategy and preparation that’s involved to win a bicycle race is fascinating. And I’m beginning to realize that part of the fascination with the Tour (cool people call it this), is the time difference here in the states. Wondering whether you’ll catch a live stage, a wrap-up or just read about it online. The damn thing is so long. There is endless coverage, but yet it’s not always that easy to know exactly what’s happening or who’s winning right now.
Yes, next year I’ll get a real bike.
Update: Lance has won, and as suggested in the comments–next year is too far away. A road bike has been purchased. More on this to come.
Is there any harm in documenting a seemingly rudimentary and obvious CSS technique? I tend to think not, and so the following may (or may not) turn out to be enlightening for you, depending on the level of your CSS-ness.
A bulletproof unordered list of links, each with a unique (purely decorative) left-aligned icon that is referenced with CSS — but that is also clickable.
Often I’ll use a
background-image on unordered list items to create unique bullets. Applying the
background to the
<li> element usually gets the job done. But what if our list contains links, where we’d like the image to be clickable as well?
While working on the navigation for a project recently, I had the want/need to do something like this:
Nothing ground-breaking or cutting edge here (and certainly not meant to solicit ooohs and ahhhs from the gallery), yet when faced with a little challenge such as the design above, I do my best to make things as bulletproof as possible.
Humor me, while I elaborate.
Creating an icon set proved to be fun enough for me to want to do it again. Overcast is a new set of royalty-free stock web icons — this time I’m offering each icon (28 in all) in two standard sizes: 16×16 as well as 32×32. The whole set is just $65 (USD).
Like the previous set, Overcast comes in GIF format (transparent) only. Sticking to this one format and just two sizes allows me to keep the price down (additional formats and icons are of course available by way of custom work).
The sharp edges and greyscale palette intend to separate them from the Stockholm set, while also adding a little more flexibility by appearing in two sizes. Hope you like ‘em.
Comments welcomed for any questions regarding the icons, payment, etc.
Ben Hammersley has just built something brilliant. There’s been lots of talk lately about validation. It’s hard. Maintaining validation is harder.
To make things easier on yourself, check out Ben’s fantastic XHTML Validator to RSS widget. Append a URL to the script, and subscribe to it using your favorite newsreader. Woilla! An RSS feed for validation errors. Updated whenever you’d like of course. You don’t even need to think about checking for validation errors manually anymore.
This is instantly useful. Bravo, Ben.
I know you’re out there. I’ve even heard from some of you. And so, Ethan and I have decided to put together a little informal gathering July 13th at 7:00 PM at the Cassava Lounge on Boylston Street in Boston. Incidentally a place claiming to serve “tea with balls”. Not sure where to go with that one.
Regardless, there’ll be Wi-Fi available and we can chat about web standards, web design, and well… whatever we’d like really. It’ll be a nice chance to meet fellow Boston-area folks that are into the stuff that we all type about every day.
So we hope that you can make it — feel free to leave a comment here or over at Sidesh0w.com if you’re interested.