SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Alignment Issue - Bicolumnar layout

    Hi there,

    I'm having a problem with one of my layouts when it's displayed in IE.

    There appears to be an alignment issue to the left of the div.col-left (coloured in yellow). I'm really not sure why it is showing up in IE, and I've checked my code over and can't really find anything that would explain why it's there. I was thinking it could possibly be fixed by display:inline but unfortunately this doesn't work

    Anyone any ideas as to why it's showing up only in IE?

    HTML and CSS:-

    Code:
    <html>
    <head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    <style>
    body{
    padding:0px;
    margin:10px;
    }
    
    .container{
    align:center;
    width:800px;
    background-color:transparent;
    }
    
    .header{
    width:100%;
    height:90px;
    background-color:#ff0000;
    margin-bottom:1px;
    }
    
    p{
    font-family:Arial;
    font-size:12px;
    color:#64a8d8;
    }
    
    
    img.logo{
    margin-top:16px;
    margin-left:15px;
    float:left;
    }
    
    img.navbar{
    margin-bottom:10px;
    }
    
    .col-left{
    width:239px;
    float:right;
    padding:0 0 0 11px;
    background-color:#ffff00;
    }
    
    .col-right{
    width:530px;
    float:right;
    padding:0 10px 0 10px;
    }
    
    .col-right h1{
    font-family:Arial;
    font-size:22px;
    color:#3177b7;
    margin:0px;
    }
    
    .col-right p{
    font-family:Arial;
    font-size:12px;
    color:#64a8d8;
    }
    
    .col-right p.blackboard{
    margin-left:270px;
    margin-top:-55px;
    }
    
    
    
    .footer{
    width:100%;
    height:50px;
    clear:both;
    
    }
    
    img.welcome_child{
    float:left;
    margin-right:10px;
    }
    
    img.clear-bar{
    margin-left:15px;
    margin-top:-10px;
    padding-top:0px;
    }
    
    img.titles{
    margin-top:15px;
    }
    
    .researchmore-cols{
    width:137px;
    float:left;
    margin-left:30px;
    display:inline;
    padding-left:2px;
    }
    
    .researchmore-cols h1{
    font-family:Arial;
    font-size:12px;
    color:#9cc7e7;
    font-weight:normal;
    }
    
    .researchmore-cols p{
    font-family:Arial;
    font-size:11px;
    color:#64a8d8;
    margin-top:2px;
    }
    
    img.tryitnowforfree{
    margin-bottom:10px;
    }
    
    ul{
    font-family:Arial;
    font-size:12px;
    color:#64a8d8;
    line-height:17px;
    margin-bottom:20px;
    }
    
    table.login{
    float:right;
    margin-right:20px;
    font-family:Arial;
    font-size:10px;
    color:#58a0d6;
    padding-top:0px;
    }
    
    </style>
    <script type="text/javascript">sfm='';</script>
    
    <div align=center>
    </head><BODY><div class="container">
    
    <div class="header">
    <!--<table class="login" width="153" border="0">
      <tr>
        <td colspan="2">MEMBERS AREA</td>
      </tr>
      <tr>
        <td width="58">Username</td>
        <td width="79"><input name="username" type="text" id="username" size="13" /></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input name="password" type="text" id="password" size="13" /></td>
      </tr>
    </table>-->
    </div>
    <table class="login" width="800" border="0" cellpadding="0" cellspacing="0" align=center>
      
    </table>
    <BR><BR>
    <div align=left>
    <div class="col-right">
    
    <!-- id : 30 -->
    <div class=long><a name='UKTW30'></a><img class="welcome_child" src="images/ptanet/welcome_child.jpg"/>
    <h1>welcome</h1>
    
    <br/><br/>
    <b><a href="index.php?pg=23">Find out more</a></b>
    </p>
    <img src="images/ptanet/blackboard.jpg"/>
    
    
    <img src="images/title_researchmore.jpg" class="titles"/>
    <div class="researchmore-cols">
    <img src="images/templates.jpg"/>
    
    <h1>Templates</h1>
    
    </div>
    
    <div class="researchmore-cols">
    <img src="images/costcomparison.jpg"/>
    <h1>Cost Comparison</h1>
    
    </div>
    
    <div class="researchmore-cols">
    <img src="images/easysetup.jpg"/>
    <h1>Easy set-up</h1>
    
    
    </div>
    </div></div></div>
    
    
    <div align=left>
    <div class="col-left">
    
    <!-- id : 29 -->
    <div class=long><a name='UKTW29'></a><img class="tryitnowforfree" src="imagestryitnowforfree.jpg"/>
    </div><br clear=all>
    <!-- id : 28 -->
    <div class=long><a name='UKTW28'></a><p><img src="images/title_benefits.jpg"/><br>
    
    </div><br clear=all>
    <!-- id : 31 -->
    <div class=long><a name='UKTW31'></a><img src="images/bottomleftbox.jpg"/>
    </div></div></div>
    
    
    <div class="footer"></div>
    
    </div>
    </div>
    </div>
    </div></body></html>
    Thanks for the help

    James

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Start by using a proper DOCTYPE in your Web page. You have seven options available to you (though only four of them are viable): HTML 4.01 Frameset, Transitional and Strict; XHTML 1.0 Frameset, Transitional and Strict, and XHTML 1.1.

    Only HTML 4.01 Transitional and Strict, along with XHTML 1.0 Transitional and Strict, are really viable for most Web sites.


Bookmarks

Posting Permissions

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