Just thought I would mention how handy Firefox’s built in Error Console feature is for debugging – I mostly use this for Javascript, in fact I can;t even remember using it for anything else.

But in any case if you run into the same problems I do with Javascript this is a handy tool for catching the issue at ahnd.

To bring up your Error Console just choose Tools > Error Console from the Firefox top menu.

Then go to the page where you suspect your problem and the console will give you clues.

I have also installed Firebug add-on which looks to have a load of potential for more detailed debugging, but I haven’t really spent enough time on it yet to tell you my thoughts. I will eventually.

In an earlier post I described how to use conditional comment codes to call a different stylesheet for each browser like so:

<link href=”style.css” rel=”stylesheet” type=”text/css” />
<![if !IE]>
<link href=”not-ie.css” rel=”stylesheet” type=”text/css” />
<![endif]>

At the end of the post I mentioned that you can use these comments to hide other content from each browser. I received some questions on this so I thought I better explain further.

To hide content from IE or a certain version of Internet Explorer is simple just use the appropriate comment codes anywhere on the page with the content between them like so:

The above examples will hide the content from IE or the IE version you specified in teh codes – HOWEVER it will only work that way in IE, because conditional comment codes are not read by Firefox.

So to hide content from Firefox you need to use your Firefox only stylesheet you declared in the header of your file. Whatever it is you want to hide in Firefox just wrap in a <div> with a class or id that in your Firefox stylesheet you add the css property of display: none.

So here is an example:

<div id=”hidemefromfirefox”>
CONTENT TO HIDE FROM FIREFOX
</div>

Then in your Firefox only stylesheet you declare:

#hidemefromfirefox {
display:none;
}