trouble with clickable area and small line-height

[beechertrouble]

I’m having trouble with overlapping clickable areas when the line height is set smaller than 1em.

i.e.:

Code:

• TOO
• BIG?

the buginess being that when you mouse over the lower portion of "TOO" , the "BIG?" is in it’s hover state and is clickable. …

help?

[Indubitable Turtle]

Can you link to a live example? My first guess is conflicting styles. Do you have padding set on the li or a elements?

The full section(s) of your CSS dealing with lists and anchors would be helpful.

[beechertrouble]

I don’t think there are any conflicts … the overlap seems be be based in the <a> …

here’s a link to the live example:

http://www.beechersmithstackhouse.info/buggs.html

thanks

[Indubitable Turtle]

I"m going to have to admit that I’m stumped. I’ll look at it again tomorrow after some sleep, though.

[beechertrouble]

thanks for trying – i’m still scratching my head too.

[ChetGarrison]

Try putting line-height on the actual list item. Right now there aren’t any styles at all. Try something like this:

.navbar ul li {
line-height: .825em;
}

Hopefully that’ll help… good luck!

[beechertrouble]

nope – no luck.
I set the line-height for both the:
.navbar ul li
and
.navbar ul li a

to no avail …. i’ll update the live example.

any other thoughts?

[blue642]

In order to make the "a" tag smaller and avoid the overlap you have to set display to block, and the height to your desired height. But I have a screenshots of some weird handling of this when I get back to my computer. Strange it is.

[ChetGarrison]

Ok.. I’ve been playing around with it for a bit and then I remembered that explorer has a bug with list items and links. For some reason if you add a border it’ll fix the line-height problem, but then you have the problem with the border. I updated your css, so just swap out the old styles with the ones below. I made the border purple so you can see what I’m talking about. Hopefully that’ll work for you, otherwise I don’t think there is a solution. You might have to live with a border, just make it the same color as the background and no one will ever know :)

Code:

.navbar a:link {
color:#484340;
}

.navbar a:visited {
color:#484340;
}

.navbar a:hover {
color:#fa297d;
padding-left:5px;
}

.navbar ul {
width: 150px;
}

.navbar ul li {
border: 1px solid #9933ff;
line-height: .8em;
}

.navbar ul li a{
text-decoration: none;
display: block;
}

[blue642]

That doesn’t work either… here is the screen shot I was talking about.

Notice the dotted outline, that is the clickable area (even though firebug shows that the "a" link is contained within the purple borders.) For some reason the clickable are still overlaps when the anchor link does not extend beyond the borders.

[img]http://img.photobucket.com/albums/v69/blue642/Untitled-1.jpg[/img]

[beechertrouble]

arg! the mystery continues!
surely there is a solution other than using images …

[beechertrouble]

is there no hope of resolution? surely someone out there has faced this problem before?

… anyone ? …

[oldno19]

I was going crazy trying to figure this out. It took me 15 minutes to find the right keywords to use in google to even find a thread. After reading this thread, I thought "there HAS to be a way" and while there is probably still a cleaner method, I think I might have a solution for you.

Let’s say your links are set up like this (most importantly, they have a class called "aFix")

Code:

[Author]

Posts