Re: [css-d] CSS Image Swap - Flicker??
Matthew Stoneback wrote: I need this effect / navigation style to work across browsers and platforms... is this even possible? List version HTML: http://www.eddysound.com/rrc/index2.html To begin with, I'd simplify the styling of those navigation-links by removing unnecessary duplicates, and add in a height for the anchor since 'display: block' only spaces out those anchors properly horizontally. That'll stop the flickering. Next it's IE6, which needs for something to change on :hover before rerendering takes place, where I use a nonsensical 'background-position' as fix. Lastly I'll fix IE6' bad handling of 'overflow: auto' on the #header, by restyling it for older IE only. That'll give you this... HTML: http://www.gunlaug.no/tos/alien/ms/test_08_0212.html CSS: http://www.gunlaug.no/tos/alien/ms/test_08_0212_files/main2000.css ...that'll work pretty well across browser-land. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Image Swap - Flicker??
[EMAIL PROTECTED] schrieb: I looked at the list version; the home link doesn't flicker. It has the a tag id'd, the others do not. I don't however think you should have two items with the same id. Maybe identify them as a class instead? li.home a.home img, etc. -m Hello once again: I am hoping someone can steer me straight on this one... What I am looking for is a CSS image swap. I believe I have made it work (for the most part), but I would like it to be a little cleaner than what I am getting. The bottom navigation bar (in orange) seems to flicker when I mouse over the links (besides for the home link). This is discussed in this article (http://anekostudios.com/2006/03/10/css-image-swap/) by Shelly at Aneko Studios. In fact this is the tutorial I used to make what I have work this far. She talks about the flicker and even says how to fix it but I have been unable to make it work. I have checked my code in the following browsers: Firefox 2.0.0.12 Netscape 7.2 (both flicker), Opera 9.00 (everything looks good with no flicker), IE 7.0 (flickers) IE 6 (doesn't even work). I need this effect / navigation style to work across browsers and platforms... is this even possible? Here are the links to my demo pages. I have two versions, the only difference is one set of links are in an unordered list while the other is in divs. Div version HTML: http://www.eddysound.com/rrc/index.html Div version CSS: http://www.eddysound.com/rrc/main.css List version HTML: http://www.eddysound.com/rrc/index2.html List version CSS: http://www.eddysound.com/rrc/main2.css I would like to implement the same type of image swap for the top navigation (in white) but need to figure out this one first. Once I have found my way through my mistake I can then code the top navigation. If I have not been clean in my description or you need further information to help me, please let me know and I can post whatever is needed. Thanks in advance for any help you can lend me. I am trying to get my code clean and neat so I can have a product for the church I am helping out to review later this week. Matthew Stoneback __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Hello, you might consider looking at this technique: http://www.thevisualprocess.com/dev/rollover/index.php Other sources of value might be found here: http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#imagereplace I hope that helps. Regards, Christian *Directmedia Publishing GmbH* · Möckernstraße 68 · 10965 Berlin www.digitale-bibliothek.de AG Berlin-Charlottenburg · HR B 58002 · USt.Id. DE173211737 Geschäftsführer: Ralf Szymanski · Erwin Jurschitza __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Image Swap - Flicker??
Hello once again: I am hoping someone can steer me straight on this one... What I am looking for is a CSS image swap. I believe I have made it work (for the most part), but I would like it to be a little cleaner than what I am getting. The bottom navigation bar (in orange) seems to flicker when I mouse over the links (besides for the home link). This is discussed in this article (http://anekostudios.com/2006/03/10/css-image-swap/) by Shelly at Aneko Studios. In fact this is the tutorial I used to make what I have work this far. She talks about the flicker and even says how to fix it but I have been unable to make it work. I have checked my code in the following browsers: Firefox 2.0.0.12 Netscape 7.2 (both flicker), Opera 9.00 (everything looks good with no flicker), IE 7.0 (flickers) IE 6 (doesn't even work). I need this effect / navigation style to work across browsers and platforms... is this even possible? Here are the links to my demo pages. I have two versions, the only difference is one set of links are in an unordered list while the other is in divs. Div version HTML: http://www.eddysound.com/rrc/index.html Div version CSS: http://www.eddysound.com/rrc/main.css List version HTML: http://www.eddysound.com/rrc/index2.html List version CSS: http://www.eddysound.com/rrc/main2.css I would like to implement the same type of image swap for the top navigation (in white) but need to figure out this one first. Once I have found my way through my mistake I can then code the top navigation. If I have not been clean in my description or you need further information to help me, please let me know and I can post whatever is needed. Thanks in advance for any help you can lend me. I am trying to get my code clean and neat so I can have a product for the church I am helping out to review later this week. Matthew Stoneback __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Image Swap - Flicker??
I looked at the list version; the home link doesn't flicker. It has the a tag id'd, the others do not. I don't however think you should have two items with the same id. Maybe identify them as a class instead? li.home a.home img, etc. -m Hello once again: I am hoping someone can steer me straight on this one... What I am looking for is a CSS image swap. I believe I have made it work (for the most part), but I would like it to be a little cleaner than what I am getting. The bottom navigation bar (in orange) seems to flicker when I mouse over the links (besides for the home link). This is discussed in this article (http://anekostudios.com/2006/03/10/css-image-swap/) by Shelly at Aneko Studios. In fact this is the tutorial I used to make what I have work this far. She talks about the flicker and even says how to fix it but I have been unable to make it work. I have checked my code in the following browsers: Firefox 2.0.0.12 Netscape 7.2 (both flicker), Opera 9.00 (everything looks good with no flicker), IE 7.0 (flickers) IE 6 (doesn't even work). I need this effect / navigation style to work across browsers and platforms... is this even possible? Here are the links to my demo pages. I have two versions, the only difference is one set of links are in an unordered list while the other is in divs. Div version HTML: http://www.eddysound.com/rrc/index.html Div version CSS: http://www.eddysound.com/rrc/main.css List version HTML: http://www.eddysound.com/rrc/index2.html List version CSS: http://www.eddysound.com/rrc/main2.css I would like to implement the same type of image swap for the top navigation (in white) but need to figure out this one first. Once I have found my way through my mistake I can then code the top navigation. If I have not been clean in my description or you need further information to help me, please let me know and I can post whatever is needed. Thanks in advance for any help you can lend me. I am trying to get my code clean and neat so I can have a product for the church I am helping out to review later this week. Matthew Stoneback __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
