CSS Bug of the Day
A notebook entry published on November 5, 2004
You know those desk calendars where you tear off a page for each day of the year? Typically, each day comes with a little nugget of useless info to start your day. Someone should create one based on CSS bugs, where each day talks about a different bug and its workaround. Perhaps even more nerdy than the “365 Days of Dragons, Merlins and Magical Stones” that I’ve been meaning to covertly purchase.
Until then, perhaps I’ll start posting reminders here as I rediscover old favorites. While there are some bugs that we run into every day, immediately knowing their remedies, there are others that pop up here and there, only to be looked up again and again to be reminded of their workarounds. It never hurts to publicize these suckers now and again.
Today’s bug is the IE Doubled Float-Margin Bug: When floating a block-level element and adding a margin on the same side as the float direction, IE/Win can double the margin width that is specified. Luckily, there is a simple workaround offered (at Position is Everything, of course).
Are there enough CSS bugs to fill a 365-day calendar? Probably.
Turnip → turnipspatch.com
OK, here’s the deal: you make the calendar, and I’ll buy it ;).
Or you could just blog them all…
Adrian Kostrubiak → www.ako-k.com/
Hell I’d buy a calendar like that. Sounds like a good idea to me. But then again, it could be a total flop, just based on the fact that it sounds like a good idea to me.
My 2cents..
Ryan
Thank you, THANK YOU for posting this. The double float margin bug has been driving me psycho the last couple of weeks, I’m free, freeeeeee!
MattH
Hmmm… Here’s a try.
Amit Karmakar → www.karmakars.com
Thats an excellent idea Dan, go for it. Most would download a copy surely. Paid members get the work arounds :) unpaid ones only know about the bug? :) no scratch that, the world needs to knowthe truth about IE!
Elliott Back → elliottback.com/blog/
Are there really THAT many? I can only think of say, a dozen, offhand…
Jeff → nokrev.com
In response to comment four. Why August?
And I’d buy the calander, sounds like a great idea! Or better yet, simply blog them all. I’d read them all here too :D
bish → www.lechoso.com/
This is such a great idea! I’ve got a space on my desk just waiting for the 2005 CSS Workaround Calendar.
kazu
Can I purchase the calendar? I’m living in Japan, so international shipping is necessary. :-)
Anne → annevankesteren.nl/
Shouldn’t the title read: “IE Bug of the Day”?
Anyway, a few days ago I had a similar problem; not with floats and it only happened in 5.5 but the solution was ‘display:inline’ as well to not make the content shift to the left more than desired. IE is really weird.
Stephen → herdbehavior.com/
That’s a nice little workaround; it’s even simpler than using !important. I agree with Anne though, it really should be “IE Bug of the Day,” as IE’s the problem.
Pascal → pensa.info/blog/
Thanks for the “bug report”. I always wondered why IE/Win is doing such things, but never got around asking for advice… thought it was a common place among standards complaint web designers and i did not want to out me as a “n00b”… ;)
that said, i am pretty sure that one could fill a complete calender with (ie) css bugs.
Ludvig
I don’t think there are 365 css bugs, but what about a calendar with on bug a week? Then only 52 is needed (53 some years, but that’s almost irrelevant). Either the bugs are presented on specific weekdays, or the calender only has one page per week.
Dan Cederholm → www.simplebits.com
Anne said: “Shouldn’t the title read: ‘IE Bug of the Day’?”
A good point. Titling it “CSS Bugs” makes it seem as though CSS is the one that’s buggy, which of course is not the case.
Plus, if we tartget it to IE, we could somehow incorporate Clippy into each calendar page: “I see you’re picking up a hammer, ready to smash your PC! Do you need help solving an IE-only CSS issue?”
nb → www.nickblume.de
Yes, it´s a wonderful CSS Calendar. Cool.
Joerg Petermann → www.einfach-persoenlich.de/
Every day a little help from a friend. An excellent idea, Dan. I will read it with great interest. :)
Brent
I think there enough bugs for IE to have its own calendar. ;)
2005 CSS Workaround Calenda (IE edition)
Also, maybe have every Thursday can be IE/Mac bug day. Although Im sure there are more than 52 mac bugs. ;)
John Handelaar → handelaar.org
Amen, Brent.
Honestly, I find IE/Mac the worst one of all usually, and certainly it’s the only one which routinely requires me to *actually provide a different layout*. [Columns within columns, anyone?]
Jason Beaird → www.jasongraphix.com
If there are 365 Tiny-Paper Air planes, then there has to be 365 CSS IE bugs.
David Schontzler → www.stilleye.com
Speaking of CSS bugs… anyone remember where the Safari no-repeat/fixed BG solution is? Safari happens to be touchy when it comes to the order of values listed for the background property.
moltar → www.hunox.ca
You could create an online database and display one workaround as a daily quote on the main page.
Morgan Roderick → roderick.dk
I knew there was a simple fix for this one … I struggled with it a couple of weeks ago, and ended up giving up on using margin-left og left floated elements in IE.
Thanks for the write-up :)
Perhaps there should be a “how-to fix IE bugs” section on the CSS Discuss Wiki??
[Burak.UGURLU] → www.vikingler.com
I think there enough bugs for IE to have its own calendar. ;)
vikingler.com
Steve
Thanks! I’ve been using padding instead of margin. Now I can start using margin again!
Vinnie Garcia → blog.vinniegarcia.com/
Within IE alone (versions 5, 6, and Mac 5.x) I’m sure you could fill a few years. Add all other browsers in and you could probably fill a decade’s worth of entries :)
Jeramey Jannene → www.bobtheking.com
That’s a brilliant idea. You should shop around and see if you can’t actually make it perhaps with a few other people. I would buy it.
Ethan → sidesh0w.com/
A great idea, Dan—but let’s not change the subject here, people:
“Perhaps even more nerdy than the ‘365 Days of Dragons, Merlins and Magical Stones’ that I’ve been meaning to covertly purchase.”
Well, when you go, don’t forget to pick up the matching +4 Desk Blotter of “That Guy”-ness. :)
Peter Usewicz → layer22.com
I just don’t get it. The differences between IE and Firefox in rendering CSS/HTML are so… you know what I mean. There should be someone to take care of that.
Tanny O'Haley → tanny,ica.com
How a Web Standards and CSS tips calendar? Interspersed within the days can be bug fixes, layout advice, hacks, proper html…
I think it’s a great idea.
Andy Stones
I think it’s a brilliant idea! Might end up being a little frustrating though…
What happens if, say in February you come across a IE/CSS bug which you recognise as being in January’s Tips!!
I’d be inclined not to tear-off the days at all… What about a flip calendar? Or better still… A reference book that go’s with it!
R. Marie Cox → www.artypapers.com
I had set up a site with similar intentions of tracking browser bugs, tips, etc. It’s open to the public to contribute to, but it never really got the community involvement required to make it a success. You could probably draw a large enough crowd to compile and produce a rather helpful list of bugs — just don’t forget to make it searchable!
Addison Hall → addisonhall.com
I’m glad you posted this—I struggled with this problem over the weekend on my site. I ended up adding another DIV to contain my floated columns and padded it to get what I wanted. I can change it back now!
BTW, love your book, Dan.
Bob Noss
Great post. I ran into this one a while ago and it drove me crazy. If you’re not familiar with a specific bug, it can be really frustrating trying to find the solution. Re-publishing them from time keeps everyone’s awareness up, and there will always be new people running into them.
Dave P → run4yourlives.com
Funny I was tearing my hair out over this very bug over the weekend…Damn you for posting a day or two late! :-)
I have so many words for IE at this point, all of which would ensure this comment get deleted tout suite.
Keller
I experiened this as well this weekend.
Does display:inline have any side effects or should this work on pretty much any layout that has floats? Looks fine on my client site but I just wanted to make sure.
Dustin → www.polvero.com
yea, I agree with the folks that say it’s not a css bug, but rather a browser that interpreted the css wrongly.
Anyway, speaking of floats, did anyone see the tutorial on floating blocks fNe style?
Besides that, I thought it was assumed everyone knew that IE generally doubles margins when they aren’t specified or…something like that.
Btw, it would be kind of neater to see 365 css tips rather than 365 bugs.
Rene Grassegger → www.grassegger.at
Hi Folks,
maybe an excuse calender like the one of the BOFH, would be nice.
Every day you know why your browser crashes or not displays it correctly. :-)
Also maybe the moonphase should count also :-D
kemie → www.disenorama.com
THANK YOU!
I’ve encountered this bug a couple of times lately and could not figure out what was wrong. Another vote for the calendar!
:D
macgirl
Thankyou so much for that, Ive only been part of the world of css for a month now and already I have developed a strong loathing of IE *shudder* but with articles like this, the world just seems like a happier place :)
Put me down for a whole shipment of calenders, Ill distribute them around New Zealand!
ren → technasia.org/
Oh you saved my life!
I’ve encountered this bug right now and found your entry. It’s a miracle. Thx lots!
Ryan
off topic slightly - well totally actually - what happened to the ‘classic’ simplebits skin, it was my fav.
diggin the new background squares though.
Gary LaPointe → garylapointe.com/mypointe/
I really thought this was going to fix my weird IE column problem. But whenever I start messing with it (and get them a-okay), my images (only on IE for Win) start disappearing.
It’s now hours later and I’m giving up (again)…
luxuryluke → www.butterlabel.com
I’d like to buy a calendar as well. put me on the pre-sale list. do all purchasers of your book get in the will call list for these calendars as well?
should we just give you the second word at the top of page 40 in your book as a clue? (not telling)
Comments have been closed for this entry.
Bulletproof Web Design Second Edition New Riders
Web Standards Solutions The Markup and Style Handbook Friends of Ed
A tiny design studio founded by Dan Cederholm. We create simple interfaces balanced with a standards-based methodology, and we’re based in Massachusetts, USA.
Add your own
43 Comments