0

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) Working correctly in Chrome (cursor hovered on the right panel)

In MSIE 11, not working :( in MSIE 11, not working :(

Improve this question
4
  • 2
    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? <meta http-equiv="X-UA-Compatible" content="IE=edge" /> Also do you get any errors in the javascript console in IE or when you look at the CSS source? Commented May 26, 2015 at 13:36
  • can you direct us to a pen or the page so that we can inspect it? Commented May 26, 2015 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. Commented May 26, 2015 at 13:41
  • @Vandervals, sorry, the page isn't hosted publically anywhere... Commented May 26, 2015 at 13:42

1 Answer 1

Reset to default
3

  1. 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.

  2. 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"

  3. 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.

  4. You never stated specifically which versions of Explorer.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.