CSS Bug of the Day

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.

figureToday’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.

43 Comments

  1. Turnip says:

    OK, here’s the deal: you make the calendar, and I’ll buy it ;).
    Or you could just blog them all…

  2. 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..

  3. Ryan says:

    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!

  4. MattH says:

    Hmmm… Here’s a try.

  5. 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!

  6. Elliott Back says:

    Are there really THAT many? I can only think of say, a dozen, offhand…

  7. Jeff says:

    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

  8. bish says:

    This is such a great idea! I’ve got a space on my desk just waiting for the 2005 CSS Workaround Calendar.

  9. kazu says:

    Can I purchase the calendar? I’m living in Japan, so international shipping is necessary. :-)

  10. Anne says:

    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.

  11. Stephen says:

    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.

  12. Pascal says:

    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.

  13. Ludvig says:

    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.

  14. 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?”

  15. nb says:

    Yes, it´s a wonderful CSS Calendar. Cool.

  16. Every day a little help from a friend. An excellent idea, Dan. I will read it with great interest. :)

  17. Brent says:

    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. ;)

  18. 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?]

  19. Jason Beaird says:

    If there are 365 Tiny-Paper Air planes, then there has to be 365 CSS IE bugs.

  20. 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.

  21. moltar says:

    You could create an online database and display one workaround as a daily quote on the main page.

  22. 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??
    http://css-discuss.incutio.com/

  23. I think there enough bugs for IE to have its own calendar. ;)
    vikingler.com

  24. Steve says:

    Thanks! I’ve been using padding instead of margin. Now I can start using margin again!

  25. 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 :)

  26. 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.

  27. Ethan says:

    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. :)

  28. 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.

  29. 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.

  30. Andy Stones says:

    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!

  31. R. Marie Cox says:

    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!

  32. Addison Hall says:

    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.

  33. Bob Noss says:

    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.

  34. Dave P says:

    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.

  35. Keller says:

    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.

  36. Dustin says:

    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.

  37. 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

  38. kemie says:

    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

  39. macgirl says:

    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!

  40. ren says:

    Oh you saved my life!
    I’ve encountered this bug right now and found your entry. It’s a miracle. Thx lots!

  41. Ryan says:

    off topic slightly – well totally actually – what happened to the ‘classic’ simplebits skin, it was my fav.
    diggin the new background squares though.

  42. 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)…

  43. luxuryluke says:

    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)