The different scripts being attempted:
$(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:
.body{min-width:1100px}
.ie-min{min-width:318px}
body.body{min-width:1100px}
body.ie-min{min-width:318px}
The HTML:
<body class="body">
The class “body” is the default min-width for users with javascript turned off. I’ve tried to run it with an external .js file via conditional comments and within the page itself. 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]-->
I’m trying this in different combinations and nothing is working. Am I missing something here for IE8?
The problem is that I had JQuery library being loaded in the bottom of my pages, so the script/scripts weren’t able to run if the library wasn’t loaded yet. Duh! Hope this may help anyone who encounters the same issues.