cssPlay sample and IE 5.5 /5.01

173 Posts

echaland Reply #1, 18 years, 8 months ago

Hi,
I’ve been playing the the dropdown menu from CSSPlay. Eveything display fine in various browsers including IE 7 and 6, however in IE 5.5 or IE 5.01 sub-menu don’t show up. Does anyone know why?

Also, I’m adding gif for the main menu header. It shows up fine in IE 7 but not in earlier version of IE 6 or 5.5. The gif aren’t displayed. Any help is appreciated as I’d like to write a menu that being supported by various browsers in CSS.
I’ve updated the chunk code "cssplay_parentRow" to add a span parameter since the menu header is comprised of 2 gifs as follow:

.menu ul li:hover a {color:#000066;
background:url(../images/menu_hover_left.gif) no-repeat left top; margin:0; padding:0 0 0 9px;text-decoration:none; float:left;
}

.menu ul li:hover a span{ float:left; display:block; z-index:200; background:url(../images/menu_hover_right.gif) no-repeat right top; padding: 0px 12px 0px 3px;
}

Thank you.

Eric

http://www.chalandsweb.com

2,310 Posts

bunk58 Reply #2, 18 years, 8 months ago

It is possible to get it working in IE5.5, haven’t tried 5.
Here’s the example from the Wayfinder demo
http://www.muddydogpaws.com/development/wayfinder/examples/example-7.html
All the parameters and chunks are there

David

173 Posts

echaland Reply #3, 18 years, 8 months ago

Thanks. I got it working in IE6 but in IE 5.x the submenu don’t show up, only the main menu; I’ve made some changes to the script. See below.

The problem seems to be coming from the following CSS:

/* Display rounded box on the main menu hover */
.menu ul li a:hover {float:left; background: url(../images/menu_hover_left.gif) no-repeat left top;
margin:0; padding:0 0 0 9px; text-decoration:none;
}
. menu ul li a:hover span{ float:left; display:block; background:url(../images/menu_hover_right.gif) no-repeat right top;
padding: 0 12px 0 3px; text-decoration:none;}

When I remove the 2 statement above, the sub-menu shows up but only for the 1 level down. Note that sub-menu show up in IE6. Any idea of what I might be doing wrong?
Thanks again.

Eric.

http://www.chalandsweb.com

2,310 Posts

bunk58 Reply #4, 18 years, 8 months ago

I can’t see any styles for

menu ul li a:hover

in the original CSS Play stylesheet.
The only thing I can suggest is to either :
Use the original stylesheet and then modify it to your needs.
Wait for someone who understands CSS better than me (that would be nearly everyone)

David

173 Posts

echaland Reply #5, 18 years, 8 months ago

Ok, I’ve got everything working now for IE7 and IE 6 but in IE 5.5 only first level sub-menu shows up and in IE 5.01 only the main menu shows up. I’m getting less and less stuff

Here is my CSS when this statement is true <!--[if lte IE 6]> . (Note, this is all based on the dropdown from the sample in Wayfinder)

.menu ul li a.drop, .menu ul li a:visited.drop {display:none;}
.menu ul li a:hover ul li a.drop {display:none;} 
.menu ul li a:hover {color:#000066; background:#0066CC;} /* main menu hover */

/* display dropdown1 while Hover main menu... doesn't work in IE 5.01 */
.menu ul li a:hover ul {
display:block; visibility:visible; background-color:#0066CC;  position:absolute; 
top:35px; left:0; width:116px; border-right:1px solid #000066; border-bottom: 1px solid #000066; 
font-size:11px; line-height:20px; height:20px; padding-left:2px;} 

.menu ul li a:hover {
background:#339900;
}


/*dropdown1 with sub menu2 ... doesn't work in IE 5.5*/
.menu ul li a:hover ul li a.sub {display:block; visibility:visible; background:#0066CC url(../images/arrow.gif) 99px 7px no-repeat; } 
.menu ul li a:hover ul li a.sub:hover {display:block; visibility:visible; background:#0066CC url(../images/arrow_roll.gif) 99px 7px no-repeat;}

.menu ul li a:hover ul li a ul {display:block; visibility:hidden; position:absolute; height:0; width:0;}
.menu ul li a:hover ul li a {display:block; background:#0066CC; color:#FFFFFF; text-align:left;
padding-left: 2px;width: 100px;   height:20px;  line-height:20px; font-size:11px; }

/*selection menu item dropdown 1 and 2 */
.menu ul li a:hover ul li a:hover {display:block;  background:#0066CC; color:#000066;} 

/* dropdown menu 2 */
.menu ul li a:hover ul li a:hover ul {display:block; visibility:visible; position:absolute; left:114px; top:0; 
padding-left:2px; width:100px; 
border-top: 1px solid #FFFFFF;
border-right: 1px solid #000066;
border-bottom: 1px solid #000066;
border-left: 1px solid #FFFFFF;
}

.menu ul li a:hover ul li a:hover ul.left {left:-116px;}

Any help is appreciated as I’m struggling with CSS portability issues.... Thank you.

http://www.chalandsweb.com

173 Posts

echaland Reply #6, 18 years, 8 months ago

IE 5.x does not support :hover on elements other than links <a>, rendering the entire :hover useless. Does any think by using a .htc file and defining my own behavior would fix it?
Thanks.

http://www.chalandsweb.com

☆ A M B ☆
24,524 Posts

sottwell Reply #7, 18 years, 8 months ago

There is a hover behavior .htc file in assets/js that you can use in an IE conditional block in your template head.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

213 Posts

rav3n Reply #8, 18 years, 8 months ago

i have only one reasonable question: who uses ie5.5 or even 5.01 in 2008???
it’s not even 1 % of all browsers used nowadays

☆ A M B ☆
24,524 Posts

sottwell Reply #9, 18 years, 8 months ago

True, but you’d be surprised (or maybe not...) how many job specs require it.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org