IE6 tab content bug


I was trying to implement a simple tab navigation with related content using JavaScript and CSS e.g. :

<div id="disclaimer">
 <div id="disclaimerTitle"><a href="#">Website disclaimer &amp; Internet copyright</a></div>
 <div id="disclaimerText">
  disclaimer Content                    
 </div>                       
 </div>
 <div id="privacy">
 <div id="privacyTitle"><a href="#">Privacy policy</a></div>
 <div id="privacyText">
  privacy text
 </div>                                    
 </div>  

Simple and straightforward enough in all browsers apart from IE6. Whatever I tried doing, the respective content of both tabs would appear regardless of which tab I was on.

I tried all sorts but the solution that worked for me was to do the following. However, first I must say that I was using conditional stylesheets i.e. I had a common style sheet and then had a separate stylesheet for IE6 which would take effect only if the page was being viewed in the latter.

The trick was simply to repeat the off state css information that was in the common stylesheet into the separate IE6 one e.g.:

#disclaimerText.off, #privacyText.off
{
 visibility: hidden;
 display:none;    
}

This simple trick then causes IE6 to behave. I don’t know why there is this need for this duplication but it just works.

At first I thought I had declared the stylesheets in the wrong order and there were styles being overwritten. However, after reviewing the HTML and CSS, that proved not to be the case.


					
Advertisements
Posted in IE6 bug

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: