Modern web browsers have CSS bugs too

Internet Explorer is known to have a lot of frustrating bugs in its CSS implementation. But it’s not the only web browser that has CSS bugs. Andy Budd is collecting bugs in Common CSS Bugs in Safari, Firefox and Opera, so head on over there and add to the collection.

After thinking about this for a few minutes, I’m actually a little surprised that I’ve encountered so few serious CSS bugs in modern browsers. Gecko browsers have some rounding errors (though that seems to have been improved with the release of Firefox 1.5), and Safari and Opera treat the margins of tables that have a caption in a different way than Gecko does. Safari has a couple of problems with background images. There are some others, but I can’t remember dealing with any CSS bugs as serious as many of those in Internet Explorer.

Posted on November 30, 2005 in CSS, Quicklinks

Comments

  1. <humor> covers ears and shouts Don’t say it, don’t say it…it’s not true it’s not true… </humor>

    Ok, you have a point ;) One thing to definitely take note on is what versions of Firefox your users are browsing with. I’ve noticed quite a few significant bugs just between Firefox 1.0 and 1.5… how do you make a patch for that?

  2. If you set an element with overflow:scroll in earlier versions of Fx, the scrollbar didnĀ“t scroll at all when using the mouse: You had to click on the bar and drag it up and down. This is now fixed. I think this only occured on Windows though.

  3. Reading those comments on andy’s site…

    Some are inventing bugs when browsers adhere to standard. Probably because they don’t like or expect the results. However, one should think they had enough real bugs to pick from - a few thousands major and minor ones in each of the good browsers. That’s not bad when comparing to bug-numbers for IE6 of course :-)

  4. Have a play with fieldsets in Opera. Try and float them. Try and mix floated and unfloated ones. Go quietly insane…

    Oh, and Dustin, I was making that very point just this afternoon on my blog, and saying how useful the Google Analytics output was for finding that sort of detail out!

  5. December 1, 2005 by Tommy Olsson

    Just a warning to anyone who thinks about posting comments on that site: he will create a mailto link with you email address, so spambots will have a field day. :(

    And the email address is required, so use a fake one if you don’t want more spam.

    (Really bad style, if you ask me.)

  6. December 1, 2005 by Roger Johansson (Author comment)

    Sverre: Scrollwheel scrolling in overflowed elements were problematic in early versions of both Gecko and Safari.

    Matthew: I’m currently working on a site where I mix floated and unfloated fieldsets, and I haven’t noticed any problems in Opera (or any other browser). Got any more details?

  7. December 1, 2005 by Christian

    The most annoying thing is not the bugs (in my opinion), it’s the way the standard is constructed sometimes. For example, I really can’t find a logical reason why a child div can be bigger than the parent. Think of the box model … you should not be able to put a bigger box in a smaller.

    But there are maybe a good reason for this that I havn’t learned/understood yet :)

  8. Roger: Not an ideal examples, as I’ve since added more parts to the form, and fixed the problem, but Firefox unfixed fieldsets shows how Firefox copes with the floated fieldsets (in this case, Account Details, Company Details and Registered Address are floated left), even if they now end up going off the screen.

    Opera unfixed fieldsetsshows how Opera renders the same code - it is unusable without turning off styles.

    Firefox fixed fieldsets is how the page should (and, now, does) look in all browsers (well, apart from the button container getting shifter right a few pixels in IE6).

  9. December 1, 2005 by zcorpan

    While Mozilla implemented the table box model described in CSS2, IE implemented their own table box model that was different from CSS2. Opera and Safari implemented what IE does instead of what the spec says, so now the table box model is changed in CSS2.1 to match what IE, Opera and Safari do.

  10. December 1, 2005 by gerben

    Clearing with an empty div doesn’t (always) work in Firefox. Assigning padding-top: .01em; fixes this.

  11. Any piece of software as complex as a web browser is bound to have bugs, especially given the sometimes vague specification that they’re written to. It’s wearing to see the more rabid advocates of (insert browser name here) claim that their favorite is bug-free, and that all the others should fall into line.

    That said, it’s impressive how well most modern browsers perform. The only bug that’s bitten me recently is FF’s habit of quietly increasing line-height when you set font-weight to bold (unless you explicitly declare a line-height too). I’ve not yet looked to see if they’ve fixed that in 1.5.

  12. December 2, 2005 by Roger Johansson (Author comment)

    Christian: Floated elements need to be able to extend outside their parent element to allow for things like floating an image to one side of a column and have several paragraphs of text flow around the image.

    Matthew: I must have been lucky then, because I haven’t encountered any problems like those in your screenshots. :-)

    Chris: I’ve noticed that Gecko browsers tend to interpret line-height differently depending on how it is specified: em, %, or a numeric with no unit.

  13. Maratz.com has “Remove annoying rectangle in the latest Firefox build” which is an interesting effect.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.