CSS menu cross-browser issues. [Archive]

View Full Version : CSS menu cross-browser issues.

bluemagic

May 29th, 2009, 09:59 PM

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:

<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:

#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:



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!

Excavator

May 31st, 2009, 05:13 AM

Hello bluemagic,
Give this a try -
<!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>
</div>
</body>
</html>

bluemagic

Jun 4th, 2009, 08:48 PM

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?

bluemagic

Jun 4th, 2009, 09:11 PM

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)... :confused:

Excavator

Jun 5th, 2009, 04:19 PM

I just threw some margin in for presentation. Remove that bit highlighted in red and see how that works for you.
#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 -

#wrap {
width: 1000px;
margin: 30px auto;
background: #999;
overflow: hidden;
}

bluemagic

Jun 5th, 2009, 04:27 PM

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.

bluemagic

Jun 5th, 2009, 06:42 PM

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.

bluemagic

Jun 26th, 2009, 11:46 PM

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!

drhowarddrfine

Jun 27th, 2009, 01:33 AM

.horizontallinetop {border-bottom: 0.1em solid #555753; padding 0.5em 0 0 0}

You're missing the colon after padding.

bluemagic

Jul 2nd, 2009, 08:27 PM

.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.