Unread 01-03-2008, 02:21 AM
Perdue Perdue is offline
Junior Member
Join Date: Jan 2008
Posts: 4
  #1  
Default Hover issue in Internet Explorer

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?
Reply With Quote
Unread 01-03-2008, 05:01 AM
Admin
Posts: n/a
  #2  
Default

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

Thanks

Admin
Reply With Quote
Unread 01-03-2008, 01:08 PM
Perdue Perdue is offline
Junior Member
Join Date: Jan 2008
Posts: 4
  #3  
Default

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.
Reply With Quote
Unread 01-09-2008, 02:46 AM
Perdue Perdue is offline
Junior Member
Join Date: Jan 2008
Posts: 4
  #4  
Default

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)
Reply With Quote
Unread 01-09-2008, 02:47 AM
Perdue Perdue is offline
Junior Member
Join Date: Jan 2008
Posts: 4
  #5  
Default

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>
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 01:49 AM.


Powered by vBulletin® Version 3.0.1
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.