Transition not working in IE
css, internet-explorer, transition
Solution
I suspect the issue might be compatibility mode.
If you do not have a proper doctype declaration as the very first line in a document, IE will enter compatibility mode and most features will not work as expected. Ensure that you have a valid doctype (`<!DOCTYPE html>` will be fine) and add `<meta http-equiv="X-UA-Compatible" content="IE=edge" />` to your document `<head>`.
Also, make sure there is no extra whitespace before the doctype that could be introduced by the way you are echoing text in PHP.
Problem
I'm developing my own website, and one of the 'features' it has is that when I go with my mouse over the header, it slides down. This works well and good on all major browsers. However, with IE 10, it doesn't. Here's the page source: ``` <?php echo "<html> <head> <title>memodesigns</title> <link rel='stylesheet' href='style/stylesheet.css'> </head> <body>"; include_once('modules/header.php'); echo " </body> </html>"; ?> ``` This is the header file which is included: ``` <?php echo "<div id = 'menucontainer'> <div id = 'menu'> <p> <ul> <li><a class = 'menu' href = ''>HOME</a></li> <li><a class = 'menu' href = 'about.php'>ABOUT</a></li> <li><a class = 'menu' href = 'portfolio.php'>PORTFOLIO</a></li> <li><a class = 'menu' href = 'rates.php'>RATES</a></li> <li><a class = 'menu' href = 'contact.php'>CONTACT</a></li> </ul> </p> </div> </div>"; ?> ``` And the CSS styles being used here: ``` a.menu{ padding-left: 20px; padding-right: 20px; } /*menucontainer*/ #menucontainer{ position: absolute; margin-top: -8px; top: 0px; width: 100%; text-align: center; -webkit-transition: margin-top 0.5s; -moz-transition: margin-top 0.5s; -o-transition: margin-top 0.5s; transition: margin-top 0.5s; } /*menucontainer*/ #menucontainer:hover{ margin-top: 0px; } /*menu*/ #menu{ padding-top: 5px; margin-left: auto; margin-right: auto; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; -moz-border-radius-bottomleft: 12px; -moz-border-radius-bottomright: 12px; max-width: 75%; height: 25px; background-color: #202020; font-family: Roboto; color: #f3f4f4; font-size: 16px; } ``` Would appreciate any help as to why transitions are not working in IE, but working on other major browsers.