Menu
Hi, I have been developing a website, and it has passed the w3c markup validator. It works great in firefox and ie7, however in ie6, the pages content seems to shift far to the right. Also some of the images don’t even show?
Any help would be greatly appreciated. website:[url]www.royalewithcheese.org
HTML:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“
<html xmlns=”
<head>
<title>Royale with Cheese</title>
<link href=”withcheese.css” rel=”stylesheet” type=”text/css” media=”screen” />
<!–[if lt IE 7]>
<style media=”screen” type=”text/css”>
#container {
height:100%;
}
</style>
<![endif]–>
</head>
<body>
<div id=”container”>
<!–headerstart–>
<div id=”header”>
<div id=”metric”><img src=”images/metric.jpg” alt=”check out the brain on brad”/></div>
<div id=”navcontainer”>
<ul>
<li><a href=”index.html” target=”_parent”>x NEWS</a></li>
<li><a href=”music.html” target=”
<li><a href=”art.html” target=”_parent”>x ART</a></li>
<li><a href=”film.html” target=”
<li><a href=”tech.html” target=”_parent”>x TECH</a></li>
</ul>
</div>
</div>
<!–headerend–>
<!–bodystart–>
<div id=”body”>
<div class=”colmask holygrail”>
<div class=”colmid”>
<div class=”colleft”>
<div class=”col1wrap”>
<div class=”col1″>
<!– Column 1 News –>
<div id=”mainnews”>
<h1>Royale With Cheese… The Official Launch Baby!</h1>
<h4>June 27 | 2009</h4>
<div id=”articlepicleft”>
<img src=”images/news/yoursource.jpg” alt=”news” />
</div>
<div id=”articletext”>
<h2>Off the ground</h2>
<p>Welcome to the Royale with Cheese website. We are here to bring you our latest news and reviews on everything art, music, film related.</p><br/>
<p>In this layout the side column widths are in pixels and the centre page adjusts in size to fill the rest of the screen. Vertical dimensions are left unset so they automatically stretch gaps.</p>
</div> </div>
<br />
<div id=”leftnews”>
<h2>Feature Video</h2>
<br />
<img src=”images/framefor320.jpg” alt=”video”/>
<p>I’ve colour coded each div so it’s easy to see:</p>
<p>The header, colmask and in content column (col1) comes before the other columns, this is great for SEO.</p>
<p>Try my <a href=”
mode”>Quirks-mode free and IE conditional comments free</a> version of this layout.</p>
</div>
</div>
</div>
<!– Column 1 end –>
<div class=”col2″>
<!– Column 2 News–>
<h2>In the News</h2>
<p>Sexy billboard goes too far? Calvin Klein ad with half dressed models stirs controversy in Manhattan. is more suprised that any billboard with models stirs controversy these days. <br />
<a href=”
this book</a></p><br/>
<div id=”picture”><img src=”images/news/mos.jpg” alt=”the black jack johnson”/></div>
<p>The Mighty Mos Def drops a new album, and after a good listen, we say it’s straight fire!<br/>
<a href=”
the Yahoo link</a></p><br/>
<!– Column 2 end –>
</div>
<div class=”col3″>
<!– Column 3 start –>
<h3>iPhone and Touch</h3>
<p>We have coded and tested our site to be compatible with your mobile web browsers ya’ll.</p>
<!– Column 3 end –>
</div>
</div>
</div>
<div id=”footer”>
<div id=”footerindent”>
<p>
<a href=”_blank”>Edited by Dave P
</a> |
<a href=”advertise.html” target=”
<a href=”disclaimer.html” target=”_parent”>Disclaimerz</a>
</p>
<br />
</div>
</div>
</div></div></div>
</body>
</html>
CSS:
@charset “utf-8”;
/* CSS Document
* {margin: 0; padding: 0;}
html,
body {
background-color: #000000;
background-image: url(images/logo.jpg);
background-repeat: no-repeat;
border:0; /
width:100%;
color: #CCCCCC;
height: 100%;
margin:0;
padding:0;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background:none;;
padding:0px;
}
#body {
padding: none;
padding-bottom:30px; /* Height of the footer
}
h1 {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
background-color: #336699;
padding-left: 6px;
border-style: solid;
border-width: 8px;
border-color: #336699;
margin-bottom: 4px;
}
h2 {
color: #336699;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
font-variant: small-caps;
letter-spacing: .01em;
font-weight: 300;
margin-bottom: 5px;
}
h3 {
color: #ccff00;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 200;
margin-bottom: 5px;
letter-spacing: .1em;
}
h4 {
color: #ccff00;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-variant: small-caps;
letter-spacing: .01em;
font-weight: 500;
margin-bottom: 5px;
text-align: right;
letter-spacing: 5px;
}
#navcontainer ul
{
padding-left: 0;
margin-left: 0px;
margin-top: 150px;
background-color: #999999;
color: #000000;
float: left;
width: 100%;
height: 30px;
font-family: arial, helvetica, sans-serif;
font-weight: 700;
margin-bottom: 27px;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.27em 1em;
background-color: #CCFF00;
color: #000000;
text-decoration: none;
float: left;
border-right: 4px solid #000000;
height: 22px;
}
#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}
/* ‘widths’ sub menu
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
#metric
{
position: absolute;
right: 65px;
top: 104px;
}
#footer {
clear: both;
background-color: #999999;
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
}
#footer p {
color: #000000;
text-align: right;
font-weight: 400;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
padding: 8px;
margin: 0px;
}
#footer a {font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
}
#footer a:hover {
font-family: Arial, Helvetica, sans-serif;
color: #ccff00;
text-decoration: none;
}
#footerindent {
padding-right: 100px;
padding-top: 1px;
}
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place
clear:both;
float:left;
width:100%; /* width of whole page
overflow:hidden; /* This chops off any overhanging divs
padding-bottom: 40px;
}
/* holy grail 3 column settings
.holygrail {
background: none; /* Right column background colour
}
.holygrail .colmid {
float:left;
width:200%;
margin-left:-200px; /* Width of right column
position:relative;
right:100%;
background: none; /* Centre column background colour
}
/*set most of the column values here
.holygrail .colleft {
float:left;
width:100%;
margin-left:-50%;
position:relative;
left:400px; /* Left column width + right column width */
background: none; /* Left column background colour */
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 20px;
}
.holygrail .col1wrap {
float:left;
width:50%;
position:relative;
right:200px; /* Width of left column */
padding-bottom:1em; /* Centre column bottom padding. Leave it out if it’s zero */
}
.holygrail .col1 {
margin:0 215px; /* Centre column side padding:
Left padding = left column width + centre column left padding width
Right padding = right column width + centre column right padding width */
position:relative;
left:200%;
overflow:hidden;
}
.holygrail .col1 a {
font-family: Arial, Helvetica, sans-serif;
color: #ffffff;
font-weight: 500;}
.holygrail .col2 {
float:left;
float:right; /* This overrides the float:left above */
width:170px; /* Width of left column content (left column width minus left and right padding) */
position:relative;
right:15px; /* Width of the left-had side padding on the left column */
}
.holygrail .col2 a {
font-family: Arial, Helvetica, sans-serif;
color: #ffffff;
font-weight: 500;
}
.holygrail .col3 {
float:left;
float:right; /* This overrides the float:left above */
width:170px; /* Width of right column content (right column width minus left and right padding) */
margin-right:45px; /* Width of right column right-hand padding + left column left and right padding */
position:relative;
left:50%;
}
#mainnews {
border-color: #999999;
border-style: solid;
border-width: 4px;
background-color: #000000;
padding: 18px;
min-height: 250px;
}
#articlepicleft {
float: left;
margin-right: 25px;
margin-bottom: 10px;
}
#articletext {
/*padding-top: 5px;
}
#leftnews {
width: 40%;
}
#picture {
border-color: #ccff00;
border-style: solid;
border-width: 2px;
margin-bottom: 6px;
}
#disclaimer {
padding-left: 125px;
width: 75%;
}
#disclaimer ul{
padding-left: 35px;
}
#disclaimerdent {
padding-left: 35px;
}