Subscription: Absolutely free!

To Be Read

September 27, 2007

Transparent Borders

I have had the unfortunate task of styling a template with very limited control over the structure. This is usually not a huge problem, but the navigation has plagued me. I’m using a Son of Suckerfish dropdown menu system, which I’ve then had to use border-top and border-bottom for perfect alignment.

It looks just fine in every browser except (drumroll) IE6. Of course. Apparently IE6 doesn’t understand border-color: transparent. This is a problem when you’re using borders for alignment. I know, I know, why not use margins? Browser compatibility, unfortunately.

So first thing’s first: how do we solve the border transparency issue? IE Visual Filters. I had never heard of this before my research. It really doesn’t look like anything I’d want to learn, but under the circumstances it gets the job done.

ul li ul
{
_border-color: white;
_filter: chroma(color=white);
}

On the first line, include an unused color. The second line removes said color and, like magic, gives you transparent borders.

As always, the plot thickens. Something very odd happened to the text afterwards. It became chunky. Best way to describe it. It was basically non-legible. And that’s not good. Luckily there’s another workaround, first posted here.

ul li ul a { background: white; }

(Don’t need to tell ya to filter these styles specifically for IE6)

Setting the background to a specific color clears up the text bug. In my test, the background stays transparent (as originally set up). A happy fix without further issues. Also, note that I added the background style to the <a> tag within the list. The fix seems to work when added to a child of the parent selector. I have not tried adding this style to the original list.

I’m still testing, but as far as I can tell there are no further bugs. If you happen to come across anything else, let me know.

Clamoring






    
Body:

Preview

Somebody Might Say: