Link to home
Start Free TrialLog in
Avatar of Brian
BrianFlag for United States of America

asked on

HTML5 issue with IE8

Hello Experts,

I created an HTML5 website and it works fine using IE9, FF and Chrome. But when displayed in IE8 the layout breaks. I know that I need to use an certain tag as below but even when I add that IE tag below the same thing happens, my layout breaks.

You will notice that the code below using an ie tag meant for IE9 below and that it calls the modernizer.js file which I thought would include the necessary code to support IE8.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Studio</title>
    <meta name="description" content="">

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">

    <!--[if lt IE 9]>
        <script src="Scripts/js/modernizr-2.6.1.min"></script>
    <![endif]-->

    <script src="Scripts/js/modernizr-2.6.1.min"></script>
</head>
<body class="home">
    <form id="form1" runat="server">
        <div id="page">

            <header>
                <img src="img/Logo.png" class="logo" />
                <nav>
                    <ul>
                        <li><a href="index.aspx" class="home">HOME</a></li>
                        <li><a href="about/index.aspx">ABOUT</a></li>
                        <li><a href="galleries/index.aspx">GALLERY</a></li>
                        <li><a href="specials/index.aspx">SPECIALS</a></li>
                        <li><a href="pricing/index.aspx">PRICING</a></li>
                        <li><a href="classes/index.aspx">CLASSES</a></li>
                        <li><a href="contacts/index.aspx">CONTACT</a></li>
                    </ul>
                </nav>
            </header>

            <div class="flexslider">
                <ul class="slides">            
                    <asp:Repeater ID="rpHomePhotos" runat="server">
                        <ItemTemplate>
                            <li>
                                <asp:Image ID="img" ImageUrl='<%# "HomeHandler.ashx?hom_id=" + Eval("hom_id") %>' runat="server" />
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>

            <footer>
                <p>&#169; 2012</p>
            </footer>

            <script src="Scripts/js/jquery-1.8.0.min.js"></script>
            <script src="Scripts/js/jquery.flexslider.js"></script>
            <script src="Scripts/js/plugins.js"></script>        
            <script src="Scripts/js/main.js"></script>

            <script type="text/javascript">
                $(window).load(function () {
                    $('.flexslider').flexslider({
                        animation: "slide",
                        controlNav: false,
                        directionNav: false,
                        slideshowSpeed: 7000,
                        animationSpeed: 600,
                        touch: true,
                        start: function (slider) {
                            $('body').removeClass('loading');
                        }
                    });
                });
            </script>

            <script>
                var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
                (function (d, t) {
                    var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
                    g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
                    s.parentNode.insertBefore(g, s)
                }(document, 'script'));
            </script>
        </div>
    </form>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial