Archive

Archive for December, 2006

Now supporting Opera 9 and other Web Development (CSS) Related Notes

December 9th, 2006

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:

Author: Adam Kahtava Categories: CSS, DOM, Firebug, Firefox, Opera Tags: