Stupid me fixed the problem. I basically removed the padding at the bottom. Here’s the code now.

#mainMenu {

clear: both;

padding: 10px 10px 0px; /* notice the 0px for bottom */

height: 55px;

voice-family: ""}"";

voice-family:inherit;

height: 35px;

}

html>body #mainMenu {

height: 35px;

}

Another thing I thought I should blog to remind me. Differences between “Margin” and “Padding”. Your background images fills up the entire box PLUS the padding. Your text fills up only the box. And margin is the white space surrounding the padding, which will not have the background image.

I feel proud of myself.

Another thing I should take note of is that photoshop generates much better gif files than fireworks, though that might mean I might not know how to generate great gifs using fireworks. But I did used the same default profiles on each application. Anyway, the size generated are different too, but what the heck, everyone’s on broadband nowadays.

Cheerios

 

I just woke up today, loaded up the website, IT STILL SHIFTS DOWNWARDS. THE BOX STILL EXPANDS WHEN I ROLLOVER IT. WHY WHY WHY!?!?! If I removed the Tantek hack, it works for IE, but gives that horrible white line spacing at the top for FireFox. Apparently they read from the cache, hence giving me correct behaviour. When I emptied the cache, the problem came back. I’m SO PISSED.

UGH!

 

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 &ltdiv&gt”. 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.

© 2009 - 2011 JustinLee.sg Suffusion theme by Sayontan Sinha
Stop SOPA!

SOPA breaks our internet freedom!
Any site can be shut down whether or not we've done anything wrong.

Stop SOPA!