CSS hover codes mysteriously not working in ShareP

Question

I'm having problems with SharePoint and CSS. I'm creating a page with a supposedly simple image tab that has hover effect. It's done entirely in CSS. Here's the CSS snippet (hosted in a separate CSS file):

div.activelayer {
                margin-left:-30px;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png");
                text-align:center;
                height:55px;
                width:200px;
                display:inline-block;
                position:relative;
                float:left;
            }

div.activelayer:hover { 
                margin-left:-30px;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/hover.png");
                text-align:center;
                height:55px;
                width:200px;
                display:inline-block;
                position:relative;
                float:left; 
            }           

div.inactivelayer {
                margin-left:-30px;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/inactive.png");
                text-align:center;
                height:55px;
                width:200px;
                display:inline-block;
                position:relative;
                float:left;
            }           

div.selectedlayer {
                margin-left:-30px;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
                text-align:center;
                height:55px;
                width:200px;
                display:inline-block;
                position:relative;
                float:left;
            }       

div.selectedlayer:hover {   
    background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");   
    cursor: text;
            }   

#innertab .alink {
                margin-top:18px;
                text-align:center;
                margin-left:0px;
}   

#innertab a.tablink {
                color: #ffffff;
                text-align: center;
}   

#innertab a.tablink:hover {
                text-decoration: none;
                color: #ffffff; 
                text-align: center;         
}   


/* IDs */

#menu1 {
    z-index:10;
    }
#menu2 {
    z-index:9;
    }
#menu3 {
    z-index:8;
    }
#menu4 {
    z-index:7;
    }
#menu5 {
    z-index:6;
    }

In the aspx page, I have this:

        <div id="innerTab" class="" style="width: 1000px; height: 72px;">
                    <div id="menu1" class="selectedlayer" style="margin-left:0px">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem1">Menu Item 1</a>
                      </div>
                    </div>
                    <div id="menu2" class="activelayer">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem2">Menu Item 2</a>
                      </div>
                    </div>
                    <div id="menu3" class="activelayer">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem3">Menu Item 3</a>
                      </div>
                    </div>
                    <div id="menu4" class="activelayer">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem4">Menu Item 4</a>
                      </div>
                    </div>
                    <div id="menu5" class="inactivelayer">
                      <div class="alink">
                        <a href="f.html" class="tablink" id="tabitem5">Menu Item 5</a>
                      </div>
                    </div>              
        </div>

The problem I'm experiencing is this: It doesn't work when I placed this in SharePoint when viewed in IE.

I first tested this code in a normal HTML page and it worked like a charm in IE. When I transferred the codes in SharePoint (it's in a page template), it didn't work. So, I viewed the SharePoint test page in Chrome, and it works there, but for some truly bizarre reason, it's not working for IE. I haven't tested in in other browsers, and I don't really plan to because the page I'm working on is an intranet site, and our company uses IE (officially, though some of us insist on using either Chrome or FireFox) so IE compatibility is my only priority.

Is there something that I missed in the code? Please help :(

Oh, BTW, I'm coding in MOSS2007 and the HTML codes are being used in a Page Template. My IE version is IE8. Not sure if these info are relevant to the problem I'm having, though :(

thanks,

Poch

Answer 1

Sharepoint's stylesheets are overriding yours, so you have to make your selectors stronger. Open up the developer tools (hit f12), select "Trace Styles" above the right pane. Select your element that isn't getting it's styles applied and examine who's styles are. Then just copy that selector and make yours a little bit stronger. For example you may see:

margin-top: 0px;
#innertab .alink - 18px;
.someClass .someOtherClass #someId a - 0px

You'd just change your selector to this:

.someClass .someOtherClass #someId #innertab a.alink

Your selector is now stronger and will be applied.

Answer 2

I had a similar issue with this a few weeks back. I couldn't find an exact resource that said it, but through trial and error I was able to find that I could only apply CSS Psuedo classes (Like :hover and :active) to <a> tags within SharePoint when browsing in IE. The code you posted above has :hover / :active on <div> tags.

I was able to get a working solution by using image sprites, styling the anchor tags, and nesting the image sprite within the <a> tags with the following HTML and CSS:

HTML

<ul id="wheel" class="wheel"><li>
<a href="#"><img src="images1/design.png"></a></li>
</ul>

CSS

.wheel li a, .wheel li a:visited{
  width: 50px;
  height: 50px;
  overflow: hidden; 
}

.wheel li img
{
      position: relative;
      display: block;
}

.wheel a:hover img{
      left: -51px;
}

.wheel a:active img{
      left: -102px;
}

On the off chance you haven't solved this issue, hope this helps!

Answer 3

Try adding !important, like so:

div.activelayer {
                margin-left:-30px!important;
                background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png")!important;
                text-align:center!important;
                height:55px!important;
                width:200px!important;
                display:inline-block!important;
                position:relative!important;
                float:left!important;
            }