Link to home
Start Free TrialLog in
Avatar of djb80
djb80

asked on

CSS style sheet:hover

There are three parts to the tab. A right side, a middle and a left side. I can get every part of the tab to change on hover except the right side.  
What is wrong with the syntax?



div#sidenavhead {
      float: left;
      font-size: 10;
      font-family: Georgia;
      color: #000099;      
}


div#sidenavhead ul {
      top margin:10;
      margin: 0;
      padding: 10;
      list-style: none;
      font-weight: bold;
      color: #000099;      
}


/* inactive tab style */

div#sidenavhead  li{
      float: left;
      background: url("/emr/main/view/images/style02_2_n_right.gif") no-        repeat right top;
      margin: 0;
      padding:0px 8px 0px 0x;
      width: auto;
      color: #000099;      
}


*/THIS IS THE ONE THAT DOESN'T WORK
div#sidenavhead:hover li{
      float: left;
      background: url("/emr/main/view/images/style02_2_s_right.gif") no-repeat right top;
      margin: 0;
      padding:0px 8px 0px 0x;
      width: auto;
      color: #000099;      
}



div#sidenavhead a span{
background-image: url("/emr/main/view/images/style02_2_n_back.gif");
padding:8px 0px 8px 0px;
width:auto;
}

div#sidenavhead a:hover span{
background-image: url("/emr/main/view/images/style02_2_s_back.gif");
padding:8px 0px 8px 0px;
width:auto;
}


div#sidenavhead a {
      display: block;
      padding:8px 6px 8px 14px;
      text-decoration: none;
      color: #000099;
      background: url("/emr/main/view/images/style02_2_n_left.gif") no-repeat left top;
}

div#sidenavhead a:hover {
      display: block;
      padding:8px 6px 8px 14px;
      text-decoration: none;
      color: #000099;
      background: url("/emr/main/view/images/style02_2_s_left.gif") no-repeat left top;
}












/* Active tab style */


div#sidenavhead  #active a {
      
      float: right;
      margin: 0;
      display: block;
      padding:8px 8px 8px 14x;
      text-decoration: none;
            color: #000099;
            background: url("/emr/main/view/images/sideactive_left.gif") no-repeat left top;
}


div#sidenavhead #active a span {

background-image: url("/emr/main/view/images/sideactive_back.gif");

padding:8px 0px 8px 0px;
}


div#sidenavhead #active {
background-image: url("/emr/main/view/images/sideactive_right.gif");

padding:0px 5px 0px 10px;
}
Avatar of trailblazzyr55
trailblazzyr55

do you have a page where we could see this in action? This way we could use your images, test, and be able to tell you where it's going wrong and how to fix it.. otherwise it's a bit more difficult to say exactly whats going wrong..
Avatar of djb80

ASKER

Yes but how could you see it in action without the tabs themselves?

<div id="sidenav">
<div id="sidenavhead" >
                              <ul>
                                    <li id = "active"><a href="#announcement_content"  onclick="new TabToggle3(this); return false;"><span>&nbsp;Announcements&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></a></li>
                                    
                                    <li ><a href= "#request.myself##xfa.staff#"    ><span>Staff Tracking</span></a></li>


                                    <li ><a href="#changepassword_content" onclick="new TabToggle3(this); return false;"><span>&nbsp;Change Password&nbsp;&nbsp;&nbsp;&nbsp;</span></a></li>

                                    <li><a href="#sendmail_content" onclick="new TabToggle3(this); return false;"><span>&nbsp;Email Help Desk&nbsp;&nbsp;&nbsp;&nbsp;</span></a></li>
                                    
                                    <li><a href="#editpage_content" onclick="new TabToggle3(this); return false;"><span>&nbsp;Edit Page&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></a></li>
                                    
                                    <!---<li ><a <cfoutput>lnk="#request.myself#xfa.clinRecs#"</cfoutput> href="#tab9_content" onclick="new TabToggle3(this); return false;"><span>&nbsp;Test Side&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></a></li>
                                    --->
                                    <li ><a <cfoutput>lnk="#request.myself##xfa.changePassword#"</cfoutput> href="#tab9_content" onClick="new TabToggle3(this); return false" ><span>Clinical Records</span></a></li>


                  </ul>
            


</div>


</div>

<cfoutput>testing</cfoutput>
I was wondering if you had a page online already with the CSS you have in your question and tabs you have on your page that aren't appearing correctly. The idea behind it is you can't upload images or anything to this forum, so if you had a page already setup, I could get everything from there and give ya a hand correcting the CSS since your style sheet is calling images as part of your hover over.
Avatar of djb80

ASKER

No, sorry.  Don't have that.  The tabs look great it just that I'm not getting the hover effect on the right most part of the tab.    
*/THIS IS THE ONE THAT DOESN'T WORK
div#sidenavhead:hover li{
     float: left;
     background: url("/emr/main/view/images/style02_2_s_right.gif") no-repeat right top;
     margin: 0;
     padding:0px 8px 0px 0x;
     width: auto;
     color: #000099;    
}

Shouldn't that be?

*/THIS IS THE ONE THAT DOESN'T WORK
div#sidenavhead li:hover{
     float: left;
     background: url("/emr/main/view/images/style02_2_s_right.gif") no-repeat right top;
     margin: 0;
     padding:0px 8px 0px 0x;
     width: auto;
     color: #000099;    
}
Also, another thing to note is that IE doesn't support :hover on anything but the a element...
ASKER CERTIFIED SOLUTION
Avatar of trailblazzyr55
trailblazzyr55

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
you'll notice there's actually three images rather than six, you just slide them into the position you want giving it the affect that the image is swapping, but it's actually just adjusting position. And don't mind the images I used, those were just something quick to demonstrate.