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 10 of 10
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    CSS menu cross-browser issues.

    I did a lot of googling about this, but could not fix my problems exactly.

    I'm using a CSS navigational menu with no drop-down features - just a simple horizontal menu. It was working fairly fine on the main website (with an IE fix/hack - just one annoying quirk - that in IE8, the top and bottom boundary lines for the menu merge into one dark line at the top of the menu - no idea how to fix that as well), but I'm really having trouble integrating it into the .tpl index file of an ecommerce shop that I've heavily modified.

    It works fine in Firefox and IE8, but the IE fix does not fix the exact same code the same way it did for .html files. In IE 7 and earlier, the menu looks like a waterfall instead of a straight line.

    The HTML for the menu is this:

    Code:
    <div class="horizontallinetop"></div>
    
          <div id="menu">
          <ul>
    	<li><a href="../specialevents.html">Special Events</a></li>
    	<li><a href="../shop/">Shop</a></li>
    	<li><a href="../gallery.html">Gallery</a></li>
    	<li><a href="../labels.html">Labels</a></li>
    	<li><a href="../history.html">History</a></li>
    	<li><a href="../contactus.html">Contact</a></li>
    	</ul>
    	</div> 
    
    <div class="horizontallinebottom"></div>
    The CSS is this:

    Code:
    #menu ul {margin:0 auto; padding:0; list-style:none; display:table; white-space:nowrap; list-style:none; height:2em; position:relative; font-size:1.25em}
    #menu li {display:table-cell; margin:0; padding:0}
    #menu li a {display:block; float:left; height:2em; line-height:2em; color:#333; text-decoration:none; font-family:"palatino linotype", verdana, serif; font-weight:bold; text-align:center; padding:0 0 0 12px; cursor:pointer}
    #menu li a b {float:left; display:block; padding:0 12px 0 0}
    #menu li.current a {color:#000}
    #menu li.current a b {}
    #menu li a:hover {color:#003399}
    #menu li a:hover b {}
    #menu li.current a:hover {cursor:default;}
    #menu li.current a:hover b {}
    
    .horizontallinebottom {border-top: 0.1em solid #555753; padding: 0 0 0.5em 0}
    
    .horizontallinetop {border-bottom: 0.1em solid #555753; padding 0.5em 0 0 0}
    The IE fix is this:

    Code:
    <!--[if IE]>
    <style type="text/css">
    #menu ul {display:inline-block;}
    #menu ul {display:inline;}
    #menu ul li {float:left;}
    #menu {text-align:center;}
    </style>
    <![endif]-->
    There's probably a more elegant way to do it than the way I did it, especially with the "horizontallinebottom" and "horizontallinetop" elements. I really do not understand why IE8 (but not 7 and previous) render those elements incorrectly.

    My main question, I suppose, is why the IE fix does not work in the .tpl file the same way it did the in the .html file, and what I should do about this issue. I'm sure you guys will find way more mistakes in the code, and I welcome it. Thanks in advance!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello bluemagic,
    Give this a try -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 1000px;
    	margin: 30px auto;
    	background: #999;
    	overflow: hidden;
    }
    		#menu {
    			overflow :hidden;
    			position: relative;
    			margin: 5px 0 100px;
    			border-top: 0.1em solid #555753;
    			border-bottom: 0.1em solid #555753;
    		}
    		#menu ul {
    			float: left;
    			list-style: none;
    			position: relative;
    			left: 50%;
    		}
    		#menu ul li {
    			float: left;
    			position: relative;
    			right: 50%;
    		}
    		#menu ul li a:link,
    		#menu ul li a:visited,
    		#menu ul li a:active {
    			display: block;
    			padding: 5px 21px;
    			color:#333; 
    			text-decoration: none;
    			font-family:"palatino linotype", verdana, serif; 
    			font-weight:bold; 
    		}
    		#menu ul li a:hover {
    			background: #C63;
    			color: #003399;
    		}
    #menu li.current a {color:#000}
    </style>
    </head>
    <body>
    	<div id="wrap">
    			<div id="menu">
    				<ul>
    					<li><a href="../specialevents.html">Special Events</a></li>
    					<li><a href="../shop/">Shop</a></li>
    					<li><a href="../gallery.html">Gallery</a></li>
    					<li><a href="../labels.html">Labels</a></li>
    					<li><a href="../history.html">History</a></li>
    					<li><a href="../contactus.html">Contact</a></li>
    				</ul>
    			</div> 
    	<!--end wrap--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    bluemagic (06-04-2009)

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank so much Excavator, your example is so much more elegant and solves the issues I was talking about.

    I'm just curious about two things:

    There seems to be space between the menu's bottom border and the menu text that does not seem to be accounted for by padding. Why? And how can I get rid of it?

    How can I center the menu text? It seems to be a little skewed right now. Obviously not text-align: center, right?

  • #4
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts
    P.S. For some reason, that extra space between the text and the bottom border doesn't occur in the .tpl Shop screen, only in the main menu. But they both use the same stylesheet (the Shop has an additional one as well)...

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I just threw some margin in for presentation. Remove that bit highlighted in red and see how that works for you.
    Code:
    #menu {
    			overflow :hidden;
    			position: relative;
    			margin: 5px 0 100px;
    			border-top: 0.1em solid #555753;
    			border-bottom: 0.1em solid #555753;
    		}

    I did the same with it's container here -
    Code:
    #wrap {
    	width: 1000px;
    	margin: 30px auto;
    	background: #999;
    	overflow: hidden;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks; I had already removed/changed those. It seems to be where padding would be, except it isn't padding (or at least I'm not seeing it in the padding code).

    The site is at http://www.nickhilton.com. Can you see what I'm talking about there? It seems to exist only in Firefox and IE8, not IE7.

    And it's not seen at http://www.nickhilton.com/shop, which uses a .tpl file, but that has the same stylesheets, plus an additional stylesheet from the shopping cart software.

  • #7
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Using Firebug, I see that the extra space belongs to the the <ul> element. Hmm, still not sure how to fix the issue at hand.

  • #8
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts
    With the same menu/header code in Wordpress files, I'm also not having that odd space. I'm really going crazy...

    http://www.nickhilton.com has that odd space in the menu, as viewed in FireFox.

    http://www.nickhilton.com/blog and http://www.nickhilton.com/shop do not have it.

    Thanks in advance!

  • #9
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    .horizontallinetop {border-bottom: 0.1em solid #555753; padding 0.5em 0 0 0}

    You're missing the colon after padding.

  • #10
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by drhowarddrfine View Post
    .horizontallinetop {border-bottom: 0.1em solid #555753; padding 0.5em 0 0 0}

    You're missing the colon after padding.
    Thanks. But I'm using Excavator's code, not the code in my original post, now.


  •  

    Posting Permissions

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