Hi everyone!
I'm currently working on a navigation bar for a personal website and, although transparency is working great, has a couple of problems with browsers that use... fonts that are not around the size (specifically the height) of Helvetica.
I basically have a <div></div>{...}</li></ul> block. The first <div></div> combination applies opacity, and the following <ul> contains the menu items. Both have position:fixed and end up in the top-left corner, all looks great.
Now for the actual problem. I can leave the height: attribute out of my <ul></ul> block and the block will 'auto-set' its height based on the height of the <li></li> items inside.
However, if I remove the height of the underlying <div></div> block.... it ends up at 0. In IE, however, the <div></div> block somehow seems to obtain the height from the <ul></ul> block, but that is most definately due to a bug.
So... I set the height of both the <div></div> and <ul></ul> blocks to 1.5em .
This works nice... except when fonts are, um, slightly larger than 1.5em !
I've tried nesting both the blocks in a couple of different ways, but this makes things worse than they already are.
On all my computers except my laptop when running Linux display this layout perfectly, but Linux displays the navbar with a 3 - or 4px gap at the top, instead of the 2px gap at both the top and bottom, the way I designed.
But what am I looking for?
A replacement design that works cross-browser (with or without hacks/conditional comments) and somehow sets all the elements I'm using to the same height. I don't really want to use JavaScript (it's not used anywhere in the site), but if I have to, I can...
Here's the actual code I'm working with...
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"[url]http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd[/url]">
<html>
<head>
<title></title>
</head>
<body>
<div class="bar" id="opaque"></div>
<ul class="bar" id="content">
<li><a class="active" href="#">Active Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</body>
</html>CSS:
* {
margin: 0px;
padding: 0px;
}
html {
overflow-y: scroll;
}
body {
color: #ffffff;
background-color: #141414;
}
.bar#opaque {
left: 0px;
top: 0px;
width: 100%;
z-index: 1000;
-moz-opacity: 1;
position: fixed;
text-align: center;
filter:alpha(opacity=50);
-moz-opacity: .5;
opacity: .5;
background-color: #191919;
height: 1.5em;
}
.bar#content {
border-bottom: 1px solid #676767;
left: 0px;
top: 0px;
width: 100%;
z-index: 1000;
-moz-opacity: 1;
background-color: transparent;
position: fixed;
text-align: center;
height: 1.5em;
}
.bar li {
font-family: "Verdana", sans-serif;
font-size: 0.8em;
text-align: center;
text-decoration: none;
color: #eeeeee;
list-style: none;
display: inline;
line-height: 1.8em;
margin: 0px;
padding: 0px;
}
.bar a {
color: #eeeeee;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 15px;
padding-right: 15px;
}
.bar a:hover {
color: #ffffff;
background-color: #404040;
border: 0px;
}
.active {
background-color: #303030;
text-decoration: none;
color: #ffffff;
}
a {
color: #0099ff;
text-decoration: none;
background-color: transparent;
margin: 0px;
}
a:hover {
color: #ff6600;
border-bottom: 1px dashed #ff6600;
text-decoration: none;
background-color: transparent;
}I've attached two images to this post, navbar-ie7.png, showing my navbar running in IE7 on Windows, and navbar-ff.png, showing the navbar in Firefox on Linux. If you have a screen magnifier, you might like to use it here, otherwise you might not see the difference between the two images (other than the font).
Thanks for reading this :D
--asmqb
PS. Did I use too much formatting?
