I have implemented a navigation menu based on the Sliding Doors (Part 1 (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors/">http://www.alistapart.com/articles/slidingdoors/</a><!-- m -->), Part 2 (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors2/">http://www.alistapart.com/articles/slidingdoors2/</a><!-- m -->)) technique found in ALA (<!-- m --><a class="postlink" href="http://www.alistapart.com/">http://www.alistapart.com/</a><!-- m -->), but I am disappointed (not surprisingly) by the results in IE. There is a "flicker" of the bg image used when you hover over an element -- does anyone know if there is some type of fix out there that can stop this ??Can we get a link, please? I can't experiment with it if I can't see it. 
Unfortunately, I can't give you the link to my exact example (intranet application), but if you go to one of the examples (<!-- m --><a class="postlink" href="http://www.alistapart.com/d/slidingdoors2/v1/ex10.html">http://www.alistapart.com/d/slidingdoors2/v1/ex10.html</a><!-- m -->) for Sliding Doors on ALA's site, you will see exactly what I am talking about. First view the page in Firefox, then in IE -- the "flicker" will be apparent when you hover over each tab.The background doesn't even change when I put my mouse over it in IE; just the text color. It may be because of loading images -- each time you put your mouse over a link with a background image, IE tries to reload it. This is great to ensure that the background is current, however it often causes this flicker. Try preloading the images with CSS.You are correct that that bg image does not even show -- I guess I should have written in my original post that I was looking for a way to stop the "flicker" of the bg image, and istead show it until after I am no longer hovering over the tab. I assume that when you suggested trying to preload the images via CSS, you meant doing something such as:
#menubar li { margin:0 0.5px; padding:0 0 0 10px; float:left; border-bottom:1px solid #000066;
background-image:url(images/tab_left.gif); background-position:top left; background-repeat:no-repeat;}
If you were referring to something else, please let me know -- this is the only way I knew of that you could pre-load images via CSS.
So assuming I am preloading them images the way you are suggesting and this problem is still occurring, is there another suggestion to get the image to stay visible when hovered, as it does in Firefox?
Has anyone created a nav menu using the Sliding Doors technique that works the same on Firefox and IE? If so, can you point me to the site so I can compare your CSS code to mine?Yes, that's how I meant to preload. If the flicker still occurs, the last thing I can think of would be a FOUC (<!-- m --><a class="postlink" href="http://bluerobot.com/web/css/fouc.asp">http://bluerobot.com/web/css/fouc.asp</a><!-- m -->).
I've used the Sliding Doors technique before, but not with rollover images. How are you getting the rollovers to work in IE, anyway, since IE doesn't understand the hover psuedo-element on anything but A tags?That is really the problem -- the rollovers aren't working. The background image for the anchor element flashes (see related code below), but isn't constantly displayed while I hover.
#menubar a { display:block; float:left; margin:0; padding:5px 15px 4px 5px;
background-image:url(images/tab_right.gif); background-position:top right; background-repeat:no-repeat;
text-decoration:none; color:#FFFFFF; width:.1em; }
I had seen some javascript that you could use to make other elements support :hover in IE, but at the moment I have not been able to find it (if anyone knows what I am talking about and can point me in the right direction, it would be much appreciated
). My thinking was that once it was written and working, when I hovered, I should only see one of the sliding doors (on the anchor element) while I hovered, and then I could add the script to make the other door (on the li element) show, and it should work as it does in other browsers. However, I haven't even gotten that far b/c the bg image for the anchor element isn't showing on hover as it should.
I will take a look at the link you provided to see if that is able to help me any. Otherwise, I feel like I am going to have to abandon this nav menu b/c of this annoyance on IE (unfortunately, most of the people will probably use IE when they use this app). I know this is a popular technique, and I can't believe that everyone who has used it has just said "I don't care what it looks like in IE".I'm sure most of the serious developers who've used this technique figured out how to get it to work in IE fine. Check out the following link to set a behavior for certain elements (requires an addition of a CLASS attribute): <http://www.vladdy.net/Demos/IEPseudoClassesFix.html>.Thanks for the link -- that was not the exact example that I was talking about, but it seems to do what I want, so it will be good enough. If this fixes my problem, I will be sure to post it ...
Unfortunately, I can't give you the link to my exact example (intranet application), but if you go to one of the examples (<!-- m --><a class="postlink" href="http://www.alistapart.com/d/slidingdoors2/v1/ex10.html">http://www.alistapart.com/d/slidingdoors2/v1/ex10.html</a><!-- m -->) for Sliding Doors on ALA's site, you will see exactly what I am talking about. First view the page in Firefox, then in IE -- the "flicker" will be apparent when you hover over each tab.The background doesn't even change when I put my mouse over it in IE; just the text color. It may be because of loading images -- each time you put your mouse over a link with a background image, IE tries to reload it. This is great to ensure that the background is current, however it often causes this flicker. Try preloading the images with CSS.You are correct that that bg image does not even show -- I guess I should have written in my original post that I was looking for a way to stop the "flicker" of the bg image, and istead show it until after I am no longer hovering over the tab. I assume that when you suggested trying to preload the images via CSS, you meant doing something such as:#menubar li { margin:0 0.5px; padding:0 0 0 10px; float:left; border-bottom:1px solid #000066;
background-image:url(images/tab_left.gif); background-position:top left; background-repeat:no-repeat;}
If you were referring to something else, please let me know -- this is the only way I knew of that you could pre-load images via CSS.
So assuming I am preloading them images the way you are suggesting and this problem is still occurring, is there another suggestion to get the image to stay visible when hovered, as it does in Firefox?
Has anyone created a nav menu using the Sliding Doors technique that works the same on Firefox and IE? If so, can you point me to the site so I can compare your CSS code to mine?Yes, that's how I meant to preload. If the flicker still occurs, the last thing I can think of would be a FOUC (<!-- m --><a class="postlink" href="http://bluerobot.com/web/css/fouc.asp">http://bluerobot.com/web/css/fouc.asp</a><!-- m -->).
I've used the Sliding Doors technique before, but not with rollover images. How are you getting the rollovers to work in IE, anyway, since IE doesn't understand the hover psuedo-element on anything but A tags?That is really the problem -- the rollovers aren't working. The background image for the anchor element flashes (see related code below), but isn't constantly displayed while I hover.
#menubar a { display:block; float:left; margin:0; padding:5px 15px 4px 5px;
background-image:url(images/tab_right.gif); background-position:top right; background-repeat:no-repeat;
text-decoration:none; color:#FFFFFF; width:.1em; }
I had seen some javascript that you could use to make other elements support :hover in IE, but at the moment I have not been able to find it (if anyone knows what I am talking about and can point me in the right direction, it would be much appreciated
). My thinking was that once it was written and working, when I hovered, I should only see one of the sliding doors (on the anchor element) while I hovered, and then I could add the script to make the other door (on the li element) show, and it should work as it does in other browsers. However, I haven't even gotten that far b/c the bg image for the anchor element isn't showing on hover as it should.I will take a look at the link you provided to see if that is able to help me any. Otherwise, I feel like I am going to have to abandon this nav menu b/c of this annoyance on IE (unfortunately, most of the people will probably use IE when they use this app). I know this is a popular technique, and I can't believe that everyone who has used it has just said "I don't care what it looks like in IE".I'm sure most of the serious developers who've used this technique figured out how to get it to work in IE fine. Check out the following link to set a behavior for certain elements (requires an addition of a CLASS attribute): <http://www.vladdy.net/Demos/IEPseudoClassesFix.html>.Thanks for the link -- that was not the exact example that I was talking about, but it seems to do what I want, so it will be good enough. If this fixes my problem, I will be sure to post it ...