#1
  1. Salaryman
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Location
    St. Louis, MO
    Posts
    341
    Rep Power
    71

    Arrow CSS: need help with a menu seperator


    I am pretty new to messing with CSS, so please bear with me. I have a side menu on the site I am designing that is basicly the navigation bar; it is simply a list of links. I am trying to make thin seperator lines between each link, and am running into a bit of trouble. Here is what I have atm:

    PHP Code:
        body {
            
    margin:20px 20px 0px 20px;
            }
        
        
    #main { 
            
    background:#fff;
            
    }

        
    #main #menu {
            
    border-left:1px solid #ccc; 
            
    border-right:1px solid #ccc;
            
    border-top:1px solid #ccc;        
            
    border-bottom:1px solid #ccc;
            
    float:right;
            
    width:150px;
            
    background:#eee;
            
    margin:0px 0px 10px 10px;
            
    padding-bottom:10px;
            }
            
        
    p,h1,pre {
            
    margin:0px 10px 10px 10px;
            }
            
        
    h1 {
            
    font-size:14px;
            
    padding-top:10px;
            }
        
        
    #menu hr { 
          
    width:150px;
            
    color#ccc;
            
    top-margin:0px;
            
    bottom-margin:0px;
            }
        
        
    #menu p { font-size:10px}
        
        #menu a {
            
    margin0px 10px 0px 18px;
            
    color#777;
            
    text-decorationnone;
            
    width100px;
            }
        
        
    #menu a:link { 
            
    margin0px 10px 0px 18px;
            
    color#777;
            
    text-decorationnone;
            }
        
        
    #menu a:visited { 
            
    margin0px 10px 0px 18px;
            
    color#777;
            
    text-decorationnone;
            }
        
        
    #menu a:hover { 
            
    margin0px 10px 0px 18px;
            
    color#000;
            
    text-decorationnone;
            } 
    The section I am dealing with is #menu - I set the HR attributes and am trying to use that as the seperator. The problem I am having is there is about 10x above/below each link, even though I have the margin set on the links/hr to 0 for above/below. Any idea what I am doing wrong? Hope this make sense... thanks alot for taking a look.

    Patrick
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    20
    #menu hr {
    width:150px;
    color: #ccc;
    top-margin:0px;
    bottom-margin:0px;
    }
    The margin attribute is
    margin-top:
    margin-bottom:
  4. #3
  5. Salaryman
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Location
    St. Louis, MO
    Posts
    341
    Rep Power
    71
    That helps; thanks alot, I appreciate it.

IMN logo majestic logo threadwatch logo seochat tools logo