Fixing :hover Styling
So you have designed a great skin, skin object or module for DNN and it uses the :hover attribute and looks fantastic in Firefox. Now, you find out that nothing works in IE because IE doesn't support the :hover attribute on the elements you've used.
You can fix the issue pretty quickly with the help of a small .htc file available for free download. But, to get it to work in DNN you just have to make sure you place it in the proper place.
Download the following files:
Hover Fix: Whatever:hover
Place the downloaded file in the ROOT directory of your DNN setup.
Then add the following to the DEFAULT.CSS file.
/* background color for the content part of the pages */
Body
{
behavior: url(http://localhost/dnn5/csshover3.htc);
background-color: white;
margin: 0px;
}
* where http://localhost/dnn5 is the full path to the root of your DotNetNuke installation
The reason for this is that the location of the .htc file is relative to the .html file...not the skin or the CSS stylesheet. Due to the dynamic nature of DNN and all the pages being generated off of the Default.aspx page, the file must be placed in the root of your website and linked from there.
The reason you have to use the full path is because the Default.css file is located in the Portals/_default folder. I tried using other methods to traverse the path without requiring the full path to be hard coded, but I wasn't able to get it to work that way. If anyone else finds a way to make this happen without requiring hard coding, I'd love to hear it.
I also tried using this from the Portal.css as well as the skin.css, again, with no luck. All other solutions are appreciated.
 |
 |
 |
| FireFox Displaying Properly |
IE7 Displaying Properly |
IE6 Displaying Properly |