Posted: Thursday 5th February 2009
Transparency in IE6 – no matter how you do it, or how you tackle it, its always the most annoying part of developing/designing a website. However, getting IE6 to work with transparent PNG backgrounds in CSS is relatively easy, the following code does the trick for most things…
background:transparent;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='/path/to/image.png');
But when it comes to physical images within the HTML itself, it can become a little more tricky. Particularly if those images have specific styles on them such as margin’s, position:absolute, and so-forth. However, after a little searching around and some “hacking”, I found this little chunk of code. I’ve used it for about an hour and checked various things out with it and it looks like it works like a treat!
img, .pngfix { azimuth: expression(
       this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
       this.src = "/img/x.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
       this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
       this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
); }
Put that in your IE6 specific stylesheet, along with an image named x.gif which is transparent, and you’re done 
Posted: Monday 27th October 2008
A little neat trick that I’ve now used a few times at work and for other sites I develop is to always make the footer of the site at the bottom. Easy enough you may think at first, but it must stick to the bottom of the browser window, no matter what size the window is re-sized to, or how much or how little content the page has.
A List Apart has a great tutorial on how to do this, and although a little lengthy, their version 3 example page is good enough to use as a basis for your page.
The methods behind this are simple enough after you’ve studied the code for a few moments. First of all, make sure you contain all of your page in… (including the header/footer, etc)
<div id="container">
Secondly, a very important part of the CSS they provide is …
html, body {
height: 100%;
}
Which forces the height to be 100% of both the HTML and Body tags – note that it must be both! I’ve spent far too long in the past trying to work out why my page wasn’t working when I missed the fact the height 100% was applied to the HTML as well as the Body tag.
From there on, the source code on their page should be easy enough to follow as a guideline. I use their Example 3 since its relatively simple and doesn’t include any Javascript. Although it doesn’t support all browsers, it does support the majority (Firefox, IE’s), and that’s good enough for me
Posted: Wednesday 22nd October 2008
Every so often, at the beginning of a new project at work, I almost always have to add a page-specific stylesheet to a certain page on the project. And usually (almost always it seems) I forget the exact code to enter at the top of the .phtml page.
And I thought I should blog it, so that at least I remember it for future use…
This is for Zend Framework-built sites only, of course, and so long as this is in your <head> section of your bootstrap Index file…
<?php
echo $this->headTitle();
echo $this->headScript();
echo $this->headStyle();
echo $this->headLink();
?>
…Then, on the page we’re talking about, before output on your .phtml file, add the following code
$this->headLink()->appendStylesheet('/path/to/page-styles.css');
Done! So there you are. Some of you might have already known that, maybe some of you have no idea what I’m talking about – but at least I know where to find this damn code again!