I viewed this layout in IE9 and the columns are all wacky, I’ve been up for the past 4 hours looking at the code and seeing double.
Can you please take a look at the code and tell me what’s wrong.
If you come across any other errors, please let me know so I can correct them.
Here is what its supposed to look like: http://i.imgur.com/d3yxq.jpg
CSS
html {
background: url("../images/wood.jpg");
font-family: Arial, Helvetica, Verdana, San-serif;
font-size: 14px;
color: #000;
text-align: center;
margin-top: 50px;
margin-bottom: 25px;
}
h1 { background:url("../images/logo.png") no-repeat top left; display:block; float:left; width:366px; height:126px; text-indent:-9999px;}
h2 {
font-family: 'Open Sans', Arial, Helvetica, Sans-serif;
font-size: 21px;
font-weight: 600;
color: #2c87cc;
margin: 8px 0 8px 0;
}
h3 {
font-family: 'Open Sans', Arial, Helvetica, Sans-serif;
font-size: 17px;
color: #2c87cc;
}
p {
margin: 12px 0 12px;
line-height: 1.5em;
}
a, a:link, a:visited { color:#3d8fce; text-decoration:none; }
a:hover { color:#2976b1; }
strong { font-weight:700; }
#site-wrapper { width:978px; margin:0 auto;}
#page-wrapper { background:#fff url("../images/watermark.gif") no-repeat top right; text-align:left; padding:20px; overflow:auto;}
#navigation { float:right; width:545px; text-align:right; }
ul#navigation { margin:0; list-style-type:none;}
ul#navigation li { display:inline; }
ul#navigation li a, ul#navigation li a:link, ul#navigation li a:active { color:#184a70; text-decoration:none; font-family: 'Open Sans', Arial, Helvetica, Sans-serif; font-size:16px; font-weight:600; padding-left:12px;}
img.slide { margin: 15px -20px 0; }
#footer { color:#7c4a12; margin-bottom:15px; }
#footer p { font-family: 'Open Sans', Arial, Helvetica, Sans-serif;}
#footer ul { list-style-type:none; }
#footer ul li { display:inline; }
.one-third {
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
width:220px;
}
.intro-text {
font-family: 'Open Sans', Arial, Helvetica, Sans-serif;
font-size: 19px;
font-weight: 400px;
color: #9a9a9a;
}
.highlight { float:right; font-size:18px; font-family:"Open Sans", Arial, Helvetica; font-weight:400; display:block; color:#8e8e8e; width:500px; text-align:center; }
.hightlight strong { font-weight:600; }
.small-text { font-size:14px; }
.subtitle { color:#909090; font-size:15px; margin-top:-10px;}
.top-bar { background:#955917; color:#fff; width:320px; margin:-25px 0 10px; padding:7px;}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
float: left;
display: inline;
margin-left:30px;
}
.grid1 {
width: 14px;
}
.grid2 {
width: 98px;
}
.grid3 {
width: 182px;
}
.grid4 {
width: 276px;
}
.grid5 {
width: 350px;
}
.grid6 {
width: 434px;
}
.grid7 {
width: 518px;
}
.grid8 {
width: 602px;
}
.grid9 {
width: 686px;
}
.grid10 {
width: 770px;
}
.grid11 {
width: 854px;
}
.first {
margin-left: 0;
clear: left;
}
.last{margin-right:0;}
/* clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix {
zoom: 1;
} /* IE6 */
*:first-child+html .clearfix {
zoom: 1;
} /* IE7 */
/* Prefix/Suffix classes for adding spacing in between divs */
.container .prefix1{padding-left:84px}
.container .prefix2{padding-left:168px}
.container .prefix3{padding-left:252px}
.container .prefix4{padding-left:336px}
.container .prefix5{padding-left:420px}
.container .prefix6{padding-left:504px}
.container .prefix7{padding-left:588px}
.container .prefix8{padding-left:672px}
.container .prefix9{padding-left:756px}
.container .prefix10{padding-left:840px}
.container .prefix11{padding-left:924px}
.container .suffix1{padding-right:84px}
.container .suffix2{padding-right:168px}
.container .suffix3{padding-right:252px}
.container .suffix4{padding-right:336px}
.container .suffix5{padding-right:420px}
.container .suffix6{padding-right:504px}
.container .suffix7{padding-right:588px}
.container .suffix8{padding-right:672px}
.container .suffix9{padding-right:756px}
.container .suffix10{padding-right:840px}
.container .suffix11{padding-right:924px}
/* Push/Pull classes for switching the order of divs */
.container .push1{left:84px}
.container .push2{left:168px}
.container .push3{left:252px}
.container .push4{left:336px}
.container .push5{left:420px}
.container .push6{left:504px}
.container .push7{left:588px}
.container .push8{left:672px}
.container .push9{left:756px}
.container .push10{left:840px}
.container .push11{left:924px}
.container .pull1{left:-84px}
.container .pull2{left:-168px}
.container .pull3{left:-252px}
.container .pull4{left:-336px}
.container .pull5{left:-420px}
.container .pull6{left:-504px}
.container .pull7{left:-588px}
.container .pull8{left:-672px}
.container .pull9{left:-756px}
.container .pull10{left:-840px}
.container .pull11{left:-924px}
.push1, .push2, .push3, .push4, .push5, .push6, .push7, .push8, .push9, .push10, .push11, .pull1, .pull2, .pull3, .pull4, .pull5, .pull6, .pull7, .pull8, .pull9, .pull10, .pull11{position:relative;}
HTML
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<title>Universal Martial Arts Center — A Complete School of Self Defense</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta charset="UTF-8" />
<meta name="keywords" content="taekwondo, hapkido, judo, karate, mma, mixed martial arts, taichi, tai chi, capoeira, jujutsu, jiujustsu, martial arts, bushido, jidokwon, kids, afterschool, grappling, thai, boxing, sambo, combat, army, military, defense, combatives"/>
<meta name="description" content="Universal Martial Arts Center is a professional martial arts school teaching: Taekwondo, Hapkido, Judo and MMA. Call (718)276-5516 or (516)424-3567 for more information."/>
<meta name="author" content="Universal Martial Arts Center" />
<meta name="copyright" content="©2011 Universal Martial Arts Center, Inc." />
<meta name="revisit-after" content="1 day" />
<link rel="stylesheet" type="text/css" media="all" href="stylesheets/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="stylesheets/site.css" />
<link rel="stylesheet" type="text/css" media="all" href="stylesheets/978_grid.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="scripts/modernizr-2.0.6.min.js"></script>
<![endif]-->
</head>
<body>
<div id="site-wrapper">
<div id="page-wrapper">
<!-- Header -->
<h1>Universal Martial Arts Center</h1>
<p class="highlight">The Home of <strong>Universal MMA Fight Team</strong><br />Team Universal <span class="small-text">(Taekwondo, Judo & MMA)</span>
<ul id="navigation">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#programs">Programs</a></li>
<li><a href="#schedule">Class Schedule</a></li>
<li><a href="#media">Media</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
<!-- / Header -->
<div id="slider">
<img src="http://www.sitepoint.com/forums/images/slide_2.jpg" width="978" height="300" class="slide" alt="" />
</div>
<div class="grid8 first">
<p class="intro-text">Welcome to Universal Martial Arts Center, a school of professional martial arts instruction for over 10 years. We have a team of dedicated instructors who have produced champions in life, as
well as in the martial arts.</p>
</div>
<div class="grid4">
Twitter Widget
</div>
<div class="grid4 first">
<h2>News & Updates</h2>
<h3 class="subtitle">School News & Class Updates</h3>
<p>Quo ut ubique civibus. Vim cu inimicus vituperatoribus. Vocibus mentitum eu vim, sea ut alienum suavitate gloriatur. Per error denique delicata ex, pro et omnium corpora temporibus, eu nullam menandri eos. Mea et solet deleniti, aperiam delectus interesset ad usu, inani impetus gubergren his in.</p>
</div>
<div class="grid4">
<h2>Upcoming Events</h2>
<h3 class="subtitle">Tournaments & Seminars</h3>
<p>An pro quot harum, elit minim fuisset mea no, at quo affert tantas meliore. Per id suas ferri dissentiet. Ne mea graecis accumsan, mel meis quidam essent ut, cu quo voluptaria constituam disputationi. Euismod suscipit ea eam. Nam in error urbanitas, his ex nusquam tibique disputationi. Est ea oratio delicatissimi.</p>
</div>
<div class="grid4">
<h2>Tournament Results</h2>
<h3 class="subtitle">Taekwondo, Judo & MMA</h3>
<p>Ea ius tale facete impetus, et zril saperet reprehendunt eam, clita labores expetenda has eu. Electram concludaturque id eum. Eos no elit maiestatis reprimique. Mel labore deserunt ea, ne sint facilisi sea. Quo verear vituperata ad, vel eros vulputate ne, pri vidit iusto latine ei. Suas ipsum essent ea mea.</p>
</div>
</div>
<div id="footer">
<p>©2011 Universal Martial Arts Center</p>
<ul>
<li><a href="#legal">Terms of Use</a></li>
<li><a href="#privacy">Privacy Policy</a></li>
<li><a href="#legal">Legal Information</a></li>
</ul>
</div>
</div>
<!-- Google Analytics -->
<script>
window._gaq = [['_setAccount','UA-XXXX-1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
</body>
</html>
