I noticed that a couple visitors were using the
Opera web browser, so I decided to check my site with this highly
W3C CSS compliant browser - see the
"Acid2 Test".
To my horror, I found my CSS wasn't working properly.
My blog in Opera (the CSS rendering issue):
I began debugging my site by starting up
Firefox with the
Firebug extension. Upon inspecting my
Document Object Model (DOM) and my rendered CSS I found a syntax error (a bug).
Using the Firebug extension for Firefox to view the DOM and related errors:
My error; I had erroneously entered
*/ instead of
/* for my CSS comment. After making the changes everything rendered as expected in Opera.
Conclusion; My site now works with Opera 9. As a rule of thumb, I generally do my CSS design in a more W3C CSS compliant browser like Firefox, Opera, etc... and then make the respective changes for proper display in IE.
Firebug is amazing, the best web development tool I have seen in a long time. Firebug really makes debugging a breeze.
Other useful Firefox extensions:
- Colorzilla - Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
- del.icio.us -
Keep, share and discover all your favorite things.
- FasterFox - Performance and network tweaks for Firefox.
- FireBug - Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
- Greasemonkey - Customize the way webpages look and function (hide search engine advertisements, tweak Gmail).
- Mouse Gestures - Allows you to execute common commands (like page forward/backward, close tab, new tab) by mouse gestures drawn over the current webpage, without reaching for the toolbar or the keyboard.
Other useful Internet Explorer extensions / toolbars: