SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Align link text to the bottom of an <li>

    Hi all!
    Kindly see the attached png.
    I am trying to align the link text to the bottom of an li.
    Using line-height got it ok in ff/Opera..but fails in IE6.
    Here is the CSS:
    Code:
    .mainnav {
    	list-style-type: none;
    	width: 500px;
    	}
    .mainnav li {
      	float: left;
    	display: inline;
    	margin-right: 10px;
    	}
    .mainnav li a {
    	display:  block;
    	height: 60px;
    	padding: 0px 8px 3px 8px;
    	font-size: 18px;
    	line-height: 107px;
    	background-color: #fff;
    	color: #666;
    	text-decoration: none;
    	}
    
    .mainnav li a:hover, .mainnav li.selected a, .mainnav li.selected a:hover, .mainnav li a:focus, .mainnav li a:active {
    	background-color: #f3d00c;
    	color: #fff;
    	}
    .mainnav li a:hover{
    	background-color: #F5F5F5;
    	color: #000;
    }
    Also IE displays it in a wierd manner..Can I get it right without a width specification?

    Here is the HTML:
    Code:
    <div id="navwrap">
    <ul class="mainnav">
    <li class="selected"><a href="#" ><span>Home</span></a></li>
    					<li><a href="#"><span>Services</span></a></li>
    					<li><a href="#"><span>Projects</span></a></li>
    </ul>
    </div>
    Sorry for the long post.
    Please help if you can. Thanks a lot in advance.
    Attached Images Attached Images

  2. #2
    SitePoint Addict
    Join Date
    Apr 2006
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It might be worth trying this - set the LI to display: block; position: relative; then set the A within it to position: absolute; bottom: 0px;.

  3. #3
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why can't you just use padding to resolve this?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  4. #4
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    adwatson: Thanks.
    That works for normal divs..but I am afraid it didnt work when I tried it here with <li>s.

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE6 does not respect given height, maybe a solution can be
    Code:
    .mainnav li a{overflow:hidden}
    Happy ADD/ADHD with Asperger's

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cssusr View Post
    adwatson: Thanks.
    That works for normal divs..but I am afraid it didnt work when I tried it here with <li>s.
    Why would not padding work?
    Code CSS:
    .mainnav li a {
    	display:  block;
    	height: 18px;
    	padding: 42px 8px 3px 8px;
    	font-size: 18px;
    	line-height: 18px;
    	background-color: #ff9;
    	color: #666;
    	text-decoration: none;
    }

    Edit)
    Sorry, read that comment wrong.
    Happy ADD/ADHD with Asperger's

  7. #7
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot eric. that seems okay. Now regarding width, do I have to specify a width for IE?

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was what JimmyPaddy suggested.

    Do you mean IE6?

    Edit)
    Silly me,

    To put them on one line, yes that will work. But they can also be floated.
    Happy ADD/ADHD with Asperger's

  9. #9
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post

    Do you mean IE6?
    Yes, please.
    Do we have to add a hack for Ie as ff/opera etc are without specifying the width?
    Thanks in advance.

  10. #10
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To put them on one line, yes that will work. But they can also be floated.
    Happy ADD/ADHD with Asperger's

  11. #11
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Eric.
    But they're already floated - but in IE each li occupies the whole width of the <div> in which it resides (and appears vertically).

  12. #12
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did mean the anchors.
    Happy ADD/ADHD with Asperger's

  13. #13
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    I did mean the anchors.
    oh..missed it. Thank you very much eric.


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
  •