It occurs when an element's background-image requires alpha transparency (as the header would need to allow the main background to show through). The AlphaImageLoader filter has to be used for IE6 to achieve transparency but can cause event handling problems for elements within the header (the search field, search button, breadcrumbs, user menu, etc). To add to the madness, it was discovered that the dimensions of the PNG could affect whether or not the event bug was present. I read one guy's research where he was trying to put together a list of image dimensions that would work. :) The semi-recent discovery that I mentioned was that events seem to be restored if the element with the AlphaImageLoader filter contains an element whose position is set to "relative". But, it's not known whether this only works with certain dimension PNG images.
The javascript that you pointed me to replaces image tags, so it's far less problematic. -Christian On Oct 16, 2007, at 11:00 AM, Jesús Martínez wrote: > What kind of event handling bugs? I'd set the hack for all images on > es.pokemon <http://es.pokemon.wikia.com/wiki/ > MediaWiki:Common.js#Transparencia_en_im.C3.A1genes_PNG_en_IE> > and I didn't had any problem about events > > 2007/10/16, Christian Williams wrote: >> Dan, >> >> I'm not promising a colour picker. :) I said that early in the Quartz >> project, that was an idea that was being kicked around. As you >> pointed out, a lot of the folks who will customize will REALLY want >> to customize, way past anything that a simple colour picker could do. >> >> I've uploaded a new header image to gaogaigar.wikia.com and set the >> main background to be aligned top right. The grid is now aligned. >> >> There are two PNG formats, 8 bit and 24 bit. 8 bit is binary >> transparency and 24 bit is alpha. IE6 will display either, but it >> will only respect the transparency of the 8 bit PNG. The transparent >> areas in a 24 bit PNG, even the 100% transparent areas, will render >> as gray. A single PNG can't be used for IE6 and 7 to render with >> alpha transparency in 7 and degrade to bitmap transparency in 6. I >> wish it were the case. Actually, I just wish that MS had done their >> PNG implementation correctly for IE6. I think we all do. :) >> >> The only way for IE6 to render a transparent 24 bit PNG is via the >> AlphaImageLoader filter, which causes the event handling bugs. It's a >> delicate dance, but I'm working on it. >> >> -Christian >> >> >> On Oct 15, 2007, at 7:14 PM, DanTMan wrote: >> >>> ^_^ Nice to see things are being changed... And interesting idea on >>> the >>> color picker generating the images. Just when that's done, please >>> make >>> it also generate the CSS or otherwise make it so that you can >>> both use >>> the color picker and also customize css. Cause there will be those >>> of us >>> who want to add extra css in addition to what we can get out of the >>> color picker. >>> In fact, I can guarantee you that every single Wikia ACG wiki will >>> require hard CSS in addition to what you can get out of the color >>> picker >>> because we have an @import at the top of the Common.css and also >>> currently just in Monobook.css but when quartz is done, we'll >>> also be >>> including Quartz stuff. >>> >>> Nice to hear of things being converted from .gif to .png. Ya I know >>> that >>> IE 6 does not support alpha transparency, but the statement that >>> IE 6 >>> does not support transparency in png's without extra hacks is >>> false. IE >>> 6 still supports the same kind of 100% or 100% off transparency >>> that is >>> supported in a .gif. And IE 7 supports that and also the alpha >>> transparency that other browsers have. So IE 6 still supports >>> transparency, and IE 7 has added alpha transparency. Also the >>> statement >>> that a .gif is better compressed or takes a smaller file size than a >>> .png is false. .png has very good compression, and the only >>> reason you >>> see .gif's with smaller sizes is because other than people only >>> using it >>> for small images which don't even need compression, .gif does not >>> support more than 255 colors. The only reason you'll see a .gif >>> with a >>> smaller size than a .png is because the .gif is a bad quality >>> image, and >>> the .png is a good quality image that has all the colors intact. And >>> still the .png still has good compression and file size. >>> The only valid use .gif's now have are for small buttons, and >>> animations. >>> >>> Ya, I know about image sprites, I've done that before and worked >>> with >>> that kind of stuff. It works great in mouseovers and images that >>> have >>> activation because the browser never needs to load another image >>> when >>> you hover over multiple times. >>> >>> I get what is done with the halopedia, in fact, without even >>> looking at >>> that I already tried to do that. But while that works for that >>> image. It >>> didn't work for a 30x30 grid. Mostly because of the symmetry. >>> >>> About that color picker, do you think it could also generate the >>> Wikia_logo and Wikia_logo_small images based on a color set or >>> gradient >>> you pick. Many wiki match the logo's color to the color scheme. I >>> did >>> that, but when I tried to swap the colors, it didn't work out so >>> well. >>> http://gaogaigar.wikia.com/index.php? >>> title=MediaWiki:Quartzslate.css&useskin=quartz >>> My versions ended up bad quality and didn't work out to well. >>> Same thing for the Article_bars, as you'll see on that same page >>> I did >>> one using a gradient, but I lost the curve. >>> ^_^ And I guess since we're on the matter... I did manage to do the >>> search icon, and the user_bar icon, but it was tricky and not >>> everyone >>> will be able to. So why not generate those to. And just for the >>> heck of >>> it, I'll add in the bullet icons. >>> I notice issues with the New article/New wiki buttons, so in case >>> someone is customizing the sidebar/widgets coloring that might be >>> good to. >>> >>> ~Daniel Friesen(Dantman) of: >>> -The Gaiapedia (http://gaia.wikia.com) >>> -Wikia ACG on Wikia.com (http://wikia.com/wiki/Wikia_ACG) >>> -and Wiki-Tools.com (http://wiki-tools.com) >>> >>> Christian Williams wrote: >>>> Dan, >>>> >>>> You're almost absolutely right. :) First, here's some background on >>>> the Quartz skin project. When we were putting the Quartz skins >>>> together, there was a grand plan to have a colour picker page which >>>> would automatically generate the images for you. Smoke and Slate, >>>> along with Beach, Brick, Sapphire, and Gaming (which will roll out >>>> shortly) are all fairly straightforward colour combinations (no >>>> patterns or background images... well, I guess Gaming does). >>>> Anyway, >>>> the thought was that the colour picker would mask the image >>>> complexity. >>>> >>>> I realize that the header graphic and the article bar graphic are >>>> difficult to understand because the images don't really look >>>> like the >>>> page elements that they construct. I'm using a CSS technique >>>> referred >>>> to as "image sprites". With sprites, a single image is repurposed >>>> through CSS positioning to increase load time and decrease file >>>> counts and server roundtrips. Part of this technique often requires >>>> for portions of an image to overlap other portions of the image. >>>> Transparency causes big problems when trying to do this, because as >>>> you noticed, the other part of the image shows through the >>>> transparency. >>>> >>>> PNG images are great because they allow alpha transparency, not the >>>> bitmap transparency that can be achieved with GIF images. Bitmap >>>> transparency is either 100% transparent or 100% opaque, alpha >>>> transparency can be any percentage which allows the edges of an >>>> image >>>> to blend into its background. The problem lies in Internet Explorer >>>> 6.0's support for PNG. Natively, IE6 does not support alpha >>>> transparency in PNGs. There is a hack though, by using Internet >>>> Explorer's own proprietary AlphaImageLoader filter, but it once >>>> again >>>> defeats itself by leading to event handler troubles (clicks >>>> won't be >>>> detected). Once again, there's another somewhat recently discovered >>>> hack to overcome the event capturing bug. In short, it's possible, >>>> but a big pain for all involved. It means more CSS for you and I to >>>> write to customize the skin elements. After realizing the problems >>>> with blending the header into a background image, I started a >>>> project >>>> to convert the GIF images used in Quartz to PNG. The header is >>>> working, but the other parts aren't ready yet. Before releasing >>>> this >>>> change, we'd have to figure out a good way to roll the changes >>>> out to >>>> the Quartz skin so that everyone who has already customized their >>>> skins with GIF images aren't affected. >>>> >>>> There is a way to achieve what you're trying to do with the current >>>> infrastructure of the Quartz skin. Take a look at halo.wikia.com. I >>>> included a portion of the background image in the header image. >>>> Then, >>>> to keep the two in-step, the main background image is aligned to >>>> the >>>> top right. When the browser is resized, the background image shifts >>>> to the right, so the separation between the two images can't be >>>> noticed. >>>> >>>> I've learned a lot from the whole Quartz skin project. When taking >>>> designs from Photoshop to XHTML and CSS, I've always been able to >>>> spot the most technically efficient ways to implement the >>>> designs. In >>>> trying to customize my own work and from working with Annie on the >>>> Quartz customization guide (on inside.wikia.com), and of course >>>> reading your email this morning, I've learned that technical >>>> efficiency isn't enough when others need to build upon my work. >>>> >>>> I'll press to get the header PNG change fully tested and rolled >>>> out, >>>> since it is probably the most difficult piece to customize, and >>>> will >>>> of course apply my learnings from this project toward future >>>> projects. >>>> >>>> Thanks Dan. >>>> >>>> -Christian >>>> >>>> On Oct 14, 2007, at 5:39 AM, DanTMan wrote: >>>> >>>> >>>>> I find the image setup used to make the headers in the Quarts >>>>> skins to >>>>> be /*extremely*/ poor. >>>>> >>>>> Other than my absolute dislike of the .gif which has been >>>>> replaced in >>>>> nearly every good design spot you can find on the internet >>>>> with the >>>>> .png format. The way the image for the header itself is split >>>>> up is >>>>> extremely poorly done. >>>>> >>>>> It's nearly impossible to line things up to fit pixel by pixel >>>>> with >>>>> the >>>>> other parts of the header and even worse you can't match it with a >>>>> background, furthermore the way the header image splitting is >>>>> designed >>>>> causes it to be impossible for you to fix that by adding >>>>> transparency, >>>>> because if you add transparency then other parts of the image show >>>>> through. (If you make the background area of the curve in the >>>>> header >>>>> transparent, then the strait background of the header shows >>>>> through) and >>>>> you can't make that spot transparent, because if you do, then >>>>> blocks of >>>>> transparency start showing up inside the header area and also in >>>>> the top >>>>> bar. (Which makes me note, shouldn't be tiny menu area up top get >>>>> it's >>>>> background image from a different area of the image, not the same >>>>> one >>>>> used for the bulk of the search area so you can style that with >>>>> something special to, and especially since they are shared it's >>>>> impossible to line things up) >>>>> >>>>> It took me probably about an hour of fooling around with the image >>>>> trying to find out where the badly positioned parts of the image >>>>> went in >>>>> the header to finally give up on giving the GaoGaiGar wiki a nice >>>>> header. >>>>> http://gaogaigar.wikia.com/index.php? >>>>> title=MediaWiki:Quartzslate.css&useskin=quartzslate >>>>> >>>>> I first tried with a transparent curve background, but the search >>>>> area's >>>>> background showed through. >>>>> I tried adding the grid background to the header, but nothing >>>>> lined up >>>>> with each other, and worse the image wasn't even evenly >>>>> distributed >>>>> horizontally so it's impossible to get a sane grid out of the >>>>> header >>>>> because it is broken by the non-uniform repeat. >>>>> Then I tried removing the vertical bars from the grid, and just >>>>> going >>>>> for something horizontal. Unfortunately because the top menu >>>>> and the >>>>> bottom of the search area's background use the same area, it was >>>>> impossible for me to create even a uniform set of lines, I >>>>> tried to >>>>> create a bit of an odd one, but the positioning was so poor that I >>>>> couldn't even get it to work putting the lines in odd places >>>>> just so >>>>> that they could line up with each other in the header. >>>>> Then before giving up, I tried going back to transparency and >>>>> making the >>>>> curved background transparent, this time I tried to make a part >>>>> of the >>>>> search area background transparent, and found out that the entire >>>>> thing >>>>> is repeated in the search area and also repeated inside of the >>>>> top bar >>>>> giving me transparent areas all over the place. >>>>> >>>>> It just doesn't work out right. You can't create anything good >>>>> with >>>>> the >>>>> header. >>>>> >>>>> -- >>>>> ~Daniel Friesen(Dantman) of: >>>>> -The Gaiapedia (http://gaia.wikia.com) >>>>> -Wikia ACG on Wikia.com (http://wikia.com/wiki/Wikia_ACG) >>>>> -and Wiki-Tools.com (http://wiki-tools.com) >>>>> >>>>> _______________________________________________ >>>>> Wikia-l mailing list >>>>> [email protected] >>>>> http://lists.wikia.com/mailman/listinfo/wikia-l >>>>> >>>>> >>>> >>>> _______________________________________________ >>>> Wikia-l mailing list >>>> [email protected] >>>> http://lists.wikia.com/mailman/listinfo/wikia-l >>>> >>>> >>> _______________________________________________ >>> Wikia-l mailing list >>> [email protected] >>> http://lists.wikia.com/mailman/listinfo/wikia-l >>> >> >> _______________________________________________ >> Wikia-l mailing list >> [email protected] >> http://lists.wikia.com/mailman/listinfo/wikia-l >> > _______________________________________________ > Wikia-l mailing list > [email protected] > http://lists.wikia.com/mailman/listinfo/wikia-l > _______________________________________________ Wikia-l mailing list [email protected] http://lists.wikia.com/mailman/listinfo/wikia-l
