Hover issue in Internet Explorer

Perdue · 01-03-2008, 02:21 AM

Using the vertical flyout menu, there is an issue in Internet Explorer with nav items losing their hover status when the mouse rolls off the text. It doesn't happen on this forum page, but it does happen on the demo page for the Home button, among others. Any suggestions?

01-03-2008, 05:01 AM Admin Posts: n/a #2

Which version of IE are you using? I'm not aware of any issues, but would be glad to re-check / test.

Thanks

Admin

Perdue · 01-03-2008, 01:08 PM

I'm having the problem in both IE 7 and IE 6. At first I assumed it must have been some modification I'd made to the template, but the problem is also present using the demo template in an unedited version of the original download. If you go here: http://www.tinyqueen.com/udm4/udm4/template.html you can see it on the Home and the About links. If you move your cursor too far to the right, it loses its hover. On the site I'm using it on, this is happening on all of the links.

Perdue · 01-09-2008, 02:46 AM

Well this is interesting. I made a few changes to the css file, and now it's working. I don't know how what I changed made a difference, but here's the before and after code.

Before:

Code:

<style type="text/css">
/*Set default margins*/
*{margin:0;padding:0}
form{margin:5px 0}
p{margin:5px 0}
body{background:#fff;font-family:verdana,arial,helvetica,sans-serif;font-size:12px;color:#727272;margin:10px 0;padding:0;text-align:center;}
#wrapper{width:970px;margin:0 auto;text-align:left}
/*Header layout*/
#header{height:79px}
#header img{border:none}
.logo {width:225px;height:79px;float:left}
.button1{float:right;margin-right:20px}
.button2{float:right}
#topnav1{text-align:right;border-bottom:1px solid #212f52;padding-bottom:5px}
#topnav1 a{margin:0 10px;color:#212f52;text-decoration:none;text-transform:uppercase;font-size:80%}
#topnav1 a:hover{text-decoration:underline}
#topnav2{background:#212f52;color:#fff;width:100%;height:50px;margin-top:1px}
#topnav2 a{display:block;width:19.5%;margin:15px 0;float:left;color:#fff;text-decoration:none;text-align:center;border-right:1px solid white;font-size:14px;font-weight:bold}
#topnav2 a:hover{text-decoration:underline}
#topnav2 a.right{border:none}

/*--Create the horizontal popout menu--*/
#navbar {width:20%;float:left}
#navbar h1,#navbar h2,#navbar h3,#navbar h4 {font-size: 90%;}
.udm,.udm li,.udm ul{margin:0;padding:0;list-style-type:none;}
.udm{margin:20px 0;position:relative;left:0;top:0;z-index:20000;width:190px;cursor:default !important;border:none;text-align:left;}
.udm{position:static;padding-left:0;padding-top:0;}
.udm li{display:block;width:190px;position:static;}
@media Screen,Projection{:root .udm/**/[class="udm"] li{position:relative;}}
@media Screen,Projection{:root .udm/**/[class="udm"] ul li{position:relative;}}
.udm li a{position:relative;display:block}
.udm li{margin-bottom:1px;}
.udm ul li{margin-bottom:0;}
.udm ul a{margin:0;}
.udm ul li{margin-top:-1px;}
.udm ul li:first-child{margin-top:0px;}
.udm ul{background:#fff;cursor:default !important;width:190px;height:auto;position:absolute;z-index:20100;padding:2px;}
.udm ul li{cursor:default !important;width:100%;position:static;float:none;}
.udm ul{display:none;visibility:hidden;}
html/**/[xmlns] .udm u\l{display:block;visibility:visible;height:0;overflow:scroll;left:-10000px;}
@media screen,projection{* html .udm ul {display:block;visibility:visible;height:0;overflow:scroll;top:-10000px;}}
ul.udm/**/[class^="udm"] u\l{display:block;visibility:visible;height:0;overflow:visible;left:-1000em;}
.udm a .udmA{visibility:hidden;margin:0 9px;display:block;cursor:pointer !important;position:absolute;right:0;top:0;text-align:right;border:none;cursor:inherit !important;}
.udm a .udmA img{display:block;}
.udm ul a .udmA{margin:0 5px;}
* html .udm a .udmA{right:1px;top:1px;}
* html .udm ul a .udmA{right:1px;top:1px;}
.udm .udmS{margin-left:2px;margin-top:2px;}
.udm .udmS{cursor:default !important;position:absolute;z-index:20050;width:auto;height:auto;left:0px;top:0px;display:none;filter:alpha(opacity=50);}
.udm a,.udm a:link{background-image:none;background-color:#fff;cursor:pointer !important;z-index:1000;text-align:left;border-bottom: 1px dotted #212f52 ;padding: 5px 9px; !important;padding-bottom:5px !important;text-decoration:none;color:#727272;font-weight:bold !important;}
.udm a.bottom,.udm a.bottom:link{border-bottom:none}
.udm a,.udm a.nohref{font-size:90%;}
.udm a .udmA,.udm a:link .udmA,.udm a.nohref .udmA{font-weight:bold !important;}
.udm li a,.udm li a:link,.udm li a.nohref,.udm li a:visited{letter-spacing:1px !important;}
.udm li a:visited{background-color:#fff;color:#727272;}
.udm li a.udmR,.udm li a.udmY,.udm li a.udmR:visited,.udm li a.udmY:visited,.udm li a:hover,.udm li a:focus,.udm li a.nohref:hover,.udm li a.nohref:focus{background-color:#9f9f9f;text-decoration:none;color:#000;}
.udm a.nohref{background:#eee;cursor:text;text-align:center;border:none;}
.udm li a.nohref:hover{background:#eee;color:#727272}
* html .udm li a:active{background:#9f9f9f;text-decoration:none;color:#000;}
.udm ul a,.udm ul a:link,.udm ul a.nohref{background-color:transparent;text-align:left;border-bottom:1px dotted #212f52;padding:5px 5px !important;padding-bottom:5px !important;text-decoration:none;color:#727272;font-size:90%;font-weight:bold !important;}
.udm ul a.bottom,.udm ul a.bottom:link,.udm ul a.nohref{border-bottom:none}
.udm ul a .udmA,.udm ul a:link .udmA,.udm ul a.nohref .udmA{font-weight:bold !important;}
.udm ul li a:visited,* html .udm ul li a:visited{background-color:transparent;font-style:normal;}
.udm ul li a.udmR,.udm ul li a.udmY,.udm ul li a.udmR:visited,.udm ul li a.udmY:visited,.udm ul li a:hover,.udm ul li a:focus,.udm ul li a.nohref:hover,.udm ul li a.nohref:focus,.udm ul li a:visited:hover{background-color:#9f9f9f;text-decoration:none;color:#000;}
* html .udm ul li a:active{background-color:#9f9f9f;text-decoration:none;color:#000;}
.udm a.nohref,.udm ul a.nohref{cursor:default !important;}
.udm h1,.udm h2,.udm h3,.udm h4,.udm h5,.udm h6{width:100%;}
@media screen,projection{* html .udm li{display:inline;}}
@media screen,projection{* html .udm li,* html .udm ul li{display/**/:block;float/**/:left;}}
ul[class$="udm"].udm li,ul[class$="udm"].udm ul li{display:block;float:left;}
ul[class$="udm"].udm:not([class="xxx"]) li{float:none;}
ul[class$="udm"].udm:not([class="xxx"]) ul li{float:none;}
@media all and (min-width:0px){ul[class$="udm"].udm li{float:none;}}
@media all and (min-width:0px){ul[class$="udm"].udm ul li{float:none;}}
select{visibility:visible;}
.udm .udmC{position:absolute;left:0;top:0;z-index:20020;width:auto;height:auto;filter:alpha(opacity=0);}

/*General layout*/
#content{}
#contentinner{padding:5px 0}

/*Footer stylings*/
#footer{clear:both;padding-top:15px;text-align:center;color:#212f52}
#footer a{color:#212f52}
#footer p{font-size:80%;color:#727272}
</style>

(After code in next post -- too many characters)

Perdue · 01-09-2008, 02:47 AM

After:

Code:

<style type="text/css">
/*Set default margins*/
*{margin:0;padding:0}
form{margin:5px 0}
p{margin:5px 0}
body{background:#fff;font-family:verdana,arial,helvetica,sans-serif;font-size:12px;color:#727272;margin:10px 0;padding:0;text-align:center;}
#wrapper{width:970px;margin:0 auto;text-align:left}
/*Header layout*/
#header{height:80px}
#header img{border:none}
.logo {width:245px;height:80px;float:left}
.button1{float:right;margin-right:20px}
.button2{float:right}
#topnav1{text-align:right;border-bottom:1px solid #212f52;padding-bottom:5px}
#topnav1 a{margin:0 10px;color:#212f52;text-decoration:none;text-transform:uppercase;font-size:80%}
#topnav1 a:hover{text-decoration:underline}
#topnav2{background:#212f52;color:#fff;width:100%;height:50px;margin-top:1px}
#topnav2 a{display:block;width:19.5%;margin:15px 0;float:left;color:#fff;text-decoration:none;text-align:center;border-right:1px solid white;font-size:14px;font-weight:bold}
#topnav2 a:hover{text-decoration:underline}
#topnav2 a.right{border:none}

/*--Create the horizontal popout menu--*/
#navbar {width:20%;float:left}
#navbar h1,#navbar h2,#navbar h3,#navbar h4 {font-size: 90%;}
.udm,.udm li,.udm ul{margin:0;padding:0;list-style-type:none;}
.udm{margin:20px 0;position:relative;left:0;top:0;z-index:20000;width:190px;cursor:default !important;border:none;text-align:left;}
.udm{position:static;padding-left:0;padding-top:0;}
.udm li{display:block;width:190px;position:static;}
@media Screen,Projection{:root .udm/**/[class="udm"] li{position:relative;}}
@media Screen,Projection{:root .udm/**/[class="udm"] ul li{position:relative;}}
.udm li a{position:relative;display:block}
.udm li{margin-bottom:1px;}
.udm ul li{margin-bottom:0;}
.udm ul a{margin:0;}
.udm ul li{margin-top:-1px;}
.udm ul li:first-child{margin-top:0px;}
.udm ul{background:#fff;cursor:default !important;width:190px;height:auto;position:absolute;z-index:20100;padding:2px;}
.udm ul li{cursor:default !important;width:100%;position:static;float:none;}
.udm ul{display:none;visibility:hidden;}
html/**/[xmlns] .udm u\l{display:block;visibility:visible;height:0;overflow:scroll;left:-10000px;}
@media screen,projection{* html .udm ul {display:block;visibility:visible;height:0;overflow:scroll;top:-10000px;}}
ul.udm/**/[class^="udm"] u\l{display:block;visibility:visible;height:0;overflow:visible;left:-1000em;}
.udm a .udmA{visibility:hidden;margin:0 9px;display:block;cursor:pointer !important;position:absolute;right:0;top:0;text-align:right;border:none;cursor:inherit !important;}
.udm a .udmA img{display:block;}
.udm ul a .udmA{margin:0 5px;}
* html .udm a .udmA{right:1px;top:1px;}
* html .udm ul a .udmA{right:1px;top:1px;}
.udm .udmS{margin-left:2px;margin-top:2px;}
.udm .udmS{cursor:default !important;position:absolute;z-index:20050;width:auto;height:auto;left:0px;top:0px;display:none;filter:alpha(opacity=50);}
.udm a,.udm a:link{background-image:none;background-color:#fff;cursor:pointer !important;z-index:1000;text-align:left;border-bottom: 1px dotted #212f52;padding: 5px 9px; !important;padding-bottom:5px !important;text-decoration:none;color:#727272;font-weight:bold !important;}
.udm a.bottom,.udm a.bottom:link{border-bottom:none}
.udm a,.udm a.nohref{font-size:90%;}
.udm a .udmA,.udm a:link .udmA,.udm a.nohref .udmA{font-weight:bold !important;}
.udm li a,.udm li a:link,.udm li a.nohref,.udm li a:visited{letter-spacing:1px !important;}
.udm li a:visited{background-color:#fff;color:#727272;}
.udm li a.udmR,.udm li a.udmY,.udm li a.udmR:visited,.udm li a.udmY:visited,.udm li a:hover,.udm li a:focus,.udm li a.nohref:hover,.udm li a.nohref:focus{background-color:#9f9f9f;text-decoration:none;color:#000;}
.udm a.nohref{background:#eee;cursor:text;text-align:center;border-top: 1px dotted #212f52;color:#990000;height:25px;line-height:25px}
.udm li a.nohref:hover{background:#eee;color:#990000}
* html .udm li a:active{background:#9f9f9f;text-decoration:none;color:#000;}
.udm ul a,.udm ul a:link,.udm ul a.nohref{background-color:transparent;text-align:left;border-bottom:1px dotted #212f52;padding:5px 5px !important;padding-bottom:5px !important;text-decoration:none;color:#727272;font-size:90%;font-weight:bold !important;}
.udm ul a.bottom,.udm ul a.bottom:link,.udm ul a.nohref{border-bottom:none}
.udm ul a .udmA,.udm ul a:link .udmA,.udm ul a.nohref .udmA{font-weight:bold !important;}
.udm ul li a:visited,* html .udm ul li a:visited{background-color:transparent;font-style:normal;}
.udm ul li a.udmR,.udm ul li a.udmY,.udm ul li a.udmR:visited,.udm ul li a.udmY:visited,.udm ul li a:hover,.udm ul li a:focus,.udm ul li a.nohref:hover,.udm ul li a.nohref:focus,.udm ul li a:visited:hover{background-color:#9f9f9f;text-decoration:none;color:#000;}
* html .udm ul li a:active{background-color:#9f9f9f;text-decoration:none;color:#000;}
.udm a.nohref,.udm ul a.nohref{cursor:default !important;}
.udm h1,.udm h2,.udm h3,.udm h4,.udm h5,.udm h6{width:100%;}
@media screen,projection{* html .udm li{display:inline;}}
@media screen,projection{* html .udm li,* html .udm ul li{display/**/:block;float/**/:left;}}
ul[class$="udm"].udm li,ul[class$="udm"].udm ul li{display:block;float:left;}
ul[class$="udm"].udm:not([class="xxx"]) li{float:none;}
ul[class$="udm"].udm:not([class="xxx"]) ul li{float:none;}
@media all and (min-width:0px){ul[class$="udm"].udm li{float:none;}}
@media all and (min-width:0px){ul[class$="udm"].udm ul li{float:none;}}
select{visibility:visible;}
.udm .udmC{position:absolute;left:0;top:0;z-index:20020;width:auto;height:auto;filter:alpha(opacity=0);}

#navbar div {border-top: 1px dotted #212f52;border-bottom: 1px dotted #212f52;margin:20px 5px 20px 0;padding:5px 10px}
#navbar div h1 {color:#990000;}
#navbar p {margin:5px 10px}
/*General layout*/
#content{margin-left:20%}
#contentinner{padding:5px 0}

/*Category landing pages*/
.subcategories{text-align:center}
.subcategories div{width:200px;text-align:center;float:left}

/*Category page product layout*/
div.product {min-height: 160px; }
div.product img {float: left; width:130px; height: 130px;}

/*Footer stylings*/
#brand {clear:both;margin-top:15px;border-bottom:23px solid #666;padding-bottom:20px;text-align:center}
#brand h1 {color:#fff;background:#666;padding:5px 20px;margin-bottom:20px;font-weight:normal;font-size:150%;text-align:left}
#brand img {width:190px;height:60px;border:none}
#footer{clear:both;padding-top:15px;text-align:center;color:#212f52}
#footer a{color:#212f52}
#footer p{font-size:80%;color:#727272}

/*General stylings*/
.small {font-size:85%}
</style>

Home

About

Demos

Download

Purchase

Support

Contact

Forum

Blog