Menu button disappears after visited in IE 6

[Lorel509]

Hi have a vertical fly-out menu that I've used on several websites but this time I added buttons that change on mouseover. This works fine except in IE 6 where the button disappears after the link is visited (there is text floating over the buttons and the text stays there but not the button image). I tried all the image flicker bug fixes to no avail. The button image is actually two images side by side which change on mousover.

I think there is a conflict with the regular links so I added "visited" to relevant menu elements so both menu and links match except for color, etc. This works on the main menu but not the sub menu. Can anyone see what I've done wrong?

Here is the CSS:

/*Reg Links*/
a:link { color: #336699;
font-weight: bold;
background:transparent;
font-size:14px;
text-decoration: none; }
a:visited { color: #336699;
font-weight: bold;
background:transparent;
font-size:14px;
text-decoration: none; }
a:hover { color: #6699cc;
font-weight: bold;
background:transparent;
font-size:14px;
text-decoration: none; }
a:active { color: #6699cc;
font-weight: bold;
background:transparent;
font-size:14px;
text-decoration: none; }



/*********left menu*********/

/*left side bar is 200 px wide over faux col bg*/
.dm1 { font-size: 14px;
width:192px;
margin:0;
padding:2px 2px 10px 4px; }

/*to position text above button*/
/*menu btn img 388 or 194x2 px wide*/
/* ccccff is lav text color on blue button*/
.dm1 .item1,
.dm1 .item1:visited,
.dm1 .item1:hover,
.dm1 .item1:active,
.dm1 .item1-active,
.dm1 .item1-active:hover {
padding: 5px 0 6px 8px;
text-decoration: none;
font-weight:bold;
display: block;
position: relative;
background: transparent url(images/scsmenubtn4.gif) 0 0 no-repeat;
color:#ccccff; }

/* controls horz n vert pos of main image on hover*/
.dm1 .item1:hover,
.dm1 .item1:active,
.dm1 .item1-active,
.dm1 .item1-active:hover {
background: transparent url(images/scsmenubtn4.gif) -196px 0 no-repeat;
color: #ccccff; }

/*sub cat button*/
.dm1 .item2,
.dm1 .item2:visited,
.dm1 .item2:hover {
width:180px;
padding: 4px 8px 4px 8px;
text-decoration: none;
font-weight:bold;
display: block;
white-space: nowrap; }

/*horz n vert controls pos of sub cat button*/
.dm1 .item2,
.dm1 .item2:visited {
background: url(images/scsmenubtn4b.gif) 0 0 no-repeat;
color: #ccccff; }

/* horz n vert controls pos of sub cat button on hover*/
.dm1 .item2:hover {
background: url(images/scsmenubtn4b.gif) -194px 0 no-repeat;
color: #ccccff; }

/*controls sub cat hidden unless on hover*/
.dm1 .section {
position: absolute;
visibility: hidden;
z-index: -1; }

---------Here is part of the Menu HTML ---------

<div class="dm1" id="menu1">
<a class="item1" href="http://www.spokanecomfortsystems.com/furnaces.htm">Furnaces</a>
<div class="section">
<a class="item2" href="http://www.spokanecomfortsystems.com/lennox-furnaces.htm">Lennox Furnaces</a>
<a class="item2" href="http://www.spokanecomfortsystems.com/goodman-furnaces.htm">Goodman Furnaces</a>
</div>
</div>

[Btusk]

I'd check your analytics for the site first. Unless you can see IE6 as a significant percentage of visitors (15% or higher) I'd ignore it.

We're sorely tempted to start putting one of the IE6 killers on all our sites. They just show a message offering to take them to where they can upgrade their browser, or cancel and visit the site anyway.

Last I looked at the stats, IE6 on our sites were in the 7-8% range. Low enough for me to say "no more IE6".

Google "ie6 upgrade message" for theirs. It is pretty simple and nice.

[Btusk]

On a lark I pulled up the stats on 7 of our sites.
Almost all were in the 6-8% range for IE6. One site was at 13%, but it shows them trending down. Looks like in about 6 weeks it will be down to the same area as the rest.

If you compare, make sure you compare IE6 users to the total visitors, not to other IE users. I read an article the other day that talked about how IE6 was still in the 25% range and was pretty sure the writer didn't do the math right.

[jxw]

While I wouldn't do anything special to encourage IE6 users, I would not go out of my way to get rid of them. I am working at an organization with over 400 employees in its home office. We are all stuck with IE6 at the office because of compatiblity problems with newer versions. We cannot upgrade our browser. In the past, I enjoyed looking at some of the sites posted for review, but I encounter problems here that I would not encounter at home. Even though percentages for IE6 are small, you might want to do something if it can easily remedy an IE6 problem. If the IE6 problem cannot be easily remedied, most of us understand and know to wait until we get home -- if we remember.

[luigip]

I don't see a difference between IE6 and FF when visiting your site. Maybee a cache problem with your IE?

[dgswilson]

I too had to make the decision to not fret over IE6. I also made a decision to make my css as simple as possible. I used the - upgrade your version - deal for a while (to be considerate) then dropped that to. I think most IE6 is used by companies who have built there business on IE6 and don't need or want to change. I haven't researched this in depth. I do know several people who browse from work who've said they used IE6. I guess it would be easy to see where the visitors are coming from. This could make the % lower still.

[Lorel509]

Thanks for all the comments on this matter. I didn't get a notice of replys and then got busy and forgot about this post.

@luigip I hope it's a problem with just my browser. I heard this sorth of thing only occurs with webmasters who have IE set to refresh the page every time it's viewed, which I do have.

If IE 6 is slowly phasing out that will be good news for us all. I spend about 1/2 my time working out IE 6 bugs. This site still has 12% of IE 6 users so I hope it's soon.