Box margin/padding solved

Well, not exactly solved, but here's the code anyway.

#mainMenu {
clear: both;
margin: 10px 0px;
height: 55px;
voice-family: "\"}\"";
voice-family:inherit;
height: 35px;
padding: 10px 0px; /* these are the changes */
margin: 0px; /* these are the changes */
}
html>body #mainMenu {
height: 35px;
padding: 10px 0px; /* these are the changes */
margin: 0px; /* these are the changes */
}

Well, I thought to myself, since Firefox works with padding, and IE works with margin, may as well use Tantek Çelik’s CSS Box Model Hack method to solve that. And it worked! This method should be called "IE and Mozilla Hacks" or something.

Well, anyway I solve the other problem about my images having a border. Apparently images can't inherit from the cascaded "border: 0;" from anywhere, and therefore MUST specify that in the img css. Every day is a new day with weird happenings from the browsers.

So, I've fixed QUITE alot of boxing issues with the website today, and now the entire website looks more or less the same in both Firefox and IE. Tiring, but excellent job there, triplez! I'll be fixing up the css codes later when I wake up. Now my structural layer looks fantastically clean, but my presentation css codes looks like a rubbish dump. Heh.

Ok, today's a short one as I didn't really research anything and just spent most of my time fixing those visual bugs. More next time with the "Review of Designing with Web Standards" book as promised, and a short article on "Creating proper ASP.Net Custom User Controls with <div>". And, not to mention, awaiting the most anticipated sneak preview of the presentation I'm going to do on 9th December, "Generics on the .Net Framework 2.0". Extremely busy week with lots of writing to be done.

Cheerios.