Redesign time
Most of my work is Web Standards related and here I explain some issues and techniques regarding redesign.
Why my CSS does not validate | 10.12.2004
I know how to produce standards compliant markup and CSS, but I do not want standards to restrict my creativity. I Use some non-standard methods to do small trickery to make Internet Explorer to display my design as in more standards coherent browser.
The problem
This site www.lasselarvanko.com has liquid height navigation element that has transparent background over large background image. As the navigation text is scalable, the background must stretch accordingly.
Screen shot of navigation element
This is easily done in most browsers with this:
/* navigation
---------------------------*/
#nav-main, #nav-section {
margin: 0;
height: 1.5em;
background: transparent url(../i/1x1-bg.png);
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}
This is enough to handle the styling in modern standards compliant browsers. However Internet Explorer has problems in displaying PNG transparency
Luckily there is simple solution. Using proprietary filter property in the CSS so that only IE recognises it:
* html #nav-main , * html #nav-section { /* Disclaimer: this does not validate! */
background-image: none;
filter: progid:DXImageTransform.Microsoft. AlphaImageLoader(src="1x1-bg.png", sizingMethod="scale");
}
To read more about this technique go and read The Man In Blue explain it thoroughly.