Please don’t be deterred by the “just another IE problem”.
I have a custom layout built with Twitter Bootstrap, and everything scales and scales correctly in every browser except all IE’s (all=6-8). I’ve tried as many hacks as I could find to get max-width and all that working in IE, but the main background image (id=”bg”) won’t scale in IE. Any ideas?
Here’s the code:
<html lang="en">
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<head>
<meta charset="utf-8">
<title>Alpha Marine Inc.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
}
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<ul class="pull-right" id="nav">
<li><a href="#" id="home"></a>
<li><a href="#" id="ourServices"></a>
<li><a href="#" id="aboutUs"></a>
<li><a href="#" id="insurance"></a>
<li><a href="#" id="automobiles"></a>
<li><a href="#" id="contactUs"></a>
</ul>
</div>
<div class="row-fluid" id="banner">
<div class="span12">
<img id="bg" src="images/homepage.jpg" />
<a href="#"><img id="logo" src="images/logo.jpg" /></a>
<a href="#"><img id="splash" src="images/splash.jpg" /></a>
</div>
</div>
<div class="row-fluid" id="sub">
<div class="span12">
<div style="float:right;">
<div class="span199"><a href=""><img src="images/door2door.jpg" alt="Door to Door" onMouseOver="MM_changeProp('d2d','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('d2d','','backgroundPosition','top center','SPAN')" /><span id="d2d" onMouseOver="MM_changeProp('d2d','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('d2d','','backgroundPosition','top center','SPAN')"></span></a></div>
<div class="span199"><a href=""><img src="images/door2port.jpg" alt="Door to Port" onMouseOver="MM_changeProp('d2p','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('d2p','','backgroundPosition','top center','SPAN')" /><span id="d2p" onMouseOver="MM_changeProp('d2p','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('d2p','','backgroundPosition','top center','SPAN')"></span></a></div>
<div class="span199"><a href=""><img src="images/port2door.jpg" alt="Port to Door" onMouseOver="MM_changeProp('p2d','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('p2d','','backgroundPosition','top center','SPAN')" /><span id="p2d" onMouseOver="MM_changeProp('p2d','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('p2d','','backgroundPosition','top center','SPAN')"></span></a></div>
<div class="span199"><a href=""><img src="images/port2port.jpg" alt="Port to Port" onMouseOver="MM_changeProp('p2p','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('p2p','','backgroundPosition','top center','SPAN')" /><span id="p2p" onMouseOver="MM_changeProp('p2p','','backgroundPosition','bottom center','SPAN')" onMouseOut="MM_changeProp('p2p','','backgroundPosition','top center','SPAN')"></span></a></div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span8">
<ul id="foot">
<li><img src="images/worldwide.jpg" alt="Worldwide" />
<li><a href="#" id="africa"></a>
<li><a href="#" id="asia"></a>
<li><a href="#" id="australia"></a>
<li><a href="#" id="europe"></a>
<li><a href="#" id="nAmerica"></a>
<li><a href="#" id="sAmerica"></a>
</ul>
</div>
</div>
<div class="row-fluid footerbox">
<div class="span3">
<ul id="subsub">
<li><a href="#" id="priceQuote"></a>
<li>|
<li><a href="#" id="contact"></a>
</ul>
</div>
<div class="span9">
<ul class="pull-right" id="copy">
<li><a href="">Terms & Conditions</a> |
<li>Copyright 2012 © Alpha Marine, Inc. All Rights Reserved.
</ul>
</div>
</div>
</div><!-- end .container-fluid -->
</body>
</html>
And my css (I haven’t edited any of bootstrap’s css):
/* ============================== */
/* ! Layout for desktop version */
/* ============================== */
/* page headers */
@font-face {
font-family: 'TrajanProBold';
src: url('/fonts/trajanpro-bold-webfont.eot');
src: url('/fonts/trajanpro-bold-webfont.eot?#iefix') format('embedded-opentype'),
/*url('/fonts/trajanpro-bold-webfont.woff') format('woff'),*/
url('/fonts/trajanpro-bold-webfont.ttf') format('truetype'),
url('/fonts/trajanpro-bold-webfont.svg#TrajanProBold') format('svg');
font-weight: normal;
font-style: normal;
}
/* header nav anchors */
@font-face {
font-family: 'MyriadProSemibold';
src: url('/fonts/myriadpro-semibold-webfont.eot');
src: url('/fonts/myriadpro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
/*url('/fonts/myriadpro-semibold-webfont.woff') format('woff'),*/
url('/fonts/myriadpro-semibold-webfont.ttf') format('truetype'),
url('/fonts/myriadpro-semibold-webfont.svg#MyriadProSemibold') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color:#eaeaea;
margin:0;
padding:0 33px;
}
#nav, #foot, #subsub, #copy {
list-style:none;
}
#nav {
height:20px;
margin:15px 0;
padding:0;
overflow:hidden;
}
#nav li {
height:20px;
overflow:hidden;
float:left;
margin:0;
padding:0;
}
#nav li a {
display:block;
height:20px;
background-repeat:no-repeat;
}
#nav li a#home {
background-image:url(../images/home.jpg);
background-position:top center;
width:51px;
}
#nav li a#ourServices {
background-image:url(../images/ourServices.jpg);
background-position:top center;
width:105px;
}
#nav li a#aboutUs {
background-image:url(../images/aboutUs.jpg);
background-position:top center;
width:79px;
}
#nav li a#insurance {
background-image:url(../images/insurance.jpg);
background-position:top center;
width:89px;
}
#nav li a#automobiles {
background-image:url(../images/automobiles.jpg);
background-position:top center;
width:110px;
}
#nav li a#contactUs {
background-image:url(../images/contactUs.jpg);
background-position:top center;
width:96px;
}
#nav li a#home:hover, #nav li a#ourServices:hover, #nav li a#aboutUs:hover, #nav li a#insurance:hover, #nav li a#automobiles:hover, #nav li a#contactUs:hover {
background-position:bottom center;
}
ul#nav li a, ul#nav li a:visited {
display: block;
text-decoration: none;
text-transform: uppercase;
font: normal 11pt "Myriad Pro", Arial, Helvetica, sans-serif;
height: 20px;
padding: 0 8px 0 0;
color: #1A3858;
letter-spacing: 0.2px;
}
#nav li a:hover, #nav li a:active {
color:#365D86;
}
#banner {
position:relative;
}
#row1 {
z-index:1111;
}
#row2 {
z-index:5555;
}
#row3 {
z-index:5555;
}
#banner {
height: auto;
overflow: hidden;
max-height: 90%;
}
#banner #bg {
width: expression( document.body.clientWidth < 907 ? "906px" : "auto" ); /* set min-width for IE */
height: expression( this.scrollHeight < 426 ? "425px" : "auto" ); /* sets min-height for IE */
min-height: 425px;
min-width: 906px;
}
#banner #splash {
position:absolute;
padding:0;
width:672px;
min-width: 672px;
max-width: 672px;
height:164px;
min-height: 164px;
max-height: 164px;
overflow:hidden;
bottom:35px;
right:25px;
}
#banner #logo {
display:block;
width:180px;
height:118px;
clear:both;
padding:0;
position:absolute;
top:25px;
left:35px;
text-decoration:none;
}
#banner #logo:hover {
text-decoration:none;
cursor:pointer;
}
#banner #logotext {
z-index:4444;
font-family:"Times New Roman", Times, serif;
color:#FFF;
}
#banner #logotext #first {
font-size:35px;
border-top: 2px solid #ffffff;
border-right: 2px none #ffffff;
border-bottom: 2px none #ffffff;
border-left: 2px none #ffffff;
padding:5px 0 0 0;
}
#banner #logotext #second{
font-size:20px;
border-top: 2px none #ffffff;
border-right: 2px none #ffffff;
border-bottom: 2px solid #ffffff;
border-left: 2px none #ffffff;
padding:0 0 5px 0;
}
#banner #logotext #first, #banner #logotext #second {
display:block;
text-transform:uppercase;
text-emphasis:none;
text-decoration:none;
font-style: normal;
font-variant: normal;
line-height:102%;
}
#sub {
padding:10px 0 10px 0;
min-width:419px;
}
#sub .span199 {
float: left;
width: 199px;
min-width: 199px;
max-width: 199px;
margin-left: 10px;
padding:0 0 3px 0;
border-top: 3px none #CED4DA;
border-right: 3px none #CED4DA;
border-bottom: 3px solid #CED4DA;
border-left: 3px none #CED4DA;
}
#sub div a img {
display:block;
margin:0 0 3px 0;
padding:1px 0 1px 0;
border-top: 4px solid #1a3858;
border-right: 4px none #1a3858;
border-bottom: 3px solid #CED4DA;
border-left: 4px none #1a3858;
}
#sub div span{
display:block;
height:19px;
width:97px;
}
#sub div span#d2d {
background-image:url(../images/d2d.jpg);
background-position:top center;
}
#sub div span#p2d {
background-image:url(../images/p2d.jpg);
background-position:top center;
}
#sub div span#d2p {
background-image:url(../images/d2p.jpg);
background-position:top center;
}
#sub div span#p2p {
background-image:url(../images/p2p.jpg);
background-position:top center;
}
#sub .span199 span#d2d:hover, #sub .span199 span#p2d:hover, #sub .span199 span#d2p:hover, #sub .span199 span#p2p:hover {
background-position:bottom;
}
#sub div a:link, #sub div a:visited {
color: #1A3858;
text-decoration: none;
padding: 5px 0;
font: bold 10pt/150% "Myriad Pro", Arial, sans-serif;
width: 100%;
}
#sub div a:hover, #sub div a:active {
color:#728DAA;
}
#foot {
margin: 0;
padding: 0;
display: block;
}
#foot li {
font-family: Arial, Myriad Pro, sans-serif;
color: #3f4c56;
padding: 0;
float: left;
font-size: 9pt;
text-decoration: none;
}
#foot li a {
display:block;
height:19px;
background-repeat:no-repeat;
}
#foot li a#africa {
width:45px;
background-image:url(../images/africa.jpg);
background-position:top center;
}
#foot li a#asia {
width:35px;
background-image:url(../images/asia.jpg);
background-position:top center;
}
#foot li a#australia {
width:73px;
background-image:url(../images/australia.jpg);
background-position:top center;
}
#foot li a#europe {
width:54px;
background-image:url(../images/europe.jpg);
background-position:top center;
}
#foot li a#nAmerica {
width:103px;
background-image:url(../images/nAmerica.jpg);
background-position:top center;
}
#foot li a#sAmerica {
width:103px;
background-image:url(../images/sAmerica.jpg);
background-position:top center;
}
#foot li a#africa:hover, #foot li a#asia:hover, #foot li a#australia:hover, #foot li a#europe:hover, #foot li a#nAmerica:hover, #foot li a#sAmerica:hover {
background-position:bottom center;
}
#foot li a, #foot li a:visited {
color: #3f4c56;
padding: 0 10px 0 0;
float: left;
text-decoration: none;
font: normal 9pt/36px Arial, "Myriad Pro", sans-serif;
}
#foot li a:hover, #foot li a:active {
color:#5D7282;
}
.footerbox {
border-top: 4px solid #CED4DA;
padding: 8px 0 0 0;
margin: 5px 0 0 0;
}
#subsub, #copy {
margin:0;
padding:0;
}
#subsub li, #copy li {
float:left;
margin:0 5px 0 0;
}
#subsub {
font-family:Arial, Arial, Helvetica, sans-serif;
font-size:9pt;
font-weight: normal;
color:#3f4c56;
line-height:30px;
}
#subsub li a {
display:block;
height:19px;
}
#subsub li a#priceQuote {
background-image:url(../images/priceQuote.jpg);
background-position:top center;
width:83px;
}
#subsub li a#contact {
background-image:url(../images/contact.jpg);
background-position:top center;
width:63px;
}
#subsub li a#priceQuote:hover, #subsub li a#contact:hover {
background-position:bottom center;
}
#subsub a, #subsub a:visited {
font-family:Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
color: #3f4c56;
line-height: 30px;
}
#subsub a:hover, #subsub a:active {
color:#5D7282;
text-decoration: none;
}
#copy li, #copy a, #copy a:visited {
font-family:Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #000;
line-height: 30px;
}
#copy a:hover, #copy a:active {
color:#5D7282;
text-decoration: none;
}
/* ============================= */
/* ! Layout for mobile version */
/* ============================= */
@media handheld, only screen and (max-width: 767px) {
body {
}
}
/* ========================================== */
/* ! Provide higher res assets for iPhone 4 */
/* ========================================== */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* .logo {
background: url(logo2x.jpg) no-repeat;
background-size: 212px 303px;
}*/
}
Internet Explorer 8 and below does not support media queries, so you can’t do responsive design out of the box for them. However you can use a javascript polyfill to enable them. Here you have a couple of them:
Hope it helps!