Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Having problems with borders on hovering in my menu :(

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #39905
    me1cooldude
    Member

    Hi,

    I have created a vertical menu and would like it to have a right red border on hover and selected item.

    However, I can’t seem to get it correct on hovering as my li border seems to to mess up the hover state. The bottom border slightly overlaps the right border.

    Here is the code in a fiddle.
    http://jsfiddle.net/4KBE4/1/

    Hope someone can help! Thanks :)

    #110296
    Paulie_D
    Member

    Borders can’t overlap…they meet at 45deg.

    #110297
    Paulie_D
    Member

    You might try making the link the same dimensions as the list item and applying different borders to one or the other.

    #110298
    Kitty Giraudel
    Participant

    It’s the proper rendering of borders. You have a 1px top border meeting a 5px right border. Those few little pixels are your top border.

    To avoid this, few options:
    – Use pseudo-elements (not very great in this case, it’s basic CSS),
    – Use the <li> tag to do the top border, and the <a> tag to do the right border.

    Edit: nice one Paulie, faster than me. :P

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.