Posts Tagged ‘filter:alpha’

background:transparent and filter:alpha in Internet Explorer

I’ve previously expressed dissatisfaction w/ the look of my homepage but apparently there were functional issues as well. I never did a thorough test of the page in IE (either version 6 or 7), just a quick glance to see that the layout was correct, this bit of carelessness bit me in the ass as I’ve recently discovered the links weren’t working in IE.

The problem was the result of IE not allowing background:transparent AND filter:alpha on the anchor elements. Having both breaks the behavior of the elements (i.e. they don’t function like links and you can’t click on them). I needed the filter attribute for the translucency effect, so my fix was to simply use a 1×1 transparent gif for the needed transparent background.

background filter issue pic

oh, and these links are somewhat weird. They have no content, they’re just empty block elements absolutely positioned on top of their parent div (whose background image contains the text identifying the link’s function to the user). When hovered over, their background changes to a image that gives them a border. When clicked, their background changes to black and opacity decreases so it’s a translucent shade over the parent div. When unselected (i.e. another link is clicked), they have to go back to being transparent where the user sees right through to the parent div.