ALA Follow-up
By popular demand, I finally sat down to do what I should have done months ago: figure out what was causing the problem in my article on A List Apart (which, by the way, has a fantastic new design).
There was a 40 pixel jog in Internet Explorer in the original example, which I attributed at the time, without really looking too closely, to an IE positioning bug. So, I submitted the article and gave everyone who asked the party line of “I have no idea what’s wrong, it’s probably an IE bug.”
Well, after months and several emails about the subject, I took another look. Turns out, the real problem is browser style sheets.
A primer for those who may not be aware: all browsers have a default, built-in style sheet. It’s what causes <h1> tags to be rendered large and bold, and what puts spacing in between paragraphs. If browsers didn’t have a built-in style sheet, non-styled pages would simply be line after line of 12-point Times New Roman on white. Oh wait; even that is a default style.
Browser style sheets are a reality, and a pretty nice one at that. Unfortunately, as much as they aid in clarity when viewing non-styled pages (pages without CSS attached that are simply marked up with HTML tags), they can be a real pain when trying to figure out what’s causing positioning errors.
Turns out, Internet Explorer (and, big surprise, Opera) have a default <ul> style that is different than Gecko browsers like Firefox, and the problem really was that simple. All I had to do was set a zero-pixel margin and padding on the <ul> element, and problem solved.
Typically when I build a site, I begin with a declaration like the following:
* {
margin: 0;
padding: 0;
border: 0;
}
This cancels all browser margins and padding and ensures that I have complete control over everything (well, as much control as we ever have using CSS). I didn’t do this with my ALA example, and that’s where the problem came in.
So, check out the fixed example. This should help anyone trying to implement this menu system, and my apologies for procrastinating the fix for this problem. As it turned out, the entire fix took about 20 minutes.