Minor CSS issues with links

I was working on my new blog demo and ran into a REALLY weird hover behavior in IE. Definitely a bug. So I brought in Big John to see if he could help identify it:

[11:04] cssJunkie: there is definitely some rule in your files that is triggering the bug
[11:04] cssJunkie: do a slow elimination until you find what it is
[11:04] cssJunkie: it must be connected to links
[11:05] cssJunkie: the border rule was being suppressed by the !important rule, but the border call alone was enough to kill the bug
[11:05] rethrash: OK
[11:06] cssJunkie: i suspect that the link was generating a new line, or becoming block, or aquiring layout
[11:06] rethrash: yeah
[11:13] cssJunkie: a:hover {
border-bottom: 1px solid #006;
}
[11:13] cssJunkie: in greenzi
[11:13] cssJunkie: that is the trigger
[11:15] cssJunkie: any border change on hover, even the color, will trigger the bug
[11:16] cssJunkie: it’s not going block or to layout, it’s making a new line
[11:17] cssJunkie: it’s a link/border bug
[11:17] cssJunkie: they do happen in IE
[11:19] cssJunkie: i have to get to work. have you tested this box with different kinds of content, like tables, iframes, etc?

We might need to reconsider how we handle our hover effects on teh front end...

Btw: what is it ? I mean what is the buggy behaviour triggering ?

:-X in greenzi ...

It’s a fairly obscure CSS bug in IE having to do with changing the border on teh A HREFs creating a new line under them. The hover gives them what is known as "Layout" and causes odd things to happen. See a demo here: http://modxcms.com/322

So the solution is to use underline effect instead of border ? or you have any hack to nail down IE’s bug

Its weird ! lol ..

Might need to change the border/padding back to an underline... but we’ll see. FYI, I posted this here more as a reminder to me since I don’t have meebo.com logs

LOL