CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-9
Tigran
Tigran

Reputation: 882

This CSS works perfectly in Chrome but breaks in IE

This CSS arrow works fine in chrome but breaks in IE. What's the best way to figure out how to make it work in IE9?

<html>
<head>

<style>
.nav {
    padding: 0;
    width: 115px;
}

.box {
    width: 100px;
    height: 50px;
    background-color: green;
    float: left;
    padding: 0;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 15px solid green;
    float: right;
    padding: 0;

}
</style>
</head>


<body>
<div>
<div class="nav">
<div class="box"></div>
<div class="arrow-right"></div>
</div>
</body>
</html>

Upvotes: 0

Views: 307

Answers (1)

Jawad
Jawad

Reputation: 6672

Maybe because you don't have a DOCTYPE and IE renders it in quirks mode.

<!DOCTYPE html>

Upvotes: 4

Related Questions