Forums

beechertrouble

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

i.e.:

<ul style=\"line-height:0.825em;font-size:60px;\">
<li><a href=\"#\">TOO</a></li>
<li><a href=\"#\">BIG?</a></li>
<ul>

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 :)


.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.

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

ikthius

I played with the CSS code:



			* {margin:0px;padding:0px;border:none;text-decoration:none;}

			img {border : none;}
			
			body {
				position:absolute;
			    top:0px;
				left:0px;
				width:100%;
				height: 100%;
				background: #FFFFFF;
				border: 0px;
				color: #333333;
				font-family: helvetica, arial, sans-serif; 
				margin: 0px;
				padding: 0px;
			}  
			
			.navbar .logo a:hover {
    padding:0px;
}

.navbar { 
 	position:relative; 
 	float:left; 
top:0px;
 	width:350px; 
 	height:100%; 
 	padding:0px; 
 	margin:0px; 
 	border:0px; 
 	background: none; 
 	color:#fff; 
 	z-index:10; 
margin-left:20px;

} 
ul
{
    border:1px solid blue;
}
.navbar ul li
{
position:relative;
display:inline;
top:0px;
    font-family:\"Arial Black\", Gadget, Helvetica, Arial, sans-serif;
    font-size:60px;
    position:relative;
padding:0px;
color:red;

}  
.navbar ul li a, .navbar ul li a:link {
border:1px solid red;
}

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

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

if you try and get them closer your going to have problems, the reason for this is that your font is 60px but the extra padding is from the font.... there is nothing you can do about this, unless you change fonts to see if there is any that can hit the border.

so really the font is your issue. try this with other sizes and you will notice the "padding" is still there.

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")

<li><a href=\"#\" class=\"aFix\">Link Text</a></li>

In your CSS try doing something like this:

a.aFix {
	display:block;
	overflow:hidden;
	font-size:36px;
	height:30px;
	margin-top:-10px;
}

You'll end up with your links getting pushed up by 10 pixels, but I think you could compensate by giving a class name to your <li> tags and defining a CSS class that compensates with padding-top or something like that.

Depending on the font you're using, you'll want to play with the the last three values for font-size, height and margin-top. Give it a whirl and you'll see what it's doing.

I didn't test this with list items, but it is working with my code where the links are wraped in divs instead of list items.

treehouse : what would you like to learn today?

Forums

trouble with clickable area and small line-height