homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Hover not working

 12:48 pm on Jul 30, 2011 (gmt 0)

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



 7:27 pm on Jul 30, 2011 (gmt 0)

:: peering into crystal ball, which is smaller than code ::

Something is overlapping the part you're trying to hover over, so the element doesn't detect the hover. An easy diagnostic, used even by grownups, is to add something like {border: 1px solid red;} to everything in your CSS. Sometimes you have to go back and make the borders a few different colors so you can see what's what.


 9:32 pm on Jul 30, 2011 (gmt 0)

Sans the HTML calling the CSS, it's a tad difficult, but I second lucy24 above... but before that, I'd start with Zero (comment out all) then add one at a time (clearing cache each time) to see where the critter fails.


 12:32 am on Aug 3, 2011 (gmt 0)

I am reading your css and hope you copy pasted it. I see little gaps here and there between the selector and ':' be aware that can lead to broken rules. I also think that some elements may overlap. Try using WebDeveloper toolbar Ctrl+Shift+F will make it easy to identify which element you hover exactly.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved