Of Transparency and CSS

Tonight’s fight has been with the basic CSS for the site, and the issue of transparency.

On the CSS front, the biggest fights were with the boxes displayed on MSIE versus Firefox. Firefox, as it happens, allows pre elements to “bleed” into other adjacent div containers, which meant that some of the code snippets with long lines bled over, but didn’t prevent the design from working.

MSIE, OTOH, didn’t handle this so gracefully, and resized the parent div to hold the wide pre, which prevented the design from working correctly, scrolling the menu to the bottom of the screen.

Once I finally figured out that that was working thataway, I then discovered that Firefox required a br clear=all before the close of the div container that holds both the content and menu containers. This one drove me nuts, but I finally figured it out, and have it working right.

So, on to transparency. Those of you who looked at the old site know I used MSIE’s features (unsupported by the rest of the browser community) for transparent backgrounds. I wanted to do that for Firefox, too, and began to research it. From what I could see, there were at least three cases to handle.

First was MSIE. I’d tackled that one before, so filter: alpha(opacity=80) made its way back into my CSS.

Mozilla (and, presumably Firefox) required something different for transparency though, so I added -moz-opacity:0.8 to handle those browsers.

And then there was CSS3, which theoretically supports transparency. For it, I added opacity: 0.8.

And, while Firefox performs well with transparency enabled, MSIE acts like a dog. Slow, slow, slow scrolls. I think I remember that the previous incarnation of this site, so I shouldn’t have been surprised.

So, I believe I’ll be keeping the transparency off the pages for a while. It wasn’t a critical design element in the new facelift anyway. And, it’s easy enough to add again, if desired!