?

Log in

No account? Create an account

Previous Entry | Next Entry

Me: ...have I mentioned how much I despise IE, and wish I could rip the still-beating hearts out of the chests of its programmers and feed them to its designers?
Liz: Bwahaha
Me: Because if not...I would. Very much so.


Why? Because IE is so perverse that, even when it's right, it's still wrong.

Okay, I was working on Mom's new site (lots of enhancements since the last version I showed!). Specifically, I was working on what I call the "secondary navbar"--the second line of the navigation bar that changes depending on which top-level item you've selected. (Take a look at the page to see what I mean.)

Both the primary and secondary navbars should have 0.4 em (an "em" is the height of the current font, so 0.4 em is about 4 pt high in that section) of padding both above and below the links. At the time, the primary navbar had its padding, and the top padding of the secondary was in place, but the bottom padding on the secondary was missing in Firefox.

But it looked perfect in IE.

What the fuck? IE's rendering it correctly, but Firefox has the bug? Did I just get transported into Bizarro-world?

That's when I tried Opera, and noticed it did the same thing. If Opera and Firefox agree on a tag's rendering and IE doesn't, 99% of the time IE's the one that's wrong. So after poking around for a while, I figured out what was going on.

I wanted a slightly unusual roll-over effect on links; specifically, I want the underline to turn dotted when you roll over it. (Try it--it'll go dashed in IE, but that's only because it doesn't support dotted.) There's no way to specify a dotted underline, so I had to use a slightly hackish technique--I undid the normal underline, set a 1px bottom border on the link (which is perfectly legal), and designed a rollover to make the solid underline turn dotted. Standard, but clever.

This, however, added some extra height to the links, which the browsers handled in different ways. Firefox and Opera seem to have dealt with it by rendering the bottom border on top of the secondary navbar's padding, making it seem like the padding was missing. Oops.

So, why did it work in IE? I figured it out when I turned off Javascript. If you do that (try it), you get a message saying you'll need to use the site map to navigate; the words "site map" are a link. That link was shifted up a pixel from the rest of the text. So instead of drawing that border on top of the empty space below the link, IE moved the link up!

The solution turned out to be twofold:
1. Move the link down a little in IE only.
2. Add extra padding for Firefox and Opera. (I did this by adding the extra padding by default, then setting it back to normal for IE only.)

All in all, I think I spent three hours or so on this. (And all for a few pixels of spacing. I'm an obsessive-compulsive web designer, in case you didn't notice...)