Hover not working

jelly46 · July 30, 2011, 12:25pm

Hello to all

Please can you help me with this css as my hover links {text-decoration: underline;} are not working.

Its used within a CMS and for the life of me the hover buttons are not working .

It works differently in IE if you click on link it will undrline after use.

Here is the CSS:

Thanks guys

#wrapper{width: 180px;}

.oNavigationList { margin: 0; padding:0;}
/*.oNavigationItemParent, .oNavigationItemCurrent, .oNavigationItemSibling { list-style-type: none; }*/


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

/*.oNavigationList { margin: 0; padding: 0; }
.oNavigationItemParent, .oNavigationItemCurrent, .oNavigationItemSibling, ul.oNavigationList li { list-style-type: none; }


ul.oNavigationList li span span
{padding:8px 8px 8px 10px; background: url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/menu_bg_left_nav.gif") repeat-y scroll right top #fff; border-right: 6px solid #D1D1D1; border-top: 1px solid #D1D1D1;
display: block; width:92%; }

ul.oNavigationList li  { display: block; width: 100%; overflow: hidden; }*/



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

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; text-decoration: none;} 

/*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 {text-decoration: none;}



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


.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 {}



/*---------------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; }

a.NavigationCurrentLink:link {text-decoration: none ;}
a.NavigationCurrentLink:visited {text-decoration: none ;}
a.NavigationCurrentLink:active {text-decoration: underline;}
a.NavigationCurrentLink:hover {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-path-sibling-outer {}
.snv-path-sibling-inner {}


a.NavigationChildLink:link, a.NavigationChildLink:visited { text-decoration: none !important; }
a.NavigationChildLink:hover, a.NavigationChildLink:active { background: none; text-decoration: underline !important; }

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;}
a.NavigationSiblingLink:link, a.NavigationSiblingLink:visited { text-decoration: none; }
a.NavigationSiblingLink:hover, a.NavigationSiblingLink:active { text-decoration: underline; }


  
/*li.oNavigationItemParent { list-style-type: none; }
.snv-parent-icon { font-size: 1.1em; font-weight: bold; line-height: 1em; padding-right: 3px; }
.snv-parent-outer { display: block; }
.snv-parent-inner { display: block; padding: 2px 5px 2px 5px; }
a.NavigationParentLink:link, a.NavigationParentLink:visited { display: block; text-decoration: none; }
a.NavigationParentLink:hover, a.NavigationParentLink:active {  text-decoration: none; }*/

.oNavigationItemParentPremium { background: Blue; color: Red; }
.oNavigationItemCurrentPremium { background: Green; color: Red; }
.oNavigationItemSiblingPremium { background: Lime; color: Red; font-weight: bold; }
.oNavigationItemChildPremium { background: Yellow; color: Red; font-weight: bold; }

dthoai · July 30, 2011, 1:10pm

Please use following code to make your hover:


a.NavigationPathLink:hover span.snv-sibling-inner { [COLOR="DarkRed"]color:red;[/COLOR] }

ralphm · July 30, 2011, 2:05pm

Hi jelly46,

Yes, dthoai has shown you how you can target those links on hover. Boy, there’s a lot of unnecessary code in there, though. Ideally, find a CMS that doesn’t write code for you.

jelly46 · July 30, 2011, 4:34pm

Thank you, you have saved me thank thank you so much. ;)

jelly46 · July 30, 2011, 4:36pm

Can you be so kind to pint out a the unnecessary code, just a few bits would help. Thanks dude

dresden_phoenix · July 30, 2011, 5:43pm

W/O being able to see the working effect, everything BUT the the outer wrapper ( maybe), the UL, LI’s and A seems unnecessary. There are a lot of superfluous classes… which of course lead to possible specificity issues.

system · July 30, 2011, 8:43pm

