SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast Locker's Avatar
    Join Date
    May 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu Vertical Alignment

    I've got a horizontal menu which is 25px in height and I want the links within it to be vertically in the middle. I've got this working in FireFox, Safari & Chrome but am having no joy in IE.

    Here's the menu markup:

    Code HTML4Strict:
    		<!-- Nav Start -->
    		<div id="main_nav">
    			<div id="main_nav_left">
    				<ul>
    					<a href="#"><li>Home</li></a>
    					<a href="#"><li>News</li></a>
    					<a href="#"><li>Rides &amp; Attractions</li></a>
    					<a href="#"><li>Useful Info</li></a>
    					<a href="#"><li>History</li></a>
    					<a href="#"><li>Features</li></a>
    					<a href="#"><li>Community</li></a>
    					<a href="#"><li>More</li></a>
    				</ul>
    			</div>
    			<div id="main_nav_right">
     
    			</div>
    		</div>
    		<!-- Nav End -->

    And here's the relevant CSS:
    Code CSS:
    /*-----------
    | Navigation
    -----------*/
    #main_nav {
    	height: 25px;
    	background-color: #82000f;
    	background-image: url(/images/nav_grad.png);
    	background-repeat: repeat-x;
    }
     
    #main_nav ul {
    	line-height: 25px;
    	vertical-align: middle;
    	padding-top: 5px;
    	padding-bottom: 5px;
    	color: #FFF;
    	font-size: 1.2em;
    	margin: 0;
    	padding: 0;
    }
     
    #main_nav li {
    	padding-top: 5px;
    	padding-bottom: 5px;
    	padding-left: 8px;
    	padding-right: 8px;
    	display: inline;
    }
     
    #main_nav a {
    	text-decoration: none;
    	color: #FFF;
    }
     
    #main_nav li:hover {
    	background-color: #82000f;
    }
     
    #main_nav_left {
    	float: left;
    	width: 690px;
    }
     
    #main_nav_right {
    	float: right;
    	width: 250px;
    	text-align: right;
    	margin-right: 10px;
    }

    With the above, the menu text sits at the top of the 'main_nav' div in IE, and I want it in the middle. I've figured out that removing the top and bottom padding from the li tag fixes the issue, but then the background for the hover effect doesn't span the entire height of 'main_nav'.

    Any suggestions on how to get round this would be much appreciated

  2. #2
    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 Locker
    I've got a horizontal menu which is 25px in height and I want the links within it to be vertically in the middle. I've got this working in FireFox, Safari & Chrome but am having no joy in IE.

    Here's the menu markup:

    Code HTML4Strict:
    		<!-- Nav Start -->
    		<div id="main_nav">
    			<div id="main_nav_left">
    				<ul>
    					<a href="#"><li>Home</li></a>
    					<a href="#"><li>News</li></a>
    					<a href="#"><li>Rides &amp; Attractions</li></a>
    					<a href="#"><li>Useful Info</li></a>
    					<a href="#"><li>History</li></a>
    					<a href="#"><li>Features</li></a>
    					<a href="#"><li>Community</li></a>
    					<a href="#"><li>More</li></a>
    				</ul>
    			</div>
    			<div id="main_nav_right">
     
    			</div>
    		</div>
    		<!-- Nav End -->
    To start your html has some errors.

    The links can not wrap the list-item tags, it is the vice versa:
    Code HTML4Strict:
    <!-- Nav Start -->
    <div id="main_nav">
    	<div id="main_nav_left">
    		<ul>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">News</a></li>
    			<li><a href="#">Rides &amp; Attractions</a></li>
    			<li><a href="#">Useful Info</a></li>
    			<li><a href="#">History</a></li>
    			<li><a href="#">Features</a></li>
    			<li><a href="#">Community</a></li>
    			<li><a href="#">More</a></li>
    		</ul>
    	</div>
    	<div id="main_nav_right"></div>
    </div>
    <!-- Nav End -->

    For the vertical alignment there are several ways.

    The easiest is to use line-height and no vertical padding.

    Code CSS:
    #main_nav li {
        padding-left: 8px;
        padding-right: 8px;
        line-height: 25px;
    }
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Enthusiast Locker's Avatar
    Join Date
    May 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To start your html has some errors.
    Right you are! My problem is that I want the whole "box" around the link to also be a link... If you get me.

    The easiest is to use line-height and no vertical padding
    Removing the padding means that the background colour does not fill the desired area. Example:

    I want this:



    Not this:


  4. #4
    SitePoint Enthusiast Locker's Avatar
    Join Date
    May 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to bump this thread, I know it can be annoying, but I thought one of you sitepoint geniuses could help me out?

    I hope so, I'd really appreciate any guidance

  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)
    Sorry if it took long.

    Not sure I understand how you want it to be.

    Test using this css for your posted html:
    Code:
    #main_nav {
    	height: 25px;
    	background: #82000f url(/images/nav_grad.png) repeat-x;
    }
    #main_nav ul {
    	color: #FFF;
    	font-size: 1.2em;
    	margin: 0;
    	padding: 0;
    }
    #main_nav li {
    	float: left;
    }
    #main_nav a {
    	float: left;
    	padding: 0 8px;
    	height: 25px;
    	line-height: 25px;
    	text-decoration: none;
    	color: #FFF;
    }
    #main_nav a:hover {
    	background-color: #c00;
    }
    Happy ADD/ADHD with Asperger's

  6. #6
    SitePoint Enthusiast Locker's Avatar
    Join Date
    May 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Erik J View Post
    Sorry if it took long.

    Not sure I understand how you want it to be.

    Test using this css for your posted html:
    Code:
    #main_nav {
    	height: 25px;
    	background: #82000f url(/images/nav_grad.png) repeat-x;
    }
    #main_nav ul {
    	color: #FFF;
    	font-size: 1.2em;
    	margin: 0;
    	padding: 0;
    }
    #main_nav li {
    	float: left;
    }
    #main_nav a {
    	float: left;
    	padding: 0 8px;
    	height: 25px;
    	line-height: 25px;
    	text-decoration: none;
    	color: #FFF;
    }
    #main_nav a:hover {
    	background-color: #c00;
    }
    That works fine in Safari, but messes up IE 6 and 7 totally. My original code actually works fine, but the links are hugging the top of the 'main_nav' div in IE6 & 7. It's fine in Safari and FireFox.

    Like I say, removing the top and bottom padding from the li element fixes it in IE, but because I've done that the background of the li tag doesn't span the whole area and therefore when it's hovered over it doesn't have the desired effect.

    Any more ideas?

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Erik's code doesn't have any top or bottom padding on the a. it just has side padding to give some horiztonal space.

    When you hover, it's not the li doing anything. We're not hovering the li. We're hovering the anchor. The anchor is a block because you floated it (that's why you can give it a height and a width if you want, and how you get the "clickable area" to be larger than the link text), and there's no reason why it isn't making hover actions as tall as you want-- a height of 25px has been given to the anchors. If it needs to be higher then make it higher (30px?). To keep the link text centered vertically you'd then of course adjust the line-height too then.

    Actually, I wouldn't even float the li's. I'd just leave them and say display: inline for them to please IE. The anchors are doing all the work here. But either way it should work.

    I can't see anything in Erik's code that could die horrible deaths in IE, but is there a possibility you are running you page in Quirks mode? (do you have a doctype?)

  8. #8
    SitePoint Enthusiast Locker's Avatar
    Join Date
    May 2005
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Erik's code doesn't have any top or bottom padding on the a. it just has side padding to give some horiztonal space.

    When you hover, it's not the li doing anything. We're not hovering the li. We're hovering the anchor. The anchor is a block because you floated it (that's why you can give it a height and a width if you want, and how you get the "clickable area" to be larger than the link text), and there's no reason why it isn't making hover actions as tall as you want-- a height of 25px has been given to the anchors. If it needs to be higher then make it higher (30px?). To keep the link text centered vertically you'd then of course adjust the line-height too then.

    Actually, I wouldn't even float the li's. I'd just leave them and say display: inline for them to please IE. The anchors are doing all the work here. But either way it should work.

    I can't see anything in Erik's code that could die horrible deaths in IE, but is there a possibility you are running you page in Quirks mode? (do you have a doctype?)
    Ok, I'm not quite sure what I did last time, but your explanation has helped me to get it right. It's working in all browsers now, thanks


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
  •