When doing anything CSS or XHTML related I always test in FireFox first and then “hack” for IE. I put all of my IE hacks in IE-specific style sheets that I call using IE conditional comments. This way I know that on the glorious day we no longer have to support IE6 I just delete the IE6 style sheet.
There are 4 FireFox plugins I use constantly, I can’t live without them.
1. The Web Developer Toolbar
I find this helpful in a number of ways. You can turn CSS, images and JavaScript on and off and you can view style sheets easily when “investigating” other sites. I often use the “Image Information” option under images to check out how people used images to do interesting things. I also use the “Resize” option if I need a site to work at multiple browser sizes.
2. FireBug
I use FireBug all day, every day. It allows you to “inspect” a web page. As you hover over an element it shows where the element is in the source code and what styles apply to that element. It even shows what styles used to apply to the element but have been over-written with the CSS cascade and which style sheet the styles are in. You can also hover over tags in the source code and it highlights them on the web page showing colour-coded margin and padding. When you have an element selected you can hot-edit the CSS right on the spot. This allows you to try a bunch of different stuff and see the results right away with no reload, then you can edit the actual style sheet when you’ve figured it out.
3. HTML Validator
HTML Validator sits there and tells you exactly how many errors and warnings there are on the web page you’re looking at. When you double click it opens the source code and highlights the errors and warnings and will even help you clean up the code. Sometimes I’ll be having a stupid layout problem only to look down and realize that I have a warning, I didn’t close a div or something. I’m so stupid.
4. ColorZilla
ColorZilla lets you select any colour on a web page and get the hex code for the colour. This helps when I need to make a quick change to a title and I have to make it the same colour as something else already on the page, I can just grab the hex code and change it in the style sheet. Easy.
Some good resources for CSS cross-browser bugs:
1. Position Is Everything
Position Is everything is a huge, ugly list of CSS bugs. Microsoft tried to fix them all in IE7 but didn’t do so well. All the bugs listed apply to IE6, it’s all here.
2. On Having Layout
The biggest problems you’ll come across in IE6 have to do with elements “having layout”. This article will tell you all about it.
wow, these all seem super useful. i think i’m going to add some of these things to enhance my browsing some more!!!