A variety of scripts are being tested:
$(document).ready(function(){$(".body").addClass("ie-min");});
$(document).ready(function(){$(".body").attr("class", "ie-min");});
$(document).ready(function(){$(".body").css("min-width", "350px");});
$(document).ready(function(){$(".body").css("min-width" : "350px");});
$(document).ready(function(){$(".body").css("minWidth", "350px");});
$(document).ready(function(){$(".body").css("minWidth" : "350px");});
The CSS Styles:
.body{min-width:1100px}
.ie-min{min-width:318px}
body.body{min-width:1100px}
body.ie-min{min-width:318px}
The HTML Structure:
<body class="body">
The class "body" sets the default minimum width for users without JavaScript. There have been attempts to implement this using external JavaScript files and within the page itself, including the example below:
<!--[if IE 8]>
<link rel="stylesheet"type="text/css"href="/css/ie8.css"media="all"/>
<script type="text/javascript">
$(document).ready(function(){$(".body").addClass("ie-min");});
</script>
<script type="text/javascript"src="/scripts/respond.min.js"></script>
<![endif]-->
Despite trying various combinations, the desired outcome is not achieved. Is there something missing in handling this specifically for IE8?