Scott Haneda wrote: >So far I am doing pretty good on Firefox and Safari, IE 6 which I have >access to does some strange stuff. I don't know if I should even try to make >ie7 work, since it is pre-release? > >url: >http://www.newgeo.com/web/shots/index.html > >Css: >http://www.newgeo.com/web/shots/style.css > >The specifics in IE 6 are on the left navigation, there is a .sep I am >using, it is a 5px tall by 150px wide image, all other browsers seem to >honor my 5px tall setting, IE6 shows a lot of white for some reason. I can >just put the image in there, but would like to use a div to make it cleaner >and less repetition. > > Hi Scott, At my side, IE6 was showing the white gap too, but only while the page was loading. Due to the heavy graphic weight of the page, that was rather long (even on DSL). The same was happening in FF. But why don't you make lists with combined background images and css-hover, instead of a lot of (hover) images and javascript? Giving cleaner html, less than 1/2 download time (saving >50 http-requests and incomplete packets returning), no javascript waiting time at hovering, better usable/accessible! :-)
Pasting the images together and arranging the div's with css-hover, I made this testpage <http://home.tiscali.nl/developerscorner/css-discuss/test-varsity-new.html>. The 5px by 150px wide gaps are gone too! ;-) Tested in IE6, FF1.07 and Opera8.01 under Win. According to Browsershots.org it seems in principle alright in IE7 (I guess only somewhere at the bottom an extra clearing div is needed), see browsershot result <http://browsershots.org/screenshots/5fa1c657561bd208397985b482a22853/>. >The nav images on the left and 4 logos at the bottom are png's with >transparency in order to deal with the gradients of this fugly site. Ie6 is >not supporting png properly? > That is correct; IE7 seems a bit better, but not for all purposes. > Are there workarounds? The logos should blend >into the background. > > Yes: 1. there is the IE png hack (with a "pngbehavior.htc" file). Google "ie png hack" for reading fun! - a simple testpage and some links are here <http://home.tiscali.nl/developerscorner/designhulp/ie_png_hack.htm>. - shadow side: sometimes this is making the pages extremely slow (or even crashing) in IE. 2. using an IE-behavior alpha filter. See MSDN here <http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alphaimageloader.asp>and here <http://search.msdn.microsoft.com/search/default.aspx?siteId=0&tab=0&query=png>. 3. if the image has a fixed position in the page: don't use transparent pngs, but paste the img and the background together [1], and position it in the right place on top of the rest of the background (the "nobody knows..." technique). In fact the method you already used in the right column. 4. depending on the image and the background, sometimes it is possible to use a 256 color transparent gif. In fact the method you used in the bottom of your testpage. - Example for transparent dropshadows <http://home.tiscali.nl/developerscorner/transparency/transparent-dropshadow.htm>. 5. and sometimes 2 gifs and some extra css can help to make something which is quite like a transparent png in IE (without hacks or IE-filters). See this example <http://home.tiscali.nl/developerscorner/css-discuss/transparent_gif_test.htm>. Greetings, francky [1] For instance by means of a screenshot of the png and the background in a png-transparency supporting browser. ______________________________________________________________________ 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/
