CODEWITHSUNDEEP
htmlcsstwitter-bootstrapinternet-explorer-11
CBreeze
CBreeze

Reputation: 2983

Website incompatible with IE11, fine in Chrome

The following snippet works fine in Chrome but does not display correctly in IE11 or Edge. The navbar is fixed to the top instead of being aligned to the side and the hover effects do not work.

I have ensured that I am declaring; <!DOCTYPE html>, I have also added the following the my <head> to try to force it into edge compatibility:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

Even after doing this the display is still messed up. I go into Developer Tools in IE and cannot find any issues there either.

My code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/layout.css"/>
    @RenderSection("CustomStyles", false)
    @RenderSection("CustomScripts", false)
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="col-lg-2 col-md-3 col-sm-8 col-xs-6">
            <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
                <ul class="nav sidebar-nav">
                    <li class="sidebar-brand">
                        <a href="/">Dashboard</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-home"></i> Directories <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Item 1</a></li>
                            <li><a href="#">Item 2</a></li>
                            <li><a href="#">Item 3</a></li>
                            <li><a href="#">Item 4</a></li>
                            <li><a href="#">Item 5</a></li>
                            <li><a href="#">Item 6</a></li>
                            <li><a href="#">Item 7</a></li>
                            <li><a href="#">Item 8</a></li>
                            <li><a href="#">Item 9</a></li>
                            <li><a href="#">Item 10</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-gbp"></i> Contracts <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Item 1</a></li>
                            <li><a href="#">Item 2</a></li>
                            <li><a href="#">Item 3</a></li>
                            <li><a href="#">Item 4</a></li>
                            <li><a href="#">Item 5</a></li>
                            <li><a href="#">Item 6</a></li>
                            <li><a href="#">Item 7</a></li>
                            <li><a href="#">Item 8</a></li>
                            <li><a href="#">Item 9</a></li>
                            <li><a href="#">Item 10</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-fw fa-tasks"></i> Processes</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-fw fa-file"></i> Filing </a>
                    </li>
                    <li>
                        <a asp-controller="MyProfile" asp-action="Index">
                            <i class="fa fa-fw fa-user"></i> My Profile
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="col-lg-10 col-md-9 col-sm-4 col-xs-6">
            @RenderBody()
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(".dropdown-toggle").click(function () {
                $(".caret").removeClass('rotate-180');
                $(this).find(".caret").addClass('rotate-180');
            });
            $(document).mouseup(function (e) {
                $(".caret").removeClass('rotate-180');
            });
        });
    </script>
    @RenderSection("Scripts", required: false)
</body>
</html>

CSS

body {
    position: relative;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body, html {
    height: var(--full-height);
    background-color: var(--bg-color)
}

/********************************************
/*                                          *
/*                                          *
/*               Variables                  *
/*                                          *
/*                                          *
********************************************/

:root {
    /* BACKGROUND COLOUR */
    --bg-color: #FFF;

    /* HIGHLIGHT COLOUR */
    --highlight-color: #ff5c16;

    /* WIDTH */
    --width1: 16.67%;
    --full-width: 100%;

    /* HEIGHT */
    --full-height: 100%;

    /* Sidebar Font Size*/
    --sidebar-fontsize: 16px;
}

/********************************************
/*                                          *
/*                                          *
/*                Wrappers                  *
/*                                          *
/*                                          *
********************************************/

.container-fluid {
    padding: 0;
    margin: 0;
    height: 100%;
}

/********************************************
/*                  Header                  *
********************************************/

.headerWrapper {
    height: 7%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.headerWrapper > h1 {
    padding: 0;
    margin: 0;
    font-size: 18px;
}

/********************************************
/*                  Content                 *
********************************************/

.contentWrapper {
    height: 93%;
    width: 100%;
    padding: 0;
    margin: 0;
}

/********************************************
/*                  Sidebar                 *
********************************************/

#sidebar-wrapper {
    width: var(--width1);
}

#sidebar-wrapper {
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background-color: #1A1A1A;
    height: var(--full-height);
    overflow-x: hidden;
    overflow-y: auto;
    transition: all 0.5s ease;
}

#sidebar-wrapper::-webkit-scrollbar {
    display: none;
}

/********************************************
/*                                          *
/*                                          *
/*             Sidebar Styling              *
/*                                          *
/*                                          *
********************************************/

/*.sidebar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
}*/

.sidebar-nav .sidebar-brand:before {
    background-color: #222222;
    color: #FFF;
}

.sidebar-nav .sidebar-brand > a {
    color: #FFF;
    font-size: 24px;
    line-height: 60px;
}

.sidebar-nav .sidebar-brand a:hover {
    background-color: #222222;
}

.sidebar-nav > li > a {
    line-height: 20px;
    color: #DDD;
    padding: 10px 15px 10px 30px;
    font-size: var(--sidebar-fontsize);
}

.sidebar-nav > li:before {
    width: 3px;
    height: var(--full-height);
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--highlight-color);
    transition: width .2s ease-in;
    content: '';
}

.sidebar-nav > li:hover:before {
    transition: width .2s ease-in;
    width: var(--full-width);
}

.sidebar-nav > li.open:hover before {
    transition: width .2s ease-in;
    width: var(--full-width);
}

.sidebar-nav .dropdown-menu {
    background-color: #222222;
    border-radius: 0;
    border: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: var(--full-width);
}

.sidebar-nav .dropdown-toggle > .caret {
    float: right;
    margin: 6px 0;
}

.sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus,
.sidebar-nav li.open a:active, .sidebar-nav li.open a:active, .sidebar-nav li.open a:active,
.sidebar-nav .open > a:hover, .sidebar-nav .open > a:focus {
    background-color: transparent;
    color: #FFF;
    text-decoration: none;
}

.nav .open > a {
    background-color: transparent;
}

.nav .open > a:hover, .nav .open > a:focus {
    background-color: transparent;
}

.caret {
    -moz-transition: transform 0.5s;
    -webkit-transition: transform 0.5s;
    transition: transform 0.5s;
}

.rotate-180 {
    transform: rotate(-180deg);
}

Image working in Chrome:

enter image description here

But completely different and no hover effect in IE11:

enter image description here

I am using Bootstrap but I was under the impression that forcing it into Edge compatibility should fix any issues I may have.

Upvotes: 0

Views: 507

Answers (1)

Joe Clay
Joe Clay

Reputation: 35827

CSS custom properties (which you are using to define your variables) are not supported by any version of Internet Explorer, and as far as I know, there is no way to polyfill this functionality.

You will have to refactor your CSS to not use them if you want to support IE. Perhaps consider using a compile-to-CSS language that supports variables, like Sass or Less.

Upvotes: 1

Related Questions