Grow your CSS skills. Land your dream job.

[Solved] Shifting Links within Lists

  • # November 30, 2009 at 4:35 pm

    Hi guys!

    I’ve come across a problem that I have been trying to work around, but it keeps popping up!

    The issue here is that I will put links within <ul> and <li> tags, assuming it would work normal. However, every time that I click it, it’ll space itself further from the list node or it will replace itself in a different locations and/or with different paddings. Here’s an example of what I have.

    Code:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Nunc venenatis arcu et dolor hendrerit laoreet.

    # November 30, 2009 at 4:37 pm

    It sounds like you have some CSS overriding your list. Without a link to the live page, it’ll be near impossibly to provide much further help!

    # November 30, 2009 at 4:39 pm

    Oh! Right, sorry bout that. Here’s a page with a good example of what I am talking about.

    http://www.gwu.edu/~kappasig/brothers.html

    The links in the side boxes. They’re assigned to anchors, but every time I click them, they shift. Its been occurring with other links throughout the site, as well.

    # November 30, 2009 at 4:50 pm

    Ah ha! I’ve found the problem. They are shifting because of this:

    #menu a, a:active, a:visited {
    padding:4px 6px;
    }

    You have to declare the div for each element, or else the a:active and a:visited will apply to ALL links on the site.

    I think what you meant to put was:

    #menu a, #menu a:active, #menu a:visited {
    padding:4px 6px;
    }

    That should solve your shifting problem across the site.

    # November 30, 2009 at 5:03 pm
    "TheDoc" wrote:
    Ah ha! I’ve found the problem. They are shifting because of this:

    #menu a, a:active, a:visited {
    padding:4px 6px;
    }

    You have to declare the div for each element, or else the a:active and a:visited will apply to ALL links on the site.

    I think what you meant to put was:

    #menu a, #menu a:active, #menu a:visited {
    padding:4px 6px;
    }

    That should solve your shifting problem across the site.

    Yes! I tried sorting them out like you said and it works like a charm.

    Thanks again!

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

You must be logged in to reply to this topic.

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