Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hover not working in IE or Chrome

    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?

    Code:
    <!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>

  • #2
    New Coder
    Join Date
    Aug 2011
    Location
    The Universe
    Posts
    34
    Thanks
    0
    Thanked 11 Times in 11 Posts
    I don't see any code that would make anything roll over. The only :hover rules I see is the text-decoration: underline one.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post
    From what I see on my IE 8, the problem is in the
    Code:
    :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."

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,742
    Thanks
    41
    Thanked 191 Times in 190 Posts
    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
    [code]

    <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)

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •