SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2010
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool CSS Menu Right Border

    Hello,

    I am the owner of 1TM.com and would like to remove the right border of dropdown menu. Right after it says "SSL" on the menu there is a 1px white line and would like to have this removed.

    Any help you be greatly appreciated.

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    One thing you could try is remove !important from here

    Code:
    #nav li {
      display: block;
      float: left;
      margin-right: 1px !important;
      position: relative;
      z-index: 9999;
    }
    then add a class to the last <li> and set it to

    Code:
    margin-right: 0;
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    simplest solution:
    #nav li {
    display: block;
    float: left;
    position: relative;
    z-index: 9999;
    }

    #nav li + li { margin-left: 1px;}

    hope that helps

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2010
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No it removes all the borders for the whole menu. Any code that works?

    Thanks

  5. #5
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove '!important' from 'margin-right' nav li css selector below: (it's not required)

    #nav li{
    float:left;
    margin-right:0;
    position:relative;
    display:block;
    z-index:9999;
    margin-right:1px !important;
    }

    Then add some inline css:

    <li style="margin-right: 0;"><a href="#">SSL</a></li>

    If you don't remove '!important' the margin wont go away because '!important' will over-ride the inline css style.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by CSSIssue View Post
    No it removes all the borders for the whole menu. Any code that works?
    Make sure to read all responses.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oopps! sorry. I blame the OP as they must have read yours and said it didn't work BUT it does.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •