SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu Items Move vertically when selected

    There are only two menu items at present.

    When I select the the second menu item it moves up a few pixels while the top item remains unmoved.

    When I select the top menu item it moves up and the bottom item moves down at the same time.

    If I've selected the bottom item and then slowly move to the top item they again move apart from each other, the top one moves up and the bottom moves down.

    Also, my comments indicate that there are two lines that change the menu item font size. Is this necessary?

    I'd sure like to clean this up before I mess it up!

    CSS
    Code:
    /* ---------------container for the navigation ----------------------*/
    #nav 		{
        			margin:0;
        			padding:0;
        			list-style:none;
    			font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
        			color:#fff;
    			/*font-size: 60%; /* changes font size */
    			line-height: 60%;
        			position: fixed;
    			top:10px;
        			width:26.67%       /* width of navigation container 320px*/
    			margin-left:1.2%;  /* moves the menu to the right */
    	
    }
    
    			* html #nav{position:absolute;}  /* effects each list item */Why does this line start with an "*"?  
    			#navli{font-size: 100%;margin:0 0 5px;
    			list-style:none;}
    			#nav a,#nav a:link,#nav a:visited {
    			color: #FFF;
        		        list-style: none;
    			text-decoration: none;
    			/* border-bottom: 1px solid #fff; */
    			font-size: 70%; display: block;    /* changes font size */
    			padding: 0.2em 0 0.4em 0.5em;     /* effects line height */
    			/*border-left: 16px solid  #000;   /*#711515; */
    			/*border-right: 1px solid          /*#711515;*/ 
    			background-color: ; color: #0CF;  /* changes list text color;*/
    }
    
    #nav li a:hover{background-image:url(images/menubkrnd2.png);
    		       width: 240px;  /* width of background image */
    		       color: #FFF;   /* color of background */
    } 		       /* hover text color */
    			 
    /********************NAVIGATION ENDS HERE***************/
    Thanks . . . Rick

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,172
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Sounds like there are different styles set for the hover and non-hover states. A link would make it easier to sell.

    * html #nav{position:absolute;} /* effects each list item */Why does this line start with an "*"?
    Putting * html before a rule is a hack directed at IE6. (No other browser will recognize that rule.)


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
  •