...
PDA

Hover not working in IE or Chrome

jelly46
08-03-2011, 10:39 AM
Hello to all @ coding forums

I am working on a nav menu and the CMS code whcih is quite bloated (not mine) is not allowing the rollovers to work in IE or chrome.

I didnt write this fat code but i have to work with it.

Please can anyone assist?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper{width: 180px;}

.oNavigationList { margin: 0; padding:0;}



map#oSideNavigationMap { width: 100%; overflow: hidden; display: block; background: #fff; }

/*-------------------------------*/

ul.oNavigationList ul { padding:0; margin:0; } /* this is the list control for the .snv-child */


ul.oNavigationList li { list-style-type: none; padding:0; margin:0; color:#00aeef;}

/*this is to control the main .snv-toplevel-outer and .snv-child list */

ul.oNavigationList li span { display:block; }

ul.oNavigationList :link, ul.oNavigationList:visited , ul.oNavigationList:hover, ul.oNavigationList :active {}



/*-------------------------------*/


.snv-toplevel-outer { padding:8px 8px 8px 8px; background: url(bg_left_nav.gif) repeat-y right #fff; color:#00aeef; border-right: 6px solid #e9e0d7; border-top: 1px solid #e9e0d7;
display: block; margin-left:0;}
.snv-toplevel-inner {}

.snv-toplevel-inner:link { text-decoration: none; }
.snv-toplevel-inner:visited { text-decoration: none; }
.snv-toplevel-inner:hover { text-decoration: underline; }
.snv-toplevel-inner:active { text-decoration: none; }


/*---------------Current Link ---------------- */
li.oNavigationItemCurrent {}
.snv-current-icon { }
.snv-current-outer {padding:8px 0 8px 20px; display: block; background: url(left_nav_blue_line.gif) no-repeat 5% 13px!important; }
.snv-current-inner { background: url(blue_left_nav_arrow.gif) no-repeat 150px!important; color:#999999; }

.snv-current-inner:link { text-decoration: none; }
.snv-current-inner:visited { text-decoration: none; }
.snv-current-inner:hover { text-decoration: underline; }
.snv-current-inner:active { text-decoration: none; }



/*---------------Current Link Children----------------*/
li.oNavigationItemChild { }
.snv-child-icon {}
.snv-child-outer {background: url(bg_left_nav.gif) repeat-y scroll right !important; margin-left:0;}
.snv-child-inner { padding:8px 8px 8px 20px !important;
background: url(left_nav_blue_line.gif) no-repeat 5% 13px!important; border-right: 6px solid #e9e0d7; border-top: 1px solid #e9e0d7; color:#00aeef;}

.snv-child-inner:link { text-decoration: none; }
.snv-child-inner:visited { text-decoration: none; }
.snv-child-inner:hover { text-decoration: underline; }
.snv-child-inner:active { text-decoration: none; }


.snv-path-sibling-outer {}
.snv-path-sibling-inner {}



li.oNavigationItemSibling { }
.snv-sibling-icon { }
.snv-sibling-outer {}
.snv-sibling-inner { padding:8px 8px 8px 8px; background: url(bg_left_nav.gif) repeat-y right #fff; border-right: 6px solid #e9e0d7; border-top: 1px solid #e9e0d7;
display: block; margin-left:0; color:#00aeef;}

.snv-sibling-inner:link { text-decoration: none; }
.snv-sibling-inner:visited { text-decoration: none; }
.snv-sibling-inner:hover { text-decoration: underline; }
.snv-sibling-inner:active { text-decoration: none; }




/* explorer navigation */

</style>






</head>

<body>
<div id="wrapper">
<div id="left-outer">
<div id="left-inner">
<div class="snv-outer">
<div class="snv-inner">
<div class="snv-body">

<map id="oSideNavigationMap"><ul class="oNavigationList"><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/latest-news/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 1</span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/media/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 2</span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/celebrity-support/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 3</span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/e-news-sign-up/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 4</span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/christou-test-page/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 5</span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/parents-and-visitors/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 6 </span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/medical-conditions/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 7 </span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/directions-map-and-parking/" class="NavigationPathLink"><span class="snv-current-outer"><span class="snv-current-inner">Current Link</span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/renal-failure-stories/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 8</span></span></a></li><li class="oNavigationItemPath oNavigationItemPath1"><a href="/gen/news/search/" class="NavigationPathLink"><span class="snv-sibling-outer"><span class="snv-sibling-inner">Link 9</span></span></a></li></ul></map>



</div>
</div>
</div>

</div>
</div>
</div>
</body>
</html>
Deep Thought
08-04-2011, 12:50 AM
I don't see any code that would make anything roll over. The only :hover rules I see is the text-decoration: underline one.
PapaGeek
08-04-2011, 07:53 PM
From what I see on my IE 8, the problem is in the
:link { text-decoration: none; }

The links have a black underscore that is changed to blue with hover.

My rule of thumb is if it doesn't work on all the major browsers, try something else.

I live by the quote by Andrew Tannenbaum in Computer Networks when he wrote:

"The nice thing about standards is that there are so many to choose from."
alykins
08-05-2011, 05:07 AM
what's with all that span crap??? (I know you didn't write it btw)

blow that out... to keep the "styling" the span's are applying do something like

first assign an ID to the parent div


<div class="snv-inner">
<div id="navBar" class="snv-body">

<map...
[code]

then do some CSS
[code]

#navBar li{
padding:8px;
background: url(bg_left_nav.gif) repeat-y right #fff;
border-right: 6px solid #e9e0d7;
border-top: 1px solid #e9e0d7;
display: block;
margin-left:0;
color:#00aeef;
}

#navBar li a:hover {
text-decoration:none;
}


Note: this may be "incomplete" but is a good guide to get you on your way (imo all that span crap is pointless and over complicating things)

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum