JustinLee.sg

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.