JavaScript Conditional Compilations
I don't think it's any secret amongst Team Awesome or it's affiliates that I hate IE (in fact I'm pretty sure we all do) and more specifically I hate IE6, so everytime we code a new site I'm all for not supporting IE6, my motto...."punish the IE6 losers, I mean users, I mean losers" but I'm far from getting my way. Even though it appeared I might with NT2.2, ultimatley I was defeated. And it's kinda sad to because if we got away from that more than half of those who are still on IE6 would upgrade because they would realize they are behind. Anyhow in an effort to find a polite way to explain to those poor suckers that there are better more advanced browsers out there I found a way to use JavaScript to detect the javascript version of the users browser and if that version matches IE6 display a single alert box to inform them of their folley. Sure there are other ways but I found this one kinda interesting.
<script type="text/javascript"> /*@cc_on /*@if(@_jscript_version < 5.7) alert('We have detected that you are using an older browser, for a better user experience please upgrade your browser to IE7 or something totally better altogether like Firefox or Safari, or even Chrome or the PS3 browser for crying out loud.'); @end @*/ </script> |
for more information on Conditional Compilations go Here
For more informatoin on the PS3 Browser go Here
Print This Post
jQuery pngFix
One of the greatest jQuery plug-ins that I have stumbled on has been the pngFix plugin. This fantastic piece of code takes your png images and applies the AlphaImageFilter logic to make ie6 actually display them with the correct transparency (not that nasty gray-ish stuff) When I found it, I was ecstatic, when I first tried it I was overjoyed! Then I tried to develop with it.
While this may be uncommon for most users, it has a severe bug. In fact the bug was mentioned on the creator's blog in the comments by one unfortunate user (Dj) who ran into the same thing I did. The problem arises when you use a png as a clickable object, or even as a background where your clickable object is going to be. As near as I can tell, when the pngFix executes, it grabs all the png files on the page and runs then through the image filter and then slams them back down on the page. On top of all of your links... on top of everything. I tried changing the z-index of my links, I tried changing the png image from a background to an img-tag. Nothing worked. I had almost given up hope (as there was no answer posted on the blog) when I found another site that mentioned the problem. Someone in there (Elbert Oh) had commented that they had found a possible solution and pointed users towards this site for examples.
By using the example site, I ended up with a working solution (this will be deployed in the new ProForm site)
Here is an example of the solution (with the correct code in place)
Here is the header image that will link back to the homepage
Seems simple enough right? Here's the css that I used.
#logo { margin-left: 531px; height: 90px; background: url('images/logo.png') no-repeat scroll 0px 3px; } #logo a { display: block; width: 459px; height: 90px; position: relative; z-index: 1; } #logo a span { display: none; } |
What you should be able to see here is that I set the logo appear on the right side of the page (hence the fatty margin-left). Then I set the height of the object, and finally pointed it to the png image that I'm using as a background (that without the fix would be picked up, filtered, and then slammed back down on top of my clickable area).
I made the link take up the entire image area by making the display a block and setting the width and height to the same dimensions as the image. Then there's the real magic of making this work. setting the position to relative, and then setting the z-index to 1. ((POSSIBLE BS ALERT)) Somehow the positioning gets tweaked when the transparency filter is applied and that is part of the reason for the links becoming unclickable. By setting the position to relative, and then setting the z-index to 1, it forces the image to stay where it is and leaves the links clickable. That may not be what is actually happening, but I think that's what's going on...
Anyway with those small changes, the site* is now working with clickable links and png images in ie6, ie7, Firefox 2, Firefox 3, Safari 3.1, and Opera 9.5 .
*The development site on my local server, not the actual ProForm.com as we have not launched the new site yet 
Print This Post
IE6 sucks
So some of you may have run into this issue before. You've coded your page and it looks fabulous in IE7, IE8 (beta), FF2, FF3 (beta), and even in Safari. Then you crack open your standalone copy of IE6 and notice "ghost text" under one of your divs. It's usually in a header, or near a breadcrumb. You can't believe what you see so you run over the corner and fire up the Windows2000 beast just to make sure it's really happening. It is, welcome to yet another quirk of our least loved browser
Now, thanks to the efforts of International, and Team Awesome (Domestic), we have a solution to this quirky and rather annoying problem.
1 - Make sure that you have your DOCTYPE declared (This worked for Remo)
2 - (this really isn't a fix, but more of a bandaid) add a few 's behind the last text in your sentence.
3 - Throw in an empty span and make it display:inline, so if your original code looks like this:
<div id="breadcrumb-container"> <h1 id="cat-header"><c:out value="${product.description.name}" escapeXml="false" /></h1> <div id="breadcrumb-nav"> <a href="<c:out value="${TopCategoriesDisplayURL}" escapeXml="true" />">Home</a>::<a href="<c:out value="${parentCategoryDisplayURL}" escapeXml="true" />"><c:out value="${parentCategory.description.name}" escapeXml="true"/></a>::<c:out value="${product.description.name}" escapeXml="false" /> </div> </div> |
You need insert the empty span tag in there so your code becomes this:
<div id="breadcrumb-container"> <h1 id="cat-header"><c:out value="${product.description.name}" escapeXml="false" /></h1> <div id="breadcrumb-nav"> <a href="<c:out value="${TopCategoriesDisplayURL}" escapeXml="true" />">Home</a>::<a href="<c:out value="${parentCategoryDisplayURL}" escapeXml="true" />"><c:out value="${parentCategory.description.name}" escapeXml="true"/></a>::<c:out value="${product.description.name}" escapeXml="false" /> </div> <span style="display:inline;"> </span> </div> |
If all goes well, your page should look better (more like this)
Print This Post