CODEWITHSUNDEEP
javascriptjqueryhtmlcssinternet-explorer
RMD2411
RMD2411

Reputation: 59

Internet Explorer not showing elements

Internet explorer (8+) isn't showing some of my elements, where as other browsers are. Im trying to make a responsive 3d banner which looks like the following:

enter image description here

the banner works on opera, safari, chrome but internet explorer wont work.

IE shows the following:

enter image description here

here is my code:

<div class="banner">
            <div class="text-center">
                text here
            </div>
</div><!--/banner-->

im using the following css:

    .banner{
    position:relative;
    height:80px;
    background: #2859a6;
    margin: 0 -40px;
}
.banner:before, .banner:after{
    content:'';
    position:absolute;
    bottom:-10px;
    border-top:10px dotted #5C5C5B;
}
.banner:before{
    left:0;
    border-left:25px solid transparent;
}
.banner:after{
    right:0;
    border-right:25px solid transparent;
}

if it makes any difference im using this in my header to allow my site to work on older versions of IE. 

<meta http-equiv="X-UA Compatible" content="IE=edge, chrome=1">

    <!-- Stylesheets -->

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <!--[if lte IE 8]>
    <script src="bootstrap/js/html5shiv.js"></script>
    <script src="bootstrap/js/respond.min.js"></script>
    <link rel="stylesheet" href="css/ie8.css">
    <![endif]-->

Upvotes: 1

Views: 812

Answers (2)

hungerstar
hungerstar

Reputation: 21685

In .banner:before, .banner:after set border-top style to solid, border-top: 10px solid #5C5C5B;.

Upvotes: 1

dfsq
dfsq

Reputation: 193261

Looks like the problem is with border configuration. Try this:

.banner:before, .banner:after {
    content: '';
    position: absolute;
    bottom: -10px;
    border-style: solid;
    border-width: 10px 0 0 0;
    border-color: #5C5C5B transparent transparent transparent;
}

Check in IE8+: http://jsfiddle.net/9mwvavbe/1/

Upvotes: 1

Related Questions