Crop THIS
Recently I have been trying to sort out a menu that uses PNG images for the background. The image needed to have small transparent areas so it was either a PNG or a GIF. After bantering with the MadPilot on completely unrelated topics, we got to the PNG vs GIF debate. I have always avoided PNG images because they involve hacking for Internet Explorer. If there’s one thing I hate, its hacking for Internet Explorer. Not to say that I haven’t been able to get a fix for problems I have had, but it’s more along the lines of knowing it ’should’ be working.
The GIF disadvantage is that around edges they can appear quite jagged, unless you choose a nice matte colour for it to fade into. Catch is, I was going to style the list items as a group as opposed to giving them individual styles, and the images would go across different colours. The background on the items also had a slight gradient, which never looks just right using a GIF. PNG supports gradients well, and will easily handle the transparency problem. The basic idea was to have the list items lining up vertically, and any sub menus to appear under the specific heading, and push the other items down. It took very little effort to line everything up in Firefox(surprise surprise) but nothing I could do would make the submenu appear and push the rest of the menu out.
The catch(after much R&D, coffee and shorting out braincells), was in the filter: used for PNG images in IE. So the following code was on the top level nav li(s).
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="menu-item.png", sizingMethod="image");
See anything suss? If you do, I could have used your help. If not, its all about the sizing method. When I chose “image”, the submenu would appear underneath the top menu. Choosing scale meant that the parent element would indeed stretch and ‘block out’ to push the other items down, but the background image stretches too. I had just assumed that sizingMethod="image" would ‘block’ the list item, but alas, I was wrong. It does pretty much nothing but make sure the background shows the whole image. Another sizingMethod I was not actually aware of was “crop”. Now, I had just assumed it was along the lines of scaling the image, but say, if the area was too small it would cut the image off, instead of scaling it(you know, like a crop tool?). HOWEVER, I did read(on one site, that I can’t remember the link), that cropping actually cuts the area to the size of the image. Essentially, making it a block, thus pushing out the other nav items.
This is more a post to ensure I don’t get caught out by this again.