why the devil is it in a MAP tag?
get rid of all those span, this isn’t complex enough to warrant their use.
90% of the classes are pointless/redundant bloat.
that disaster of CSS is such a hodge-podge of mis-matching and conflicting targets for the life of me I can’t even figure out what it’s supposed to do.

I don’t know what steaming pile of CMS that came from, but it’s developers need a good swift kick in a particularly vulnerable spot. My advice: throw it out and start over, there is NOTHING worth trying to salvage there.

ralphm · July 30, 2011, 10:20pm

But apart from that, it’s all fine.

Black_Max · July 31, 2011, 4:47am

This is why I continue to advocate hand-coding in the browser. It has its limitations, but man, does it avoid problems like this.

Jason, it almost looks like old FrontPage or MSWord-generated code, just not as horrible.

jelly46 · August 1, 2011, 10:43pm

Dude I agree but i gotta work with what they give me, but its good practice.

Look at this i tried to rework it but now it doesnt work in IE at all



#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; }

system · August 2, 2011, 8:45am

Well… if that train wreck of unneccessary markup is off limits… let’s see… just pretend all the stuff you don’t need doesn’t exist. like the MAP tag (which isn’t even how those WORK!?!), the spans, ANY of the sub-classes except for that “current” one…

Oh are you kidding me… that’s applied to the SPANS?!? FOR WHAT!!!

Seriously, you’ve GOT to gut that markup. For what you are doing in terms of style, there is NO reason for that markup to be more than:


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

If that CMS won’t let you gut the markup down to that, there is something HORRIFICALLY WRONG with it… to the point LITERALLY I’d be considering legal action against it’s creator.

Alright, TRYING to work with the existing markup – I’ll just pretend the crap we aren’t targeting doesn’t exist… let’s see… that % width is just asking for trouble… you’re redeclaring the same values over and over again for christmas only knows what reason…

Uhg, this is such a mess because the CSS isn’t even in the correct order… hence all the !important bull.

Alright, I’ll TRY to do CSS for this tomorrow – really it all has to be thrown out and recoded properly though. As bad as the HTML is, the CSS is worse – but as I always say CSS is only as good as the HTML it’s applied to. why the LI and A couldn’t have been leveraged instead of all those pointless span is beyond me.

Wait, is it supposed to underline or not? It’s declared then re-declared then undeclared then declared with !important so many times targeting the same thing it’s a mess to figure out what any of the elements are even supposed to DO! The .current state shouldn’t even be able to apply itself…

Ok, screw it, you NEED to change the markup to what I have above.

system · August 2, 2011, 8:54am

… and here’s what I’d probably have for CSS – though I’m guessing WILDLY at whatever it is you are trying to accomplish.


.oNavigationList {
	list-style:none;
	margin:0;
	padding:0;
	background:#FFF;
}

.oNavigationList li  {
	background:#FFF url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/menu_bg_left_nav.gif") top right repeat-y;
	border:solid #D1D1D1;
	border-width:1px 6px 0 0;
}

.oNavigationList a {
	display: block;
	padding:8px 8px 8px 10px;
	text-decoration:none;
}

.oNavigationList .current {
	padding-left:6px; /* more padding for the image to fit into */
	background:#FFF url(left_nav_blue_line.gif) center left;
}

.oNavigationList .current a {
	padding-right:12px;
	background:url(blue_left_nav_arrow.gif) center right;
}

.oNavigationList a:active,
.oNavigationList a:focus,
.oNavigationList a:hover {
	text-decoration:underline;
}

Again, that’s for the markup I posted above… and is guessing wildly at what it is you are even TRYING to accomplish. Integrating that with the DISASTER of markup you already have – good luck.

jelly46 · August 3, 2011, 9:05am

hello ralph m thanks for your help.

Basically the rollovers are not working for me the fix that dthoai gave works but does not work in chrome.

I know the mark up is a disaster, but its a CMS system that i have to work with here is the code again.

By any chance can you assist?

My fix works in fifrefox but not chrome or ie

Thanks


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

system · October 8, 2014, 1:20am