Re: [css-d] CSS Image rollover not working in Mac?
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=homea href=/demos/nav.phpHome/a/li
li id=archivesa href=/demos/nav.phpArchives/a/li
li id=categoriesa href=/demos/nav.phpCategories/a/li
li id=contacta href=/demos/nav.phpContact/a/li
li id=abouta href=/demos/nav.phpAbout/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/
[css-d] CSS Image rollover not working in Mac?
I've heard from a friend that the upper navigation I built for his blog
does not work on Mac. My friend is non-technical and so I cannot tell
you what browser. (He's away for a week, I promised I'd look at it...)
Here's the HTML: Pretty straightforward, a basic UL with Spans to blow
away the text.
div id=nav
ul
lia id=home href=/home.phpspanHome/span/a/li
lia id=arch href=/archives.phpspanArchives/span/a/li
lia id=cats href=/categories.phpspanCategories/span/a/li
lia id=cont href=/contact.phpspanContact/span/a/li
lia id=about href=/about.phpspanAbout/span/a/li
/ul
/div
Here's the relevant CSS:
/* navigation rollovers
-*/
#nav a, #links a {
display:block;
height:30px;
border:0;
}
#nav a span, #links a span {
margin-left:-3000px;
}
a#home {
background:url(/images/home.gif) no-repeat top left;
width:73px;
}
a#home:hover, a#home:active {
background:url(/images/home.gif) no-repeat bottom left;
}
a#arch {
background:url(/images/archives.gif) no-repeat top left;
width:80px;
}
a#arch:hover, a#arch:active, li#current a#arch {
background:url(/images/archives.gif) no-repeat bottom left;
}
a#cats {
background:url(/images/cats.gif) no-repeat top left;
width:90px;
}
a#cats:hover, a#cats:active, li#current a#cats {
background:url(/images/cats.gif) no-repeat bottom left;
}
a#cont {
background:url(/images/contact.gif) no-repeat top left;
width:73px;
}
a#cont:hover, a#cont:active, li#current a#cont {
background:url(/images/contact.gif) no-repeat bottom left;
}
a#about {
background:url(/images/about.gif) no-repeat top left;
width:77px;
}
a#about:hover, a#about:active, li#current a#about {
background:url(/images/about.gif) no-repeat bottom left;
}
Essentially the rollover was simple enough. I use one image per link and
slide it down on rollover.
As tested it works in IE6, Firefox, and Opera on Windows. But on the Mac?
Caveats:-
1. As of this writing, the homepage validated to HTML 4.01 Transitional.
2. Ignore the fact that I neglected to provide the active list items
with an ID of current
(eg. li id=current to go with li#current a#arch),
as I never implemented my breadcrumb navigation... (whoopsie, I suppose
I should do that, eh?)
View the live site at http://www.bodybuildingsecrets.com/home.php
Curiously,
---
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/
Re: [css-d] CSS Image rollover not working in Mac?
That's exactly what I've heard, that the links themselves were not functional, along with the rollovers. I use Firefox on WinXP and haven't noticed any lag loading images at all. Weird. Anyone else see this? I'll mock up a test page, and make the changes. Will post results here. Probably will do a mini-write-up and leave it online permanently for the list. Good reason for me to get my business site back up too. Thanks Jono! Jono Young wrote: I am running Tiger (Mac OS 10.4.2) and the site works well in Safari 2.0 and FireFox 1.0.6, but in IE (of course), not only are the rollovers not working - the links are not working either. Clicking on the main navigation in IE 5.2.3 Mac does nothing. Not sure about the fix yet, but I tough you would want to know which browser to target. 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? It might be discussed in the comments below the article? Anyhow, pick your poison. On Aug 9, 2005, at 12:45 PM, Raymond van der Woning wrote: I've heard from a friend that the upper navigation I built for his blog does not work on Mac. My friend is non-technical and so I cannot tell you what browser. (He's away for a week, I promised I'd look at it...) -- Raymond A. van der Woning http://vanderWoning.net/ 780.237.7298 __ 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/
[css-d] CSS rollover: works in IE6 on Eric's site, but not on mine.
Hi folks. I prepared a couple of demo pages in advance, for this problem:
http://www.vanderwoning.net/toolbar.php
http://www.vanderwoning.net/toolbar2.php
I made a graphical user-toolbar, which is a simple definition list using
images for links, and with link text that is wrapped in spans and
positioned absolutely for a hover effect. The link spans are supposed to
appear 3 pixels below the toolbar on hover of the various icons.
They do so in Firefox 1.0.6 and in Opera 8 on Win XP-SP2 but do not do
so in IE6.
The CSS rules are essentially: (edited for brevity)
div a span {
display:none;
}
div a:hover span {
display:block;
}
I copied the technique directly from Eric Meyer's CSS Rollover Demo:
http://www.meyerweb.com/eric/css/edge/popups/demo.html
I made another variation of the technique in trying to debug my
implementation. Essentially it is:
div a span {
visibility:hidden;
}
div a:hover span {
visibilty:visible;
}
Interesting to me is that Eric's demo works flawlessly on my copy of
IE6, his span text appears where it's supposed to appear. My demo fails.
I have tried all sorts of nesting and ID configurations, but I'm missing
a detail somewhere. View source to see complete CSS within the HEAD of
the demo docs noted above.
Thanks in advance.
--
Raymond A. van der Woning
[EMAIL PROTECTED] | [EMAIL PROTECTED]
__
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/
