How do u debug Display/CSS issues in multiple browsers?

Question

say i need to develop a web site for multiple browsers. major ones - Firefox, Safari, IE, Opera, Chrome

how do u debug display issues? in FF theres Firebug which is great. theres a Firebug Lite for other browsers but thats not full featured - it does not refresh realtime. say i suspect some jquery (ie. adding classes etc) may be the cause, and it seems slow ...

Answer 1

IE8 includes great developper tools

Answer 2

You can validate CSS using W3C CSS Validation Service

About About the CSS Validator

Developer Tools

• IE Developers Tools
• Opera Dragonfly
• Safari Web Inspector

Answer 3

• Firefox has Firebug
• Opera has Dragonfly
• IE8 has developer tools
• Webkit browsers (Chrome/Safari) have web inspector

Aside from these, you may want to look up the outline property which adds a border to elements, but without disrupting the page flow. This is useful for side-by-side comparisons.

If you have some classes being applied with jQuery, simply use the outline property on them and it should appear when the class is added.

.class1 {
  outline: 1px solid blue;
}
.class2 {
  outline: 1px solid red;
}

Answer 4

For cross-browser debugging, you can use Firebug Lite. It's like Firebug itself, but as an external JavaScript library and tested in FF, Opera Safari and even the good ol' IE (as the webpage states).