1

Solution: Appears that IE does not accept alpha values on hex colours: ie, #61CBFD22 doesn't register because the 22 is the alpha value. #61CBFD registers.


I'm trying to increase readability and navigation on our site with a little CSS on the global navigation (See below for CSS). It works flawlessly in Chrome, but in IE, none of the :hover selectors work.

The :hover selectors are just to add a highlight to the currently hovered item, to more easily see what element is selected.

Here's some stats on what's going on:

Using IE 11, version 11.590.17134.0, with the meta tag <meta http-equiv="X-UA-Compatible" content="IE=edge"/> at the top of the <head> of the master page.

  • It doesn't work with IE=10,IE=11, or IE=Edge (I've tried all 3).
  • I've tried marking all the items under the :hover to be !important and that doesn't work either so I don't think it's a precedence issue.
  • Tried making IE not run in compatibility mode for Intranets
  • Tried changing [Selector]:hover to [Selector] .hover because I noticed a Class change on hovered elements that reflect that change.

Not sure what else there is to try. I'm sure that :hover is valid in IE 11... Any help would be appreciated.

/*** Top Navigaion Static Menu Items ***/
.ms-core-listMenu-horizontalBox li.static {
    border: 1px solid transparent;
    background: url("/_layouts/Images/selbg.png") repeat-x left top;
}

/*** Top Navigaion Static Menu Item Links  ***/
.ms-core-listMenu-horizontalBox li.static>.ms-core-listMenu-item {
    white-space: nowrap;
    border: 1px solid transparent;
    padding: 10px;
    padding-left: 20px;
    margin-right: 1px;
    color: #000;
}

/* Top Navigation static Menu Item Links Hover Style  */
.ms-core-listMenu-horizontalBox li.static>.ms-core-listMenu-item:hover {
    background: url("/_layouts/Images/selbg.png") repeat-x left top;
    background-color: #61CBFD22;
    color: #000;
    text-decoration: none;
}

/*** Top Navigaion Static Menu Selected ***/
.ms-core-listMenu-horizontalBox li.selected a.selected {
    background: url("/_layouts/Images/selbg.png") repeat-x left top;
    color: #000;
    text-decoration: none;
    border: 1px #134072 solid;
    padding: 10px 10px;
    margin: 1px;
}

/*** Sub-Menu/Flyover/Dynamic Menu Container ***/
ul.dynamic {
    border: 1px solid #007;
    padding: 1px;
    margin-top: 5px;
    font-size: 1.1em;
    width: auto !important;
    white-space: nowrap;
}

/***  Sub-Menu Items (HyperLinks) Style ***/
ul.dynamic .ms-core-listMenu-item {
    padding: 0px 20px 0px 20px;
    white-space: nowrap;
    color: #000;
}

/*** Sub-Menu Items (HyperLinks) Hover Style ***/
ul.dynamic .ms-core-listMenu-item:hover {
    background-color: #61CBFD22;
    color: #000;
}

/** Hide "Edit Links" ***/
.ms-listMenu-editLink {
    display: none !important;
}

As per comments:

Emulation Tab in F12 console: enter image description here

When checking the a: option in the f12 screen, and selecting :hover, there are no changes to the CSS being applied for most items. The actual a tag does change, and the background-color I used is underlined.

  • 1
    when you bring the console, what do you see under the emulation tab (screenshot would be nice)? also, when you pick the item and enable hover checkbox, does your style appear (enabled or disabled) or not there entirely? (in the DOM Explorer tab you can click the "a:" and simulate :hover for that element and see what's happening) – Tiago Duarte Mar 11 at 17:01
  • @TiagoDuarte Thanks for the Console tip! Found the issue. It seems that IE doesn't accept Alpha values in hex-defined colours. ie my #61CBFD22 won't work, but #61CBFD will. If you wanted to post an answer I can mark it as correct as your comment lead to the solution. Thanks! – KGlasier Mar 11 at 17:17
1

As per my comments, you can find out more information about what is happening by:

  • Opening the Emulation tab in the developer console to determine the version of IE
  • Opening the DOM Explorer tab and using the "a:" button to simulate the hover effect and pinpoint potentially overwritten or invalid styles

Additionally, and according to Can I use, Internet Explorer noes not support the CSS Color Module Level 4 which "defines new 4 & 8 character hex notation for color to include the opacity level".

Furthermore, I would suggest to upvote the entry, "#rrggbbaa and #rgba color notation support" in uservoice,

https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/17366608

Further reading,

https://stackoverflow.com/questions/7015302/css-hexadecimal-rgba/27802062

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.