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?
<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 />
<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="http://matthewjamestaylor.com/blog/holy-grail-liquid-layout-no-quirks-
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="http://www.ca.news.yahoo.com/s/capress/us_calvin_klein_racy_billboard" target="_blank">Buy
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="http://www.ca.news.yahoo.com/s/capress/us_calvin_klein_racy_billboard" target="_blank">Check
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>
.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;
}
.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 .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 .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%;
}
For IE 6 if using margin add display: inline; or inline-block; this will taker of double margin issue for IE 6 or else write conditional statement for IE 6 divide the margin by 2, example: if you have margin right 20px in ie6 CSS change that to 10px.
for image add display block if its CSS
make sure you declare the image size (height/width)both CSS or inline image
Reply With Quote
Bookmarks