Grow your CSS skills. Land your dream job.

trouble with clickable area and small line-height

  • # September 10, 2009 at 10:33 pm

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

    i.e.:

    Code:

    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?

    # September 11, 2009 at 12:04 am

    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.

    # September 11, 2009 at 12:26 am

    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

    # September 11, 2009 at 12:51 am

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

    # September 11, 2009 at 12:41 pm

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

    # September 12, 2009 at 2:42 pm

    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!

    # September 12, 2009 at 5:45 pm

    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?

    # September 12, 2009 at 7:39 pm

    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.

    # September 12, 2009 at 9:24 pm

    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;
    }

    # September 12, 2009 at 9:57 pm

    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]

    # September 13, 2009 at 6:48 am

    I played with the CSS code:

    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.

    # September 13, 2009 at 10:49 am

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

    # September 21, 2009 at 10:26 am

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

    … anyone ? …

    # November 4, 2009 at 12:29 am

    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:
  • Link Text

In your CSS try doing something like this:

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

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".