Box margin/padding debugging tip

Just a tip on how I debug those box margin/padding bugs from those 2 famous but irritating web browsers who doesn't follow the same standards and keep giving me different results.

border: 1px solid black;

Basically I added that in any block of box that I need to check what's wrong with it.

A problem I've been trying to solve in vain is a weird boxing thing in IE. I did something like this.


#mainMenu {
border: 1px solid black;
clear: both;
padding: 10px 0px;
height: 55px;
voice-family: "\"}\"";
voice-family:inherit;
height: 35px;
}
html>body #mainMenu {
height: 35px;
}


Notice the padding. Whenever I hover over a part of the menu, the (invisible) box EXTENDS downwards. How I know? Everything below it shifts downwards. There's something wrong somewhere with my paddings. But here's the weird thing. I changed padding to margin, and it doesn't extend downwards anymore when I hover over it. BUT, Firefox then again shifts the entire box downwards thus leaving a TOP UGLY WHITE LAYER at the top of the browser. I HATE BOXES IN CSS!

I'll upload the website asap, when I get the other components working.