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.
- Previous post: No XHTML 1.0 Strict in ASP.NET 2.0
- Next post: Accessibility and usability for interactive television
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
<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?
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.
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 :-)
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!
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.)
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?
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 :)
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).
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.
Clearing with an empty div doesn't (always) work in Firefox. Assigning padding-top: .01em; fixes this.
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.
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.
Maratz.com has "Remove annoying rectangle in the latest Firefox build" which is an interesting effect.
Sorry, comments are closed for this post.