dustincaruso.com » CSS http://dustincaruso.com custom web app development Mon, 29 Mar 2010 11:44:01 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 IE CSS hacks http://dustincaruso.com/css/ie-css-hacks/ http://dustincaruso.com/css/ie-css-hacks/#comments Sat, 24 Nov 2007 17:20:16 +0000 admin http://dustincaruso.com/2007/11/24/ie-css-hacks/ In my web developing adventures, I’ve come across one definite truth – Internet Explorer is a big pain in the ass. Version 7 has come a long way from version 6, but it is still a bit quirky. Seeing as how I write code in a text editor (Coda is my tool of choice), I can plug away all day long writing standards-compliant code knowing that when I go to view it in a a GOOD browser like Safari or Firefox, everything will look the way that I had intended. I also know that when I go to open the page in IE, there’s always going to be some sort of surprise. I have gotten good at re-writing things so that they render similarly in ALL browsers – meaning – you can write code that IE won’t mess up and still get the desired effect in Safari and Firefox – but every once in a while that solution is out of reach. When I hit that roadblock, there are two favorite CSS hacks in my goodie bag…


/* IE6 and below */
* html #myId { }

/* IE7 */
*:first-child+html #myId { }

 
Both of the hacks above are valid CSS, so no worries with messing up your page validations using these. Important note – always try everything you can to NOT use these first, and make these a last resort. You’ll be a better coder because of it.

 

]]> http://dustincaruso.com/css/ie-css-hacks/feed/ 0 Transparent PNGs in IE6 http://dustincaruso.com/xhtml/pngs-in-ie6-and-below/ http://dustincaruso.com/xhtml/pngs-in-ie6-and-below/#comments Fri, 23 Nov 2007 23:39:50 +0000 admin http://www.dustincaruso.com/?p=3 Everybody knows that IE versions 5.5 and 6 cannot render a PNG image with alpha transparency correctly. The result is a visible “box” around the image highlighting what is supposed to be the transparent part. In the past I had used the “IE7″ JavaScript that i had found on the web before IE7 was actually released. It involved including a JavaScript file in the header of your page that was responsible for post-processing all PNGs on the page just after page load using Microsoft’s proprietary IE filter: AlphaImageLoader. While that method works fine if you have a webpage or website with many PNG images, I thought I’d share a quicker way to do it inline, should you ever have the need to deal with just a single PNG. This quick little piece of code will write PNGs into your webpage in such a way that Internet Explorer below version 7 will “draw” the image properly with full alpha transparency.

In order to do this we will actually write the image into the page twice – once for IE6 and below, and again for all the other browsers. Here we go…
 

1 – create a 1 pixel by 1 pixel transparent GIF image and drop that in your images directory (i usually name it “spacer.gif”).

2 – here’s the XHTML to put in the <body> of your document…


<!--[if lt IE 7]>
<img id="ie6image" src="spacer.gif" alt="" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myimage.png', sizingMethod='image');" />
<![endif]-->

<img id="theimage" src="myimage.png" alt="" />

 
* notice how we write the image the first time using Microsoft’s Alpha Image Loader – and how this is wrapped inside IE conditional comments which basically say “if the browser is IE version less than 7″ – then we write the image again the “normal” way for all other browsers.
 

3 – here’s the CSS to put in the <head> of your document or external stylesheet…


#theimage, #ie6image {
     width: 100px;
     height: 100px;
     border: 0px;
}

* html #theimage {
     display: none;
}

 
* the second style above is the popular * html CSS hack that only IE version 6 or lower will read – telling those browsers to not display the second image.
 

And there you have it – a relatively simple way to solve the problem of alpha transparency in older versions of Internet Explorer. The best part about this approach is that it uses no JavaScript – just standards-compliant XHTML and CSS.

 

]]> http://dustincaruso.com/xhtml/pngs-in-ie6-and-below/feed/ 0