CODEWITHSUNDEEP
cssinternet-explorerbrowsercross-browser
user2874270
user2874270

Reputation: 1382

IE8 Ignoring Box-Sizing

I'm having a problem getting IE8 to follow box-sizing. In my header I have my logo set to max-height: 100% with some padding. What should happen is the size of the image should end up being 100% of the height of the header, less the amount of the padding. This works perfectly in modern browsers. However in IE8, the image ends up being 100% of the height of the header, and then the paddding gets added, making it run off the edge of the header. Any idea why this is happening? I know IE8 is supposed to support box-sizing.

css:

    #logoimg {
  max-height:55px;
  padding:4px 10px 4px 0;
  float:left;
  border-right:1px solid #ad1d00;
  box-sizing:border-box;
}
#navigationcontainer {
  width:100%;
  background:#f1f1f1;
  -moz-box-shadow:0px 1px 3px 3px #dfdfdf;
  -webkit-box-shadow:0px 1px 3px 3px #dfdfdf;
  box-shadow:0px 1px 3px 3px #dfdfdf;
  box-sizing:border-box;
}
#navigationtopbar {
  width:100%;
  background:#ea2700;
  height:55px;
  box-sizing:border-box;
}
#navigationtopbar ul {
  float:left;
  list-style-type:none;
  padding:0;
}
#navigationtopbar ul li { float:left; }
#navigationtopbar ul li a {
  padding:0 10px 0 10px;
  line-height:55px;
  display:block;
  color:#ffffff;
  border-right:1px solid #ad1d00;
  border-left:1px solid #ef5f42;
}
#navigationtopbar ul li a:hover { background-color:#ef5f42; }
.chart {
  width:100%;
  padding:0;
  margin:0;
}

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="latin1/iso-8859-1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  </head>
  <body>
<nav id="navigationcontainer" role="navigation">
    <div id="navigationtopbar">
        <div class="container-fluid">
            <a  title="Fast Food Nutrition" href="/"><img alt="Fast Food Nutrition" id="logoimg" src="/images/logo.png"></a>
            <ul>
                    <li>
                        <a  title="Fast Food Restaurants" href="/fast-food-restaurants.php">Restaurants</a>
                    </li>
                    <li>
                        <a title="Fast Food Nutrition Nutrition Calculator" href="/fast-food-meal-calculator.php">Nutrition Calculator</a>
                    </li>
                    <li>
                        <a title="Fast Food Nutrition Blog" href="/blog/">Blog</a>
                    </li>
                    <li>
                        <a title="Nutrition Glossary" href="/glossary/">Glossary</a>
                    </li>
                    <li>
                        <a title="Fast Food Nutrition Lesson Plans" href="/lesson-plans.php">Teachers</a>
                    </li>
                    <li>
                        <a title="About FastFoodNutrition.org" href="/about-us.php">About</a>
                    </li>
                    <li class="hidden-sm visible-xs">
                        <a title="Search FastFoodNutrition.org" href="/gsearch.php">Search</a>
                    </li>
            </ul>
        </div>
    </div>
</nav>
  </body>
</html>

Upvotes: 2

Views: 1028

Answers (1)

Jordan Biserkov
Jordan Biserkov

Reputation: 691

Your #logoimg has max-height:55px.

IE 8 ignores box-sizing: border-box if min/max-width/height is used. Source: http://caniuse.com/#search=box-sizing > Known issues #4

Upvotes: 4

Related Questions