Help with a Web Design Issue
Posted June 19th, 2006 @ 09:48pm by Erik J. Barzeski
I despise Internet Explorer for Windows. Plus, I don't have a copy of Windows, so… that makes testing things harder.
This page, a temporary page, renders fine in Safari and Firefox, but due to the fact that IE doesn't support negative margins or pseudo-classes on anything but a, it really renders rather poorly in IE.
I have an iTunes gift certificate (admittedly a small one of $10) if someone can generate the HTML/CSS to render the page as it's seen there in all three browsers (Safari/Firefox and IE for Windows). It's likely too that IE for the Mac will work as well.
Of course, you're free to just give hints or ideas. It's likely a rather simple fix (or one coming from a different direction than the approach I've taken). Or at least I hope it is.
Donate Life
Posted 19 Jun 2006 at 11:57pm #
I had to solve the same problem on Jet Lag.
We ended up using [a] tags for everything. Just add class tags to them to distinguish them from your regular links.
Then you can do a.someclass:hover.
(p.s. amazon >> itunes)
Posted 20 Jun 2006 at 2:40am #
Here you go, have a look! Seems to work in IE 5.5 and up as well as Firefox, Opera, and Safari. I use some tricks in the way IE handles line height.
Hope it works for you. 🙂
Posted 20 Jun 2006 at 7:48am #
Foofy, that seems to work. I'm even too lazy to look to see what the difference is, and changing your single quotes ' to double quotes " didn't seem to pose a problem either (not that I'd expect it would). Once we verify it works on IE/Windows, $10 is yours. To the same email address you used to post the comment?
Posted 20 Jun 2006 at 1:42pm #
Yep, same e-mail address. It uses a whitelist but I added nslog.com to it so it shouldn't prompt you to verify.
I used line-height to center it vertically, and negative margins to close the gap between each element and overlap the borders so they always show up as one pixel wide. You could skip the negative margins alltogether if there were no spaces between the a element, but that just looked messy to me. 🙂