Hover effect does not work in IE

Question

Trying to implement a simple hover effect - it works lovely in Chrome but not in MSIE. Is there an alternative? Or a fix that will make this work in MSIE? Most hover/rollover effects I've tried have this issue in IE.

normalize.css
demo.css
set2.css
font-awesome.min.css

Markup - Page

<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,800,500,600' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="../Style Library/css/normalize.css">
        <link rel="stylesheet" type="text/css" href="../Style Library/css/demo.css">
        <link rel="stylesheet" type="text/css" href="../Style Library/css/set2.css">
        <link rel="stylesheet" type="text/css" href="../Style Library/fonts/font-awesome-4.2.0/css/font-awesome.min.css"
</head>

<body>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript" ></script>
        <div class="container">

            <div class="content">
                <h2>Goliath</h2>
                <div class="grid">
                    <figure class="effect-goliath">
                        <img src="Site%20Documents/23.jpg" alt="img23"/>
                        <figcaption>
                            <h2>Thoughtful <span>Goliath</span></h2>
                            <p>When Goliath comes out, you should run.</p>
                            <a href="#">View more</a>
                        </figcaption>           
                    </figure>
                    <figure class="effect-goliath">
                        <img src="Site%20Documents/24.jpg" alt="img24"/>
                        <figcaption>
                            <h2>Thoughtful <span>Goliath</span></h2>
                            <p>When Goliath comes out, you should run.</p>
                            <a href="#">View more</a>
                        </figcaption>           
                    </figure>
                </div>
        </div><!-- /container -->

    </body>
</html>

Working correctly in Chrome (cursor hovered on the right panel)

In MSIE 11, not working :(

Sigh, so many problems with "does not work in IE"... ever since IE7 this has been the bane of most web developers... Have you tried putting IE in edge mode? `` Also do you get any errors in the javascript console in IE or when you look at the CSS source? — Tschallacka, May 26 '15 at 13:36
can you direct us to a pen or the page so that we can inspect it? — Vandervals, May 26 '15 at 13:37
@MichaelDibbets, edge mode didn't fix it - still seeing the issue. No JS errors or when I look in the source using dev tools. — gleichdanke, May 26 '15 at 13:41
@Vandervals, sorry, the page isn't hosted publically anywhere... — gleichdanke, May 26 '15 at 13:42

score 3 · Accepted Answer · edited May 23 '17 at 12:06

Put your markup through the W3C HTML Validator and fix all errors. Internet Explorer especially dislikes invalid HTML markup and you have an unclosed <div> element among other things.

Your last <link> tag is missing its closing bracket, >.

<link rel="stylesheet" type="text/css" href="../Style Library/fonts/font-awesome-4.2.0/css/font-awesome.min.css"

You have a whitespace character within the href URL of your CSS paths triggering W3C errors, href="../Style Library/css/normalize.css". Try getting rid of that by renaming whatever it takes. Play it safe and avoid whitespace within any URL.
You never stated specifically which versions of Explorer.

Hover effect does not work in IE

1 Answers1