The Naked Green

I worked today on tweaking Justicca’s new design. The problem was her blog title was hard to see on top of the cute puppy picture. I figured I could easily make an opaque background behind the title to make the words stand out a bit more.

I found Ove Klykken’s excellent explanation of “CSS Transparency” and quickly had it working. All was good until I checked it out in IE. I was greeted there by a ugly white box covering up the cute puppies. I then proceeded to spend way too much time fumbling around for a solution.

I eventually had to download Ove Klykken’s page and start changing things one by one to mirror Jessica’s site. It wasn’t in the structure, so I started deleting CSS properties one by one. This is when I realized that IE must have the width specified to show opacity. [In fact, I remember something else with a width problem, let me go check. Okay, that was the floating problem and the one problem was actually when I added width. So much for a method to IE’s madness.]

Here is a sample:

The basic html is as follows (I have modified it slightly in the examples):

<div id="header">
  <h4><a href="/gallery/>Train</a></h4>
</div>

This does not work in IE:

#header {
 width: 100px;
 height: 100px;
 background-image: url(trains.jpg);
 border: 2px solid #999999;
 }
#header h4 {
 margin: 0;
 background-color: #ffffff;
 filter:alpha(opacity=60);
 opacity: 0.6;
 -moz-opacity: 0.6;
 }
#header h4 a {
 color: #000000;
 margin-left: 5px;
 }

This works in IE:

#header {
 width: 100px;
 height: 100px;
 background-image: url(/trains.jpg);
 border: 2px solid #999999;
 }
#header h4 {
 width: 100px;
 margin: 0;
 background-color: #ffffff;
 filter:alpha(opacity=60);
 opacity: 0.6;
 -moz-opacity: 0.6;
 }
#header h4 a {
 color: #000000;
 margin-left: 5px;
 }