menu button disappears after clicking in Win XP IE 6

only in windows

[Lorel]

I can't figure out why the button image in my menu disappears after clicking on it in Windows XP IE 6. It shows up in other browsers. I was working fine until I changed a few things and can't get it working again.

The menu button is actually two buttons side by side so on mousover the other side shows up making it look like it's highlighted (for both active link and hover versions) the hover button is set up opposite of the other so it still looks highlighted.

This code validates both css and html.

I have text floating over the buttons.

The set up is with Faux columns with both left side bar and content floating to the left (which is working). I had to line up the buttons over the Faux column background and within the left side bar.

Does anyone know of a bug that doesn't allow an image to load after it's visited?

Here is the relevant CSS:

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

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

/*to position text above button*/
.dm1 .item1,
.dm1 .item1:hover,
.dm1 .item1-active,
.dm1 .item1-active:hover {
padding: 5px 0 6px 8px;
text-decoration: none;
font-weight:bold;
display: block;
position: relative; }

/*menu btn is 388 or 194x2 px wide*/
.dm1 .item1 {
background: transparent url(images/scsmenubtn4.gif)
0 0 no-repeat;
color: #ccccff; }

/*left margin adjusted as bg was showing*/
.dm1 .item1:hover,
.dm1 .item1-active,
.dm1 .item1-active:hover {
background: transparent url(images/scsmenubtn4.gif)
-196px 0 no-repeat;
color: #ccccff; }

.dm1 .item2,
.dm1 .item2:hover {
width:180px;
padding: 3px 8px 4px 8px;
text-decoration: none;
display: block;
white-space: nowrap; }

.dm1 .item2 {
background: url(images/scsmenubtn4b.gif)
0 0 no-repeat;
color: #ccccff; }

/*left margin adjusted as bg was showing*/
.dm1 .item2:hover {
background: url(images/scsmenubtn4b.gif)
-194px 0 no-repeat;
color: #cccccc; }

.dm1 .section {
position: absolute;
visibility: hidden;
z-index: -1; }

.dm1 .bottom,
.dm1 .bottom:hover { border-style: solid solid solid solid; }

* html .dm1 td { position: relative; } /* ie 5.0 fix */

--------------

Here is a portion of the HTML:

<!-- LEFT MENU -->
<div class="dm1" id="menu1">
<a class="item1" href="widgets1.htm">Widgets 1</a>
<div class="section">
<a class="item2" href="sub-widgets1.htm">Sub Widgets 1</a>
<a class="item2" href="sub-widgets2.htm">Sub Widgets 2</a>
</div>
</div> <!-- END Left menu -->
<br>

[alt131]

I'm not sure I understand the layout considerations, but the image would not display on hover in any browser.
The trouble was the negative positioning:

/*left margin adjusted as bg was showing*/
.dm1 .item1:hover,
.dm1 .item1-active,
.dm1 .item1-active:hover {
background: transparent url(images/scsmenubtn4.gif)
-196px 0 no-repeat;
color: #ccccff; }

[Lorel]

Hi Alt131

The button image is actually doubled (2 images lined up horizontally) with each one being 194 pixels wide so the actual image is 388 x 27 pixels. The way that code works is it picks up the first image on left and the 2nd one on hover which starts farther on the right.

dm1 item 1 starts at left top ( 0 0 )

dm1 item 1 in the hover state starts half way across the image file (or button designed as highlight) (-196 0)
194 pixels plus 2 pixels between the 2 images = 196

I hope that explains it.

[alt131]

I hope that explains it

It did - and sorry for missing what should have been obvious.

Unfortunately even after creating images of the exact size as your originals I can't reproduce the issue. The image displayed as expected, including after inserting styles for :visited, :active and :focus. (So the positive is it isn't producing the issue for all users.)

Some random thoughts (not based in usual logic) that may lead to a solution:
1. Single/double quotes on the background-image paths. I have run into ie6 troubles that were corrected by doing so.
2. Are there rules for :active/:focus (maybe on the #menu1). ie6 treats them as the same, and on returning to a visited page using "back" treats the link as activated - and applies the active/focus style.

[Lorel]

Hi Alt131

I don't use focus but I'm sure you're right about it being a "visited" problem so I added Visited to the code in two places but it didn't have an effect. I even dumped cache and history is Win IE 6 and still the image doesn't show up after the page is visited.

I added "visited" in these two places:

/*to position text above button*/
.dm1 .item1,
.dm1 .item1:hover,
.dm1 .item1-active,
.dm1 .item1-visited,
.dm1 .item1-active:hover {
padding: 5px 0 6px 8px;
text-decoration: none;
font-weight:bold;
display: block;
position: relative; }


/*control margins of main button*/
.dm1 .item1:hover,
.dm1 .item1-active,
.dm1 .item1-visited,
.dm1 .item1-active:hover {
background: transparent url(images/scsmenubtn4.gif)
-196px 0 no-repeat;
color: #ccccff; }

I don't see any point in adding it to the hover button.

The CSS and HTML still validates.

[alt131]

Hi Lorel,

None of this may help at all because I still can't reproduce your issue - and hoped others might post as these things aren't always logical. The (inadequate) best I can offer after an afternoon on this are guesses that you've probably already considered. Maybe they'll stimulate useful ideas.

I even dumped cache and history is Win IE 6 and still the image doesn't show up after the page is visited.

I thought you would, just noting I always use a separate "cache cleaner" programme, and periodically cold (re)boot because ie6 is so troublesome.

I added "visited" in these two places:

Not quite what I was referring to:
dm1 .item1,
.dm1 .item1:hover, <-- this is the :hover pseudo class applied to .dm1 .item1 which was what I meant,
.dm1 .item1-active, <---but this and ...
.dm1 .item1-visited, <--- this are classes for child elements of .dm1 named .item-active, .item1-visited
.dm1 .item1-active:hover <--- this is the :hover pseudo applied to an element classed as item1-active - which doesn't exist in the code sample

Ok, I validated (as 401 strict) and edited the code back to just the problem elements. You don't really need this, but if you see my reasoning it might highlight something:

/*left side bar is 200 px and also faux col*/
.dm1 { font-size: 14px;
width:192px;
margin:0;
padding:2px 2px 10px 4px; }
/*to position text above button*/
.dm1 .item1
/*.dm1 .item1:hover - redundant as declarations will be inherited */
/*.dm1 .item1-active, - class not present in provided html*/
/*.dm1 .item1-active:hover - class not present in provided html*/ {
padding: 5px 0 6px 8px;
text-decoration: none;
font-weight:bold;
display: block;
position: relative;
background: transparent url(lorel1.gif) 0 0 no-repeat; /* on one line as ie6 detests breaks */
color: #ccccff; }
/* removed this rule and set it as the default on item1 above
menu btn is 388 or 194x2 px wide
.dm1 .item1 {
background: transparent url(lorel1.gif)
0 0 no-repeat;
color: #ccccff; } */
/*left margin adjusted as bg was showing*/
.dm1 .item1:hover
/*.dm1 .item1-active, - class not present in provided html*/
/*.dm1 .item1-active:hover - class not present in provided html*/ {
background: transparent url(lorel1.gif) -196px 0 no-repeat;
/*color: #ccccff; */ }
.dm1 .item2
/*.dm1 .item2:hover */ {
width:180px;
padding: 3px 8px 4px 8px;
text-decoration: none;
display: block;
white-space: nowrap;
background: url(lorel2.gif) 0 0 no-repeat;
color: #ccccff; }
/*.dm1 .item2 {
background: url(lorel2.gif) 0 0 no-repeat;
color: #ccccff; } */
/*left margin adjusted as bg was showing*/
.dm1 .item2:hover {
background: url(lorel2.gif) -194px 0 no-repeat;
/*color: #cccccc; */ }
/*.dm1 .section { deleted as was causing position issues, and wasn't part of the problem
position: absolute;
visibility: hidden;
z-index: -1;} */
/*.dm1 .bottom, - class not present in provided html*/
/*.dm1 .bottom:hover { border-style: solid solid solid solid; } */
/** html .dm1 td {position: relative; } ie 5.0 fix - element not present in provided html*/

Which left this:

.dm1 {
font-size: 14px;
width:192px;
margin:0;
padding:2px 2px 10px 4px; }

a.item1, a.item1:visited /*explicitly specified the <a> in case ie was having (illogical) issues with it being classed */ {
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; }

a.item1:hover {background: transparent url(images/scsmenubtn4.gif) -196px 0 no-repeat; }

/* styles used for testing */
a.item1 {border:1px solid red; }
a.item1:hover {border:5px solid fuchsia;}
a.item1:active, a.item1:focus {background:transparent url(images/scsmenubtn4b.gif) 0 0 no-repeat;/*other button forces change*/
border:5px solid lime; }

... and still couldn't reproduce the issue. After trying quoted/un-quoted background-images, different styles (and images) for the link states, no change in styles for the link states, the only issues were caching.

That suggests the issue isn't in this code. As I can't reproduce the disappearance, more random thoughts:

1. A relatively positioned parent may disappear - but in this case there is no parent, and a.item is not disappearing, just the background-image.
   
2. Background-images can get "stuck" on hover, especially when the link has haslayout. The fix is to force the link to be re-drawn. That is already occurring as the image switches from position:0 0 to -196px 0 - and the link doesn't have haslayout anyway.
   
3. Disappearing background-images are said to be cured by adding position:relative. That is already in place.
   

But I have a bad feeling about that relative. It has the benefit of making the entirety of the link "block" clickable, without the need to explicitly set a width and height, but I am sure I've read that a relatively positioned container without haslayout can trigger disappearance. Plus am sure I've read about troubles with a non-positioned parent (in this case the div) with haslayout, plus a relatively positioned element without haslayout (the link).

So I also considered whether this might be some extreme variation on background-image flicker as the right conditions exist (background-repeat and background-position and maybe gifs with transparency). But that issue is resolved on returning to a page after navigating away - exactly the opposite of the issue here.

... So, my best thoughts at this stage are to try:

1. The test css above. then:
   
2. Remove the "for testing" rules. (They brute force a link re-draw, removing them may trigger disappearance and some clues.)
   
3. Remove the :hover rule - because it also forces a redraw.
   
4. Remove the position:relative. (Eradicates any positioning issues)
   
5. Force haslayout=true by setting the width directly on the <a>
   
6. Double check the rest of your css for any rule with higher specificity again(?)
   

My hunch is that either there is something else on this page affecting the element (and or the link state), or that removing the position and setting haslayout=true will give some clues (given the re-positioning of the background-image redraws the link.)

But do let me know if any of this highlights the cause.

[Lorel]

Hi Alt131,

None of the options you suggested worked in IE 6. I also tried several other tricks I found re image flicker which I thought was related.

Putting this tag in the head eliminates image flicker in IE 6 when you run the mouse over the buttons

<meta http-equiv="Page-Enter" content="revealtrans(duration=0.0)">

but that doesn't fix the image disappering after visited problem I'm having.

I've been researching/testing this menu problem almost daily and think I finally have found the cause, but not the solution.

I removed all content from the HTML except the menu and also the CSS bit by bit, except what controlled the menu to isolate the problem. If I take out the regular link controls then the button stays there after I visit the page. So there is something in that part of the code that is messing up the menu buttons. I'll post my updated menu css and also the regular link css below.

If anyone can see a problem in the CSS please let me know.

/*********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:hover,
.dm1 .item1-active,
.dm1 .item1-visited,
.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-visited,
.dm1 .item1-active:hover {
background: transparent url(images/scsmenubtn4.gif) -196px 0 no-repeat;
color: #ccccff; }

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

/*horz n vert controls pos of sub cat button*/
.dm1 .item2 {
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: #cccccc; }

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


------------------
CSS for regular links:

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


-----TEST HTML:--------

<!-- LEFT MENU -->
<div class="dm1" id="menu1">
<a class="item1" href="example1.htm">Example</a>
<div class="section">
<a class="item2" href="example1b.htm">Example 1b</a>
<a class="item2" href="example1c.htm">Example 1c</a>
</div> <!-- END section -->
</div> <!-- END Left menu -->

BTW, I forgot to mention earlier but the Menu1 referred to in the html above refers to a bit of JS at the bottom of the page which draws up the dropMenu1 JS file which controls the hover (if I understand it correctly. I don't write JS so not sure what it does).

<script type="text/javascript">
var dm1 = new DropMenu1('menu1');
dm1.type = "vertical";
dm1.position.left = -1;
dm1.init();
</script>

[alt131]

Wahoo! I've seen it ;)

The style for the "ordinary" links specifies background:none. Because there is no style specified for .dm1 .item1:visited, the "ordinary links" style is applied. It is not so much a case of the image disappearing, as the image being explicitly ordered not to display.

The reason I couldn't reproduce the issue was because the code samples hadn't included the "ordinary links" with that rule. At the same time, the :visited pseudo-class you said you'd added to your code (and that I added to my test sheet) was missing again.

So, using the third code sample finally re-produced the issue for me. Yay!
The fix (for me), is simply adding the :visited pseudo class back in:

dm1 .item1,
.dm1 .item1:visited, <--- add the :visited pseudo class
.dm1 .item1:hover,
.dm1 .item1-active,
.dm1 .item1-visited,
.dm1 .item1-active:hover

Can you try inserting it as above, and let me know if that fixes the issue at your end as well?

[Lorel]

Hi Alt131

Background = none. I was afraid it was a dumb mistake as I couldn't find a solution anywhere and css and html validated.

However, the .dm1 .item1:visited, is already there (next to last line). I put it in there because I know if something (visited) is in the ordinary links it needs to be in other links also (except I totally glossed over background= none).

I reloaded the above changes and the image is still gone unless I refresh the page. I tried background = transparent in ordinary link code, with no change either.

I also tried moving the ordinary link code above the left menu code in css file and that didn't fix it either.

I took the ordinary link code back out of css and it works fine in IE 6.

[alt131]

However, the .dm1 .item1:visited, is already there (next to last line).

Hi lorel, as I said way-back, that is a class, not the the pseudo-class you need
Note the difference:
.dm1 .item1-visited This has a dash (-), so creates a class that will apply to a child of .dm1 with class="item1-visited". There isn't an element with this class in the code snippet
.dm1 .item1:visited This has a colon and will apply to a child of .dm1 with class="item1" when it is in the :visited state - this is what you need because clicking the link means the link is in the :visited state when returning to the page
See Link pseudo-classes [w3.org] for more.
Inserting the :visited pseudo-class certainly made the difference for me. If it didn't for you, then there is something else in the rest of the code that is affecting :visted states (or as I suggested very early on :active or :focus.) Note I am referring to the pseudo-classes (like .dm1 .item1:active, not a created class like .dm1 .item1-active.)

I tried background = transparent in ordinary link code, with no change either.

background [w3.org] is shorthand for all the background properties. "none" isn't actually a permited value, even though it sometimes "works". ("None" is permitted value for background-image.) Given the way you've used "background", I think what you really want is background-color:transparent, or background-color:inherit.
Both worked for me when I used them instead of background:none in the code sample provided.

I also tried moving the ordinary link code above the left menu code in css file and that didn't fix it either.

A good test - and result is as expected. The "ordinary link" code explicitly provides background:none for a:link, a:visited, a:hover, a:active. ie6 is treating that as background-image:none, and that is taking priority over any inherited declarations for .dm1 .item1 when it is in the visited state. (Hence no image being displayed)

What is needed to fix this is to remove the background:none and replace it with a declaration that ie6 does not interpret as meaning background-image:none. Hence my suggestion to use background-color instead.
OR
Eexplicitly set a background-image on .dm1 .item1 when it is in the :visited state - which is achieved by using the selector .dm1 .item1:visited (Note the colon, not the dash - you need the pseudo-class)

I took the ordinary link code back out of css and it works fine in IE 6.

Yup, because doing so removes

a:link, a:visited {
...background: none; ...}

With that out of the code ie6 does not see a rule that it interprets as a:visited {background-image:none} - or "don't display a background-image". That means .dm1 .item1 inherits (and displays) the background-image when it is in the :visited state - even if .dm1 .item1:visited hasn't been explicitly stated.

Lorel, this has been difficult for me because I am talking to a senior member and did not wish to seem be telling you to "suck eggs" (if that phrase means anything where you are). But I think a big distraction in getting to the source of the problem is that you seem to be treating selectors like:
.dm1 .item1-active,
.dm1 .item1-visited,
as if they would produce the same outcome as
.dm1 .item1:active,
.dm1 .item1:visited,
When they won't: The first pair creates a class that will only apply to an element with class="item1-visited" (and doesn't exist in the code sample). The second pair is what is needed here - a pseudo class that applies when a link with the class="item1" is in the :active or :visited state.

Anyway, would you be kind enough to try my two suggestions above and let me know if fix the issue? If not, then I can only suggest you post more code as there must be something else (in addition to the code for the "ordinary links") that is affecting the .item1 links when in the :visited state.

[Lorel]

Hi Alt131

Sorry, I didn't notice the hyphen in there. WebmasterWorld comes in very small print and I just didn't notice the difference.

Thanks for taking the time to help.

It's working now.

[Lorel]

I found a couple more bugs -- the sub menu buttons were picking up the darker blue visited color of text from regular links, even though I had it set for a light lavender on every button in the menu so I took "visited" out of regular links. I made a few other minor tweaks.

Here is the final CSS that works:


/*Reg Links*/
a:link, { color: #336699;
font-weight: bold;
background-color: none;
font-size:14px;
text-decoration: none; }
a:hover, a:active { color: #6699cc;
font-weight: bold;
background-color: none;
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-visited,
.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:visited,
.dm1 .item1:hover,
.dm1 .item1:active,
.dm1 .item1-active,
.dm1 .item1-visited,
.dm1 .item1-active:hover {
background: transparent url(images/scsmenubtn4.gif) -196px 0 no-repeat;
color: #ccccff; }

/*sub cat button*/
.dm1 .item2,
.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 {
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; }

[alt131]

Hi Lorel,

Wahoo! soooooo pleased it's now working :) Thanks so much for letting me know - had me really puzzled.

WebmasterWorld comes in very small print.

... ah yes, the shrinking text effect. Newspapers, road signs, television captions, and recently WebmasterWorld as well ... hoping it's a design fad that will pass in a few years ;)