SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List Anchor - Fixed Height Problems

    Hi Peeps, Merry Christmas and all that jazz

    I am having a problem, I think it should be very simple but just can't make it work.

    On:

    http://cwaf.pelli.co.uk/

    I am trying to make the height for the nav list 37px (the exact height of the green background block).
    The reason for this is I want to assign background images aligned to the bottom center of each li to display on the on hover state to line up with the bottom of the box - does that make sense?

    I have set the height on the li a, the ul, the li but nothing works. I have bordered each li with a red border. The only time the height works is if I asign display block.

    The code I am using:

    Code:
    <div id="navigation">
    	<ul>
    		<li><a href="#">home</a></li>
    		<li><a href="#">blog</a></li>
    		<li><a href="#">volunteer</a></li>
    		<li><a href="#">how you can help</a></li>
    		<li><a href="#">forum</a></li>
    		<li><a href="#">gallery</a></li>
    		<li><a href="#">news</a></li>
    	</ul>
    <!--NAV END--></div>
    Code:
    * { margin: 0; padding: 0; }
    h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
    ul,ol { list-style: none; }
    fieldset,img { border: none; }
    caption,th { text-align: left; }
    table { border-collapse: collapse; border-spacing: 0; }
    .clear { clear: both; }
    
    body { 
    	font: 12px/18px "Lucida Grande", Geneva, Arial, Verdana, sans-serif; 
    	background-color:#d2d2d2; 
    	color:#333333; 
    	}
    
    #wrapper { 
    	width: 960px; 
    	margin: 0 auto; 
    	background: url(/_images/margins.gif) repeat-y left top; 
    	}
    	
    #container {
    	padding: 0 35px;
    	}
    
    #canvas {
    	width: 890px;
    	margin: 0 auto;
    	background: url(/_images/nav-top-strip.gif) repeat-x left top;
    	}
    	
    #navigation a 		{ color: #fff; text-decoration: none; }
    #navigation ul		{ text-align: right; padding: 21px 25px 0 0; }
    #navigation li		{ display: inline; padding-left: 10px; } 
    #navigation ul li a	{ border: 1px solid red; }

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Inline elements such as <a>s cannot accept width or height, and IE will often hide top/bottom paddings. The <a>s must be block display to do this, and the easiest cross-browser method is to float both the <a>s and <li>s left, and then the <ul> can be floated right in your case :
    Code:
    #navigation a {
     color: #fff;
     text-decoration: none;
     float: left;
     height: 37px;
     line-height: 37px;
     padding: 0 0.6em;
    }
    #navigation ul {
     float: right;
     padding: 9px 25px 0 0;
    }
    #navigation li {
     float: left;
    }

  3. #3
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works perfectly, thank you

    Have a great new year


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
  •