Forum Moderators: not2easy
The technique uses background images, one applied to the <li> and another applied to the nested <a>. However, hovering over the link caused the background image to download again, resulting in flickering and other undesirable results.
So, even though it's not as clean as I'd like, I decided to add <span> tags, like this:
<li><span><a href="#">List Item</a></span></li>I then applied the background image to the nested <span> tags instead of the links themselves. This had the desired result in everything except Netscape 6, which now floats all <li>'s against and behind one another. Removing the <span> from within the <li>'s fixes this problem, but as described above the <span> is necessary for smooth operation.
So is there any way to include <span> tags inside a floated <li> and make it work properly?
Thanks,
Matthew
but someone can maybe help.
I'm seeing the issue mentioned by MatthewHSE when I visit the online Sliding Doors Demo [alistapart.com] with IE6 on XP
but when I downloaded the page and images to test offline the "flicker" is not present. Is this an image cache issue?
Matthew are you testing this with the images on your hard-drive or with absolute URLs to images on a server?
Can anyone help here with the technical bit?
Suzy
To answer your questions, I'm testing online. I have not tried it on my local hard drive. I tried it with the images in my main images directory, and with them in the same directory with the CSS file. I also tried using absolute URL's and relative URL's. The flicker was always present.
I figured it was probably a cache issue as well, and I've noticed it in all browsers I've tested in (IE, Mozilla and Netscape). I tried adding a rule for #tabrow a:hover and using the same background image, but the flicker still occurred.
Other than preloading the images, I don't know what to do. I hate to use preloading techniques, but then I hate to use a technique that breaks in NN6. At this point, even NN4 does better; it shows absolutely no effects but the list is completely visible and usable. Might there be some tricks or hacks that would cause NN6 to behave in the same way?
I think if we all put our heads together on this one, we may be able to come up with a solution that will prove useful in the future to everyone. With that said, I'm running out of ideas. Anyone else? :)
Sorry I'm not contributing a lot here, but at least I'm keeping the thread alive. The pure CSS "should" work, but in the real world...
I'm bugged ;)
The "flicker" in this instance I don't think is a preload issue ~ I think it's an IE Bug? read more for clues..
I tried it by preloading the images (not JS though) and the flicker was still present :(
(Matthew I'm not seeing on any other browser?)
It seems that IE (not sure which versions but I think newer ones or it would've been noticed before?) just wants to redraw the background on hover when there is an image present and regardless of if you've even got a hover declaration in the CSS ... even if you don't want the background image to change!
I then checked Pixy's method again and someone has posted an IE solution.. which means this has been noticed..
and it does involve another container div.. like Matthew said (spans) to remove the background from the hovered element..
it also only occurs in pages on the server?
have to dig deeper on all this..
Matthew
So back to your spans which does seem to be the only way to avoid it for now..
I did a test with spans and it worked fine even in NN6.2
here's the bits of the (sliding doors) code you need to move to the span..
#header ul li span {
display: block;
background: #fcc url(right.gif) no-repeat right top;
float:left;
then the anchor still needs to be display: block too
the IE/Mac hack
needs to be amended too.. as you now need to hack out the span and not the anchor..
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header ul li span {float:none;}
/* End IE5-Mac hack */
and lastly remember to remove the image from #current a to #current span too if applicable
Though one thing NN6 doesn't do is "stretch" the parent container to fit.. so if you have a background to the whole menu like the sliding doors demo, it won't show as it uses the float within a float method which NN6 obviously doesn't support
As an aside I do tend to think that Moz/NN users are fairly clued on when it comes to browsers (as are Opera etc.. before someone takes that the wrong way ;)) and NN6 was very buggy so most will have probably upgraded by now..
Tedster, DrDoc... anyone .. should I also test with a JS preload script ~ I just loaded the images onto the test page
also this is occuring when trying to keep the same image on hover.. this isn't a rollover change (or shouldn't be ;)).. so the image is already loaded isn't it?
Suzy
I don't know how or why, but I noticed the "flicker" problem in Mozilla when I tried this technique on my own server, but it didn't seem to happen with the "Sliding Doors" demo. Odd . . .
I also don't know how I broke it for NN6 by using spans. Perhaps I had something wrong and kept overlooking it; anyway, I started over, tweaked the code to use <span>'s instead of <a>'s, and it worked fine in NN6, as you pointed out. I guess sometimes it just helps to start from a clean slate!
The problem I'm having now is with putting anything below the tab row. Doesn't NN6 recognize "clear"? It's putting my main content div right over the tabs! I knew that "clear" doesn't always work as expected when applied to elements that also include floats on themselves; however, that's not the case here. Here's my code for the content div:
#content {
padding: 10px 200px 10px 80px;
clear: left;
}
And here it is on the page:
<div id="headnav"> <!--Remember that this and the <li>'s are floated left-->
<ul>
<li><span><a href="#">Home</a></span></li>
<li><span><a href="#">Blah</a></span></li>
<li><span><a href="#">Blah</a></span></li>
<li><span><a href="#">Blah</a></span></li>
</ul>
</div>
<div id="content">
<p>Content</p>
</div>
How can I make this content clear the tabs? Obviously works fine in most browsers, but that NN6 is giving me fits!
the answer to the flicker problem is in Part2 [www.] of the Sliding Doors article.. lol
IE Flicker: If you’re seeing a flicker of the images when hovering over the tabs in IE/Win, check the cache settings for temporary files (Tools > Internet Options > General tab > Settings button).You may have changed the setting from the default to make sure you’re seeing the newest version on every page refresh. IE/Win has trouble holding a background image steady on anchors if you’ve specified "Every visit to the page" for temporary files.
The default setting is "Automatically", which allows the browser to instantly retrieve the image from cache, preventing any flicker. Most users never change this setting; most likely, they don’t even know it exists.
So it's not the same as an image preload problem but instead it is a personal setting..
Now that leads me to a question... ;)
I don't ever remember having amended these settings, but I have recently been upgraded to XP Pro..
Also it's not like me to amend my personal settings in IE because I like to see what the "average" user sees for testing reasons..
(Matthew, thanks for your comments..and I'm sorry this is not about your NN6 clearing the floats problem..)
I actually did research on image rollover/hover techniques for an article I wrote a while back (so it's in my interest to research it more, especially if it's not working). Anyhow I would swear there was no "flicker" then, obviously, as it defeats the purpose of the technique..
So the question is did the XP upgrade/install change the settings somehow..
and if so or if "automatically" is no longer the default ~ it's not fair!
Happily back to "automatically" for now and flicker is gone. Can anyone confirm that this is indeed meant to be the default setting..
Suzy
added: discussion about the settings was carried on in the HTML forum [webmasterworld.com]
