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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Vertical Alignment in LI Tag?

    I am working on a site that has the main menu laid out horizontially using UL and LI tags. Each LI is 100 pixels wide by 42 pixels high. I want the anchor text to be aligned in the center and middle of the LI space. I have accomplished text-align: center on the LI, but vertical-align:middle doesn't work. Ideas?

    Site: http://www.tonybassconsulting.com/

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by ddmobley View Post
    I am working on a site that has the main menu laid out horizontially using UL and LI tags. Each LI is 100 pixels wide by 42 pixels high. I want the anchor text to be aligned in the center and middle of the LI space. I have accomplished text-align: center on the LI, but vertical-align:middle doesn't work. Ideas?

    Site: http://www.tonybassconsulting.com/
    You can specify a larger line-height:
    Code:
    #nav a {
    	display: block;
    	font-weight: normal;
    	font-size: 14px;
    	font-family: "Verdana", "Helvetica Neue Bold Condensed", Arial, sans-serif;
    	color: #666;
    	margin: 0;
    	padding: 0 0 0 0;
    	text-decoration: none;
    	text-transform: uppercase;
    	line-height: 42px;
    }
    Not related to the issue, but you need to get rid of this line:
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    It will trigger quirks mode in IE6 (not in IE7 though). This may give you head ache in the future.

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by koyama View Post
    You can specify a larger line-height:
    Code:
    #nav a {
    	display: block;
    	font-weight: normal;
    	font-size: 14px;
    	font-family: "Verdana", "Helvetica Neue Bold Condensed", Arial, sans-serif;
    	color: #666;
    	margin: 0;
    	padding: 0 0 0 0;
    	text-decoration: none;
    	text-transform: uppercase;
    	line-height: 42px;
    }
    Not related to the issue, but you need to get rid of this line:
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    It will trigger quirks mode in IE6 (not in IE7 though). This may give you head ache in the future.
    Thanks, the line height did the trick. but only for short menu names. Menu names that wrapped were still messed up. This is a Joomla install, and that is why the XML Version junk is in there. I actually had to code a fix into the menuing program that if the menu name was long than X characters and contained a space (meaning it was gonna wrap) to set another class designation so I could code other behaviors. Dynamic menu structures are always full of these little issues.


  •  

    Posting Permissions

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