Re: [css-d] Peculiar behavior with IE and alpha image loader
francky wrote: I think you haven't to be too afraid for 1px differences in hovering css-images. They are almost 1/2px predictable! - If the images fit in the combined img, they can be pixel-precisely positioned. Who is afraid for css-hover woolf? Testpage http://home.tiscali.nl/developerscorner/css-discuss/test-jakob-nav.htm ;-) francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peculiar behavior with IE and alpha image loader
francky wrote: francky wrote: I think you haven't to be too afraid for 1px differences in hovering css-images. They are almost 1/2px predictable! - If the images fit in the combined img, they can be pixel-precisely positioned. Who is afraid for css-hover woolf? Testpage http://home.tiscali.nl/developerscorner/css-discuss/test-jakob-nav.htm Nice one! :-) -- Els http://locusmeus.com/ http://locusoptimus.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peculiar behavior with IE and alpha image loader
Jakob Persson wrote: http://www.jakob-persson.com/ I can see the problem at the live page, but I cannot reproduce it on a local copy, the alpha png is working correctly here. Does the bug still manifests without the preload/google-analytics scripts? Or if there is some content, say a html comment in the div in question? It's a good practice to post a link to a reduced test case. BTW, I sorted the problem with the code blocks thanks to Kenny Graham who emailed me a link to working solution. That's good to hear. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peculiar behavior with IE and alpha image loader
I can see the problem at the live page, but I cannot reproduce it on a local copy, the alpha png is working correctly here. Does the bug still manifests without the preload/google-analytics scripts? Or if there is some content, say a html comment in the div in question? It was happening from time to time even before I added the google analytics script and I was able to fix it the few times it happened simply by removing the element, or edit the CSS and refresh the page, then put it back again, hit refresh again and then it worked. Adding a comment tag there makes no apparent difference. It's a good practice to post a link to a reduced test case. I will do that as soon as I can, I'd rather not experiment on the live site if possible. Thanks, Jakob PS. Thanks for your page on the behavior of links and the alphaimageloader, it helped me fix another problem that was the result of using it. The things we do to support IE... __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peculiar behavior with IE and alpha image loader
Jakob Persson wrote: I can see the problem at the live page, but I cannot reproduce it on a local copy, the alpha png is working correctly here. Does the bug still manifests without the preload/google-analytics scripts? Or if there is some content, say a html comment in the div in question? It was happening from time to time even before I added the google analytics script and I was able to fix it the few times it happened simply by removing the element, or edit the CSS and refresh the page, then put it back again, hit refresh again and then it worked. Adding a comment tag there makes no apparent difference. It's a good practice to post a link to a reduced test case. I will do that as soon as I can, I'd rather not experiment on the live site if possible. Thanks, Jakob PS. Thanks for your page on the behavior of links and the alphaimageloader, it helped me fix another problem that was the result of using it. The things we do to support IE... Hi Jakob, First my compliments for the simple and beautyfull design (simple on screen! lots of things behind). My suggestion would be to skip all the IE-png troubles by using transparent gif's instead. In the logo you are losing 1210 - 241 = 969 colors, but with my eyes and monitor I don't see any loss of quality. In the nav-bar background, consisting of greytones, nothing is lost. See (reduced ;-) ) testpage http://home.tiscali.nl/developerscorner/css-discuss/test-jakob.htm. Greetings, francky btw 1, I could not use your original images, seems some serverside script is prohibiting direct download (used images from screenshots). btw 2, At some moments, not always, your page is loading very slowly, especially in FF (?). To see what is downloaded all together, I tried the speed tester of WebSiteOptimization.com, but that is failing - don't know why. See speed rapport request http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www.jakob-persson.com/. btw 2, Why shouldn't you combine all the nav-images and their hover-variants in 1 image, and use css-hover instead of the MM_preloadImages() script and a lot of html-mouse codes? It can simplify and speed up the pages, I guess. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peculiar behavior with IE and alpha image loader
First my compliments for the simple and beautyfull design (simple on screen! lots of things behind). Thank you. This is actually my first relatively complex CSS design and I'm still learning. It's powered by Drupal, which allows me to implement some extremely powerful features and still keeping it simple. Highly recommended, it happens to be Dutch in origin! :) My suggestion would be to skip all the IE-png troubles by using transparent gif's instead. In the logo you are losing 1210 - 241 = 969 colors, but with my eyes and monitor I don't see any loss of quality. In the nav-bar background, consisting of greytones, nothing is lost. See (reduced ;-) ) testpage http://home.tiscali.nl/developerscorner/css-discuss/test-jakob.htm. Thank you very much for taking your time setting this up. I attempted to use GIFs but I never managed to get the GIFs to look good enough but these ones you made look real nice and sharp, with high color fidelity. The problem I can see is with the background elements sliding under it and the drop shadows I have but it seems to work great with the GIFs you got there. btw 1, I could not use your original images, seems some serverside script is prohibiting direct download (used images from screenshots). The images for the design aren't served through Drupal but I think you would need to get the file paths from the stylesheet. It's kinda messy :) btw 2, At some moments, not always, your page is loading very slowly, especially in FF (?). To see what is downloaded all together, I tried the speed tester of WebSiteOptimization.com, but that is failing - don't know why. See speed rapport request http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www .jakob-persson.com/. I'm using a Drupal module that prevents spam bots from accessing the site, it seems to block this site as well. I'll have to disable the module and test the site. What might slow it down is the IE behavior which traverses the DOM tree to load the alpha for the PNG files. btw 2, Why shouldn't you combine all the nav-images and their hover-variants in 1 image, and use css-hover instead of the MM_preloadImages() script and a lot of html-mouse codes? It can simplify and speed up the pages, I guess. That would be a good idea. I'd like to use the PNGs for now but reducing the number of PNGs to just one and use the alphaimageloader filter in the CSS instead, that would speed things up considerably. Reason I don't use CSS hovers is because images for navigation is an old technique which produces similar behavior across browsers, whereas css hovers aren't so predictable, I was thinking of using an ulli list, the ones I've seen so far haven't been consistent across browser. And for this part of the site where a 1 pixel gap would be highly visible I opted to use a more traditional technique. However it would sort the image preloading, and would speed up page load time. Well I have to head off and do some experimentation! Again, thank you very much! Jakob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Peculiar behavior with IE and alpha image loader
Jakob Persson wrote: [...] Thank you very much for taking your time setting this up. I attempted to use GIFs but I never managed to get the GIFs to look good enough but these ones you made look real nice and sharp, with high color fidelity. The problem I can see is with the background elements sliding under it and the drop shadows I have but it seems to work great with the GIFs you got there. Some finetuning in drawing the img's, I'll send you the used method off-list. btw 2, At some moments, not always, your page is loading very slowly, especially in FF (?). To see what is downloaded all together, I tried the speed tester of WebSiteOptimization.com, but that is failing - don't know why. See speed rapport request http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www .jakob-persson.com/. I'm using a Drupal module that prevents spam bots from accessing the site, it seems to block this site as well. I'll have to disable the module and test the site. What might slow it down is the IE behavior which traverses the DOM tree to load the alpha for the PNG files. Another reason to get rid of it! ;-) btw 2, Why shouldn't you combine all the nav-images and their hover-variants in 1 image, and use css-hover instead of the MM_preloadImages() script and a lot of html-mouse codes? It can simplify and speed up the pages, I guess. That would be a good idea. I'd like to use the PNGs for now but reducing the number of PNGs to just one and use the alphaimageloader filter in the CSS instead, that would speed things up considerably. Reason I don't use CSS hovers is because images for navigation is an old technique which produces similar behavior across browsers, whereas css hovers aren't so predictable, I was thinking of using an ulli list, the ones I've seen so far haven't been consistent across browser. And for this part of the site where a 1 pixel gap would be highly visible I opted to use a more traditional technique. However it would sort the image preloading, and would speed up page load time. I think you haven't to be too afraid for 1px differences in hovering css-images. They are almost 1/2px predictable! - If the images fit in the combined img, they can be pixel-precisely positioned. Well I have to head off and do some experimentation! Again, thank you very much! Jakob To compare, some experiments about transparency: Transparent png-like gifs http://home.tiscali.nl/developerscorner/css-discuss/transparent_gif_test.htm, Semi-transparent css-dropshadows http://home.tiscali.nl/developerscorner/transparency/transparent-dropshadow.htm. About css-hovers and background-positioning: Article in Dutch: 3 css-hoverable buttons, 6 images combined http://home.tiscali.nl/developerscorner/port-hole/knoppenblok.htm. Positioning of background-images in css: The port-hole theory http://home.tiscali.nl/developerscorner/port-hole/porthole.htm. Good luck! francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
