Hacking around IE6

OK, one think I hate is having specific code just to satisfy the gripes of one particular browser.  Right now that browser is IE 6.  Specifically, IE 6’s (lack) of CSS support.

I was trying to have a transparent div that would cover the screen whenever an AJAX transaction was taking too long.  No problem, this little css class does the trick to my div:

.BackgroundCover {
    background-color:gray;
    opacity:0.8;
    filter: alpha(opacity=80);
    position: fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:10000;
}

 

Visual Studio (2005 and 2008) complains about the opacity and filter tags, but oh well, it works — except on IE 6. 

On IE 6, any div with this class will display correctly horizontally, but not vertically.  So I get a semi-transparent bar stretch left to right across the screen, but not filling the screen.

My solution, on IE 6 is to give up and not display that div.  Seems harsh, but that is what it has come to.  I know there is a JavaScript answer, I could probably wip something up with JQuery (that is what the Ajax Toolkit ModalDialogExtender does) but that is more trouble than this feature is worth.

So how to get rid of it without affecting the other browser (that support that bit of CSS correctly)?   Conditional Comments (and yes, I feel dirty for some reason).

Here is my new html:

<!--[if !IE 6]>
<div id="BackgroundDiv" runat="server" class="BackgroundCover" >
</div>
<![endif]-->
<div class="PleaseWaitPanel" >
    Processing...
    <asp:Image ID="PleaseWaitImage" runat="server" ImageUrl="~/Images/Progress5.Gif" AlternateText="Processing request" />
</div>

The [if !IE 6] detects if the current browser is NOT IE 6, and displays the html inside of it.  Simple as that. I don’t like it, but it does work, and it isn’t overly messy.