Thanks Jono,
I made some changes, as per Dan Cederholm's technique you linked to.
Here's the demo page.
http://www.bodybuildingsecrets.com/demos/nav.php
Here is the revised CSS:
#nav {
height: 30px;
list-style: none;
display: inline;
overflow: hidden;
}
#nav li {
list-style: none; /* redundant, for IE5/Win */
display: inline; /* again, for IE5/Win */
float: left;
}
#nav a {
float: left;
padding: 30px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:30px; /* for IE5/Win only */
}
#nav a:visited {
background-position: 0 0;
}
#nav a:hover {
background-position: 0 -30px;
border-bottom: 0;
}
#home a {
background: url(/images/home.gif) no-repeat 0 0;
width: 73px;
}
#archives a {
background: url(/images/archives.gif) no-repeat 0 0;
width: 80px;
}
#categories a {
background: url(/images/cats.gif) no-repeat 0 0;
width: 90px;
}
#contact a {
background: url(/images/contact.gif) no-repeat 0 0;
width: 73px;
}
#about a {
background: url(/images/about.gif) no-repeat 0 0;
width: 77px;
}
And the HTML:
<ul id="nav">
<li id="home"><a href="/demos/nav.php">Home</a></li>
<li id="archives"><a href="/demos/nav.php">Archives</a></li>
<li id="categories"><a href="/demos/nav.php">Categories</a></li>
<li id="contact"><a href="/demos/nav.php">Contact</a></li>
<li id="about"><a href="/demos/nav.php">About</a></li>
</ul>
I tested this configuration in IE6/Win, Firefox 1.0.6 and Opera 8.02 and
it works as well as it did before, and with no hesitation or lag.
1. Please have a look again in Safari, Firefox and IE on the Mac and see
if it's any better.
2. Does anyone else notice a lag loading the rollover images as
described below?
3. One thing I do not understand, as it was not elaborated on in the
Cederholm article, nor on the S. Langridge or S. Leahy articles
(http://www.kryogenix.org/code/browser/lir/)
(http://www.moronicbajebus.com/playground/cssplay/image-replacement/)
referenced by Cederholm, was the need for overflow:hidden in both the ul
and the links. Can anyone explain what the purpose of that is? Is it to
ensure that items given a height of zero remain hidden and don't squeeze
out the bottom like ketchup on a hot dog?
---------------------------8<-----------------------------------------------
Jono Young wrote:
...Clicking on the main navigation in IE 5.2.3 Mac does nothing....
There's a good technique that Dan Cederholm used for Fast Company's
site - check that out here: http://tinyurl.com/dgqgb
One draw back is that in Firefox (Mac and PC) sometimes the initial
images do not load until they are clicked or hovered over, which is not
good. I am not sure why it is, or if it is just me that notices it?
Thanks,
--
Raymond A. van der Woning
http://vanderWoning.ca/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
