www.webdeveloper.com
Results 1 to 2 of 2

Thread: ie6 bug, what hack to use?

  1. #1
    Join Date
    Jun 2009
    Posts
    6

    ie6 bug, what hack to use?

    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:www.royalewithcheese.org

    HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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="_parent">x MUSIC</a></li>
    <li><a href="art.html" target="_parent">x ART</a></li>
    <li><a href="film.html" target="_parent">x FILM</a></li>
    <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="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>

    <!-- Column 3 end -->
    </div>
    </div>
    </div>

    <div id="footer">
    <div id="footerindent">
    <p>
    <a href="http://www.davidprokopchuk.info" target="_blank">Edited by Dave P
    </a> &nbsp; &nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;
    <a href="advertise.html" target="_parent">Advertise </a>&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;
    <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; /* This removes the border around the viewport in old versions of IE */
    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;
    }

  2. #2
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles