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.g if") 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.g if") 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.gi f");
padding:8px 0px 8px 0px;
width:auto;
}
div#sidenavhead a:hover span{
background-image: url("/emr/main/view/images /style02_2 _s_back.gi f");
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.gi f") 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.gi f") 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 /sideactiv e_left.gif ") no-repeat left top;
}
div#sidenavhead #active a span {
background-image: url("/emr/main/view/images /sideactiv e_back.gif ");
padding:8px 0px 8px 0px;
}
div#sidenavhead #active {
background-image: url("/emr/main/view/images /sideactiv e_right.gi f");
padding:0px 5px 0px 10px;
}
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
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
margin: 0;
padding:0px 8px 0px 0x;
width: auto;
color: #000099;
}
div#sidenavhead a span{
background-image: url("/emr/main/view/images
padding:8px 0px 8px 0px;
width:auto;
}
div#sidenavhead a:hover span{
background-image: url("/emr/main/view/images
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
}
div#sidenavhead a:hover {
display: block;
padding:8px 6px 8px 14px;
text-decoration: none;
color: #000099;
background: url("/emr/main/view/images
}
/* 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
}
div#sidenavhead #active a span {
background-image: url("/emr/main/view/images
padding:8px 0px 8px 0px;
}
div#sidenavhead #active {
background-image: url("/emr/main/view/images
padding:0px 5px 0px 10px;
}
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..
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_conten t" onclick="new TabToggle3(this); return false;"><span> Announ cements&nb sp; & nbsp;  ; &nb sp;</span> </a></li>
<li ><a href= "#request.myself##xfa.staf f#" ><span>Staff Tracking</span></a></li>
<li ><a href="#changepassword_cont ent" onclick="new TabToggle3(this); return false;"><span> Change Password </sp an></a></l i>
<li><a href="#sendmail_content" onclick="new TabToggle3(this); return false;"><span> Email Help Desk &nbs p;</span>< /a></li>
<li><a href="#editpage_content" onclick="new TabToggle3(this); return false;"><span> Edit Page &nbs p; &n bsp; &nbs p; &n bsp; &nbs p; &n bsp; </sp an></a></l i>
<!---<li ><a <cfoutput>lnk="#request.my self#xfa.c linRecs#"< /cfoutput> href="#tab9_content" onclick="new TabToggle3(this); return false;"><span> Test Side &nbs p; &n bsp; &nbs p; &n bsp; &nbs p; &n bsp; </span></a ></li>
--->
<li ><a <cfoutput>lnk="#request.my self##xfa. changePass word#"</cf output> href="#tab9_content" onClick="new TabToggle3(this); return false" ><span>Clinical Records</span></a></li>
</ul>
</div>
</div>
<cfoutput>testing</cfoutpu t>
<div id="sidenav">
<div id="sidenavhead" >
<ul>
<li id = "active"><a href="#announcement_conten
<li ><a href= "#request.myself##xfa.staf
<li ><a href="#changepassword_cont
<li><a href="#sendmail_content" onclick="new TabToggle3(this); return false;"><span> Email Help Desk &nbs
<li><a href="#editpage_content" onclick="new TabToggle3(this); return false;"><span> Edit Page &nbs
<!---<li ><a <cfoutput>lnk="#request.my
--->
<li ><a <cfoutput>lnk="#request.my
</ul>
</div>
</div>
<cfoutput>testing</cfoutpu
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.
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.g if") 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.g if") no-repeat right top;
margin: 0;
padding:0px 8px 0px 0x;
width: auto;
color: #000099;
}
div#sidenavhead:hover li{
float: left;
background: url("/emr/main/view/images
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.