Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    css block list nav spacing and class issue

    two part question regarding list nav displayed as block:

    url:
    http://ochies.com/cps/110809/sub.html

    css:
    http://ochies.com/cps/110809/cps.css
    line # 287 to 362


    first issue: I cant get rid of the spacing around my li. To see it clearly, I added a "background-color: 999" to see where the space issue is. I added "0" on margins, paddings on ul, li, a but no luck.

    second issue: I created another class ".first" (line #340) for the first line navigation. I wanted the first left nav to have no space above so it aligns with the main content header (line #344). For some reason, its not talking on the padding i assigned. its still taking the main a: link padding instead of .first. Is my syntax correct?


    Thank you in advance.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,742
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello tuba74,

    To get rid of the space, delete this bit in red -
    Code:
    .gotop a:active{
    float: right;
    padding: 3px;
    color: #4a6783;
    font-weight: bold;
    font-size: 11px;
    text-decoration: none;
    }
    
    .gotop a:hover{
    float: right;
    padding: 3px;
    color: #4a6783;
    font-weight: bold;
    font-size: 11px;
    text-decoration: none;
    background-color: #d7dde2;
    }
    
    ol li {
    padding: 5px;
    }
    
    ul li {
    padding: 5px;
    }
    
    /*SUBNAV STARTS*/
    
    #subnav {
    	font-size: 12px;
    	margin: 0;
    	padding: 0;
    }
    
    #subnav ul {
    	margin-top: 0px;
    	margin-left: 0px;
    	margin-right: 25px;
    	padding-left: 0px;
    	width: 142px;
    	display: block;
    	}
    You have the confusing habit of naming classes and id's the same. The .first and #first threw me for a bit ...

    You are giving your #subnav ul li an id of first, in your markup you have <li id="first">

    But, in your CSS you are styling a class -
    Code:
    /*TOP SUBNAV SET*/
    
    
    #subnav ul li .first a:link {
    	background-color: #999;
    	color: #333;
    	text-decoration: none;
    	padding: 0px 0 10px 0;
    	display: block;
    	margin: 0px;
    	}
    	
    #subnav ul li .first a:visited {
    	color: #333;
    	}
    
    #subnav ul li .first a:active {
    	color: #333;
    	}
    
    #subnav ul li .first a:hover {
    	color:#336699;
    	}
    	
    /*TOP SUBNAV SET*/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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