IE7 locks onto Mobil layout vs desktop layout
i developing new site , using fluid grid layout. have tested on laptop in firefox v18, internet explorer 9, , chrome v24. fine until tested on xp desktop. looked fine in firefox v18 on desktop, however, internet explorer 7 did not show content1 , content2 side side columns other browsers showed. in using ie developer tool bar shows division style them width=100%. in reviewing css place content 1 , content 2 has width=100% in mobile layout 480px , below. tablet , desktop layout both have widths below 50%.
here html:
<!doctype html>
<!--[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]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>conestoga wagon web service - business ally</title>
<meta name="author" content="conestoga wagon web service">
<meta name="description" content="conestoga wagon web service, business ally; mystique of yesteryear meets technolgy of today , provides small business , organizations access affordable professional web site design , hosting.">
<meta name="keywords" content="cheap website design,website design,affordable website design,custom website design,small businesses,website solutions,idaho website design,website designers,website hosting,web hosting">
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/fluid.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.4.1.min.js" type="text/javascript">
</script>
<script src="js/jquery.jcarousel.pack.js" type="text/javascript">
</script>
<script src="js/jquery-func.js" type="text/javascript"></script>
<!--
to learn more conditional comments around html tags @ top of file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
do following if you're using customized build of modernizr (http://www.modernizr.com/):
* insert link js here
* remove link below html5shiv
* add "no-js" class html tags @ top
* can remove link respond.min.js if included mq polyfill in modernizr build
-->
<!--[if lt ie 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/respond.min.js">
</script>
</head>
<body>
<div class="gridcontainer clearfix">
<div id="header">
<!-- start of header -->
<img src="images/header.png" alt="conestoga wagon web service header image">
<!-- end of header -->
</div>
<div id="menu">
<!-- start of navigation -->
<ul>
<li><a href="index.html">home</a></li>
<li><a href="about.html">about us</a></li>
<li><a href="design.html">design</a></li>
<li><a href="hosting.html">hosting</a></li>
<li><a href="contact.html">contact us</a></li>
<li><a href="faq.html">faq</a></li>
</ul>
<!-- end of navigation -->
</div>
<!-- start of content area -->
<div id="content1">
<h2>this test of h2 on home page</h2>
content layout division tag "content"
<p>combined optimal use of human resources, big no longer impregnable ensure non-operating cash outflows assessed. important ingredient of business process reengineering vitality of conceptual synergies of supreme importance new golden rule gives enormous power individuals , units. exploitation of core competencies essential enabler, through the adoption of proactive stance, astute manager can adopt position @ vanguard.</p>
<p>as knowledge fragmented specialities binary cause , effect complex patterns, important ingredient of business process reengineering. building flexibility through spreading knowledge , self-organization, benchmarking against industry leaders, essential process, should top priority @ times defensive reasoning, doom loop , doom zoom. maximization of shareholder wealth through separation of ownership management vitality of conceptual synergies of supreme importance knowledge fragmented specialities. balanced scorecard, executive dashboard, essential tool building dynamic relationship between main players. important ingredient of business process reengineering in collaborative, forward-thinking venture brought through merging of minds.</p>
<p>by moving executive focus lag financial indicators more actionable lead indicators, working through top-down, bottom-up approach, strategic vision - if indeed there 1 - required identify. organizations capable of double-loop learning, indubitably lay firm foundations leading company focus on improvement, not cost. moving executive focus lag financial indicators more actionable lead indicators, benchmarking against industry leaders, essential process, should top priority @ times building flexibility through spreading knowledge , self-organization. ensure non-operating cash outflows assessed.</p>
<p>measure process, not people. knowledge fragmented specialities combined optimal use of human resources, in order build shared view of can improved. exploiting productive lifecycle components , priorities change program motivating participants , capturing expectations. big no longer impregnable knowledge fragmented specialities.</p>
<p>by moving executive focus lag financial indicators more actionable lead indicators, organizations capable of double-loop learning, building dynamic relationship between main players. focus on improvement, not cost, quantitative analysis of key ratios has vital role play in exploitation of core competencies essential enabler. binary cause , effect complex patterns, new golden rule gives enormous power individuals , units, experience profound paradigm shift.</p>
</div>
<div id="content2">this content layout div tag "content2"
<p>love's not time's fool, though rosy lips , cheeks oh, no, ever fixed mark or bends remover remove. love alters not brief hours , weeks, star every wand'ring bark, within bending sickle's compass come. admit impediments; love not love looks on tempests , never shaken; oh, no, ever fixed mark. if error , upon me proved, worth's unknown, although height taken. bears out edge of doom.</p>
<p>it star every wand'ring bark, alters when alteration finds. love's not time's fool, though rosy lips , cheeks within bending sickle's compass come; alters when alteration finds. admit impediments; love not love if error , upon me proved, oh, no, ever fixed mark. love alters not brief hours , weeks, worth's unknown, although height taken. looks on tempests , never shaken; admit impediments; love not love love's not time's fool, though rosy lips , cheeks.</p>
<p>let me not marriage of true minds star every wand'ring bark, within bending sickle's compass come. alters when alteration finds, oh, no, ever fixed mark love's not time's fool, though rosy lips , cheeks. admit impediments; love not love let me not marriage of true minds looks on tempests , never shaken. within bending sickle's compass come; if error , upon me proved, never writ, nor no man ever loved. love's not time's fool, though rosy lips , cheeks love alters not brief hours , weeks, oh, no, ever fixed mark.</p>
<p>let me not marriage of true minds bears out edge of doom. oh, no, ever fixed mark looks on tempests , never shaken; or bends remover remove. within bending sickle's compass come; bears out edge of doom.</p>
<p>admit impediments; love not love love alters not brief hours , weeks, love's not time's fool, though rosy lips , cheeks. star every wand'ring bark, or bends remover remove. within bending sickle's compass come; oh, no, ever fixed mark worth's unknown, although height taken. love's not time's fool, though rosy lips , cheeks.</p>
</div>
<!-- end of content area -->
<div id="footer"> <hr class="divider">
<!-- start of footer area -->
<script type="text/javascript">
now=new date();
year=now.getfullyear();
</script>copyright © 2012-<script type="text/javascript">
document.write(year);
</script>
<strong> conestoga wagon web service</strong><br>
| <a class="active" href="index.html">conestoga wagon web service</a> | <a href="hosting.html">conestoga wagon web hosting</a> | <a href="proposal.html">request proposal</a> | <a href="tos.html">tos</a> | <a href="privacy.html">privacy policy</a> | <a href="hostagreement.html">web hosting agreement</a> | <br>
<strong>an idaho owned , operated web design , hosting company.</strong>
<!-- end of footer area -->
</div>
</div>
</body>
</html>
here css:
@charset "utf-8";
/* simple fluid media
note: fluid media requires remove media's height , width attributes html
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* ie 6 not support max-width default width 100% */
.ie6 img {
width:100%;
}
/*
dreamweaver fluid grid properties
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 12;
dw-gutter-percentage: 10;
inspiration "responsive web design" ethan marcotte
http://www.alistapart.com/articles/responsive-web-design
, golden grid system joni korpi
*/
/* mobile layout: 480px , below. */
.gridcontainer {
margin-left: auto;
margin-right: auto;
width: 98.1818%;
padding-left: 0.909%;
padding-right: 0.909%;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
}
#menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#menu ul{
list-style-type: none;
text-align: center;
font-weight: bold;
float: right;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0;
}
#menu ul li{
float: left;
display: inline;
}
#menu ul li a{
float: left;
display: inline;
width: 151px;
height: 100px;
background: url(../images/nav.png);
text-decoration: none;
line-height: 67px;
color: #ffb400;
}
#menu ul li a.active,
#menu ul li a:hover{ color:#fff; background: url(../images/nav-active.png) }
#content1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
text-align: justify;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
color: #ffb400;
text-align: center;
padding-top: 0px;
padding-bottom: 10px;
}
#footer {color: #ffb400; }
#content2 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
text-align: justify;
}
}
/* tablet layout: 481px 768px. inherits styles from: mobile layout. */
@media screen , (min-width: 481px) {
.gridcontainer {
width: 98.8636%;
padding-left: 0.5681%;
padding-right: 0.5681%;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
}
#menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#content1 {
clear: both;
float: left;
margin-left: 0;
width: 49.4252%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#content2 {
clear: none;
float: left;
margin-left: 1.1494%;
width: 49.4252%;
display: block;
}
}
/* desktop layout: 769px max of 1232px. inherits styles from: mobile layout , tablet layout. */
@media screen , (min-width: 769px) {
.gridcontainer {
width: 99.2424%;
max-width: 1232px;
padding-left: 0.3787%;
padding-right: 0.3787%;
margin: auto;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
}
#menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#content1 {
clear: both;
float: left;
margin-left: 0;
width: 49.6183%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#content2 {
clear: none;
float: left;
margin-left: 2%;
width: 48%;
display: block;
}
}
it seems ie7 locking onto first section of css , not moving desktop , haven't been able solve assistance appreciated.
thanks,
verne
i have been doing lot of looking around possible solutions ie 7 issue media queries. while there lot of diverse views on subject came across article seemed easier solution try else. downloaded js file they recommended, copied , pasted
<!-- css3-mediaqueries.js ie less 9 -->
<!--[if lt ie 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
into document , ie 7 shows web page ff, ie9, , chrome does. super easy fix, novice.
i hope helps else has helped me.
thanks,
verne
message edited by: in-idaho
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment