Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question IE6: 2 column layout, The second column drops down under the first

    Hi There folks...

    I have a browser problem with my site - IE6
    http://jonwhittlestone.elementfx.com...lease/main.php

    If you can see this screenshot
    http://jonwhittlestone.elementfx.com...Untitled-1.gif

    It looks fine in firefox and chrome and the CSS and HTML validates

    i just don't know! Has anyone got any ideas??

    thanks a lot

    Jon whittlestone

    html
    [code]
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>This is the title</title>
    <base href="http://jonwhittlestone.elementfx.com/helpplease/content/" />

    <META name="KeyWords" content="">
    <META name="description" content="">
    <meta name="robots" content="noindex,nofollow" />

    <meta name="verify-v1" content="KLxVjt23uxQaolsqjHDRpTtPn3am1kK74X3zjGbNbS0=" />
    <script src="../../js/web.js" language="JavaScript"></script>

    <link href="css/style.css" rel="stylesheet" type="text/css" />

    <link href="css/hesback/style.css" rel="stylesheet" type="text/css" />
    <script language= "javascript">

    function advent()
    {
    var $i = window.open('/skin/promotions/advent/advent_calendar.html',"advent","toolbar=0,top=0,left=0,location=0,directories=0,status=1,menubar=0,s crollbars=0,resizable=0,width=770,height=585");
    }

    function howtoplay(){
    window.open('/skin/howtoplay.php',"game","toolbar=0,location=0,left=0,top=0,directories=0,status=0,menubar=0,scrollbars =0,resizable=1,width=720,height=520");
    }
    function MM_openBrWindow(theURL,winName,features) { //v2.0
    window.open(theURL,winName,features);
    }

    <!--
    function MM_swapImgRestore() {
    //v3.0
    var i,x,a=document.MM_sr;
    for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_preloadImages() {
    //v3.0
    var d=document; if(d.images){
    if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
    for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} }
    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; }
    function MM_swapImage() {
    //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //-->
    </script>

    <meta name="verify-v1" content="SmZtEvto1uhLnJ3too0BYUIAbfznCWIxKiPi/AB4X1k=" />
    </head>

    <body style="">
    <!-- 77 TRACKING - DON NOT REMOVE -->
    <script language="javascript" src="http://d0004.77tracking.com/77Tracking.js.ashx?website=3cec7d50&defaultadunit=55848f6f"></script>
    <!-- END 77 TRACKING -->
    <div id="page_margins">
    <!-- start: skip link navigation -->

    <a class="skip" title="skip link" href="#navigation">Skip to the navigation</a>
    <a class="skip" title="skip link" href="#content">Skip to the content</a>
    <!-- end: skip link navigation -->
    <div id="page">
    <div id="header">
    <a href=""><img src="fb4images/homepage/hesback/fb3_logo.gif" style="float:left"></a>
    <!-- <img src="fb4images/homepage/fb3_quote.gif" style="margin-left:116px"> -->
    <!-- form goes here -->

    <FORM name="topForm" action="members.php" method="POST">
    <input name="form_action" id="form_action" type="hidden" value="LOGIN">
    <div id="login">
    <!-- <input type="image" src="fb2images/fb2_btn_go_new.gif" name="Login" value="Login" name="go_button_nav" style="margin-left:5px"> -->
    <input src="fb4images/homepage/fb3_btn_go.gif" type="image" id="submit" name="submitLoginButton" value="Login" onclick="go('login',false)" />
    <div id="loginfields">
    <span>Alias</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="Alias" class="textfield" tabindex=1 value="">
    <span>Password</span><input type="password" name="Password" class="textfield" id="Password" TABINDEX=2 value="">
    </div>

    <div class="forgotten"><a href="forgot.php">Forgotten Password?</a></div>
    </div>

    </form>
    <!-- end form -->
    <br style="clear:both" />
    </div>
    <div id="main">
    <div id="col1">

    <div id="col1_content" class="clearfix">
    <!-- <img src="fb4images/homepage/hesback/hdg_millionmust.gif"/><br />
    <img src="fb4images/homepage/hesback/hdg_latestneon.gif"/> -->
    <div style="margin:0px 0 0px 20px">
    <img src="fb4images/homepage/hesback/bannerleft.png" />

    <div style="margin:15px 0px 0px 10px">
    <a href="#" onclick=""><img src="fb4images/homepage/hesback/jackpot_calendar.gif" /></a>
    </div>
    </div>

    <br /><br />



    </div>
    </div>



    <div id="col3">
    <div id="col3_content" class="clearfix">
    <div id="topnav">

    <div style="float:right"><img src="fb4images/homepage/hesback/fb3_topnav_tr.gif" align="absmiddle"></div>
    <div style="float:left"><img src="fb4images/homepage/hesback/fb3_topnav_tl.gif" align="middle"></div>
    <ul class="mainmenu">
    <li><a href="">Nav</a></li><img src="fb4images/homepage/fb3_topnav_pipe.gif" align="absmiddle" class="pipe">
    <li><a href="/skin/register.php">Nav</a></li><img src="fb4images/homepage/fb3_topnav_pipe.gif" align="absmiddle" class="pipe">

    <li><a href="/skin/promotions/index.php">Nav</a></li><img src="fb4images/homepage/fb3_topnav_pipe.gif" align="absmiddle" class="pipe">
    <li><a href="/skin/games/index.php">Nav</a></li><img src="fb4images/homepage/fb3_topnav_pipe.gif" align="absmiddle" class="pipe">
    <li><a href="">Nav</a></li><img src="fb4images/homepage/fb3_topnav_pipe.gif" align="absmiddle" class="pipe">
    <li><a href="/skin/funhouse/winners/index.php">Nav</a></li><img src="fb4images/homepage/fb3_topnav_pipe.gif" align="absmiddle" class="pipe">
    <li><a href="/skin/funhouse/index.php">Nav</a></li><img src="fb4images/homepage/fb3_topnav_pipe.gif" align="absmiddle" class="pipe">
    <li><a href="/skin/help/index.php">Nav</a></li>

    </ul>
    </div>
    <div id="foxy_content">

    <FORM name="mainForm" action="" method="POST" ID="mainForm">
    <input name="form_action" id="form_action" type="hidden" value="">
    </FORM>
    <a href="/skin/promotions/specials/million/index.php"><img src="fb4images/homepage/hesback/main_1mill.jpg" alt="1 Million MUST be won" /></a><a href="register.php"><img src="fb4images/homepage/hesback/whenyoujoin.jpg" alt="&pound;10 Free when you join" /></a><a href="javascriptlay();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('playnow','','fb4images/homepage/hesback/playnow_over.jpg',1)"><img src="fb4images/homepage/hesback/playnow_down.jpg" alt="Play Now" name="playnow" id="playnow"/></a><img src="fb4images/homepage/hesback/legdiv.jpg" /><a href="register.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('joinnow','','fb4images/homepage/hesback/joinnow_over.jpg',1)"><img src="fb4images/homepage/hesback/joinnow_down.jpg" name="joinnow" id="joinnow" alt="Join Now" /></a>
    <div id="offerterms">
    <h2><a href="/skin/promotions/specials/million/index.php">* Offer ends 28th February 2009. Click here for offer details and a full timetable of guaranteed jackpot games.</a></h2>

    </div>
    <h1 class="seotext">About SEO</h1>
    <p class="seotext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sit amet purus quis turpis condimentum dictum. Quisque sit amet neque vel nisi imperdieuismod a, vestibulum ac, mattis quis, orci. Vivamus quam sapien, dictum vitae, tempor ut, fermentum tincidunt, augue..</p>
    <p class="seotext">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc luctus, libero vitae lobortis commodo, justo libero elementum magna, ut fermentum ipsum sapien id arcu. Praesent laoreet mauris a risus. Nam diam sapien, accumsan a, bibendum id, pellentesquFusce vitae ligula. Donec dignismod. Integer non metus id magna ornare gravida. Duis et ligula et libero laoreet pellentesque. Aenean quam. Curabitur porta mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vitae nisi. Suspendisse sem.
    </p>

    </div>
    <div id="bottomnav">
    <div style="float:right"><img src="fb4images/homepage/hesback/fb3_btmnav_br.gif" align="absmiddle"></div>

    <div style="float:left"><img src="fb4images/homepage/hesback/fb3_btmnav_bl.gif" align="middle"></div>
    <ul class="mainmenu">
    <li><a href="">nav</a></li><img src="fb4images/homepage/fb3_topnav_pipe.gif" align="absmiddle" class="pipe">
    <li><a href="">nav</a></li><img src="fb4images/homepage/fb3_topnav_pipe.gif" align="absmiddle" class="pipe">
    <li><a href="">Contact Us</a></li><img src="fb4images/homepage/fb3_topnav_pipe.gif" align="absmiddle" class="pipe">
    <li><a href="">About Us</a></li><img src="fb4images/homepage/fb3_topnav_pipe.gif" align="absmiddle" class="pipe">
    <li><a href="">nav &amp; nav</a></li><img src="fb4images/homepage/fb3_topnav_pipe.gif" align="absmiddle" class="pipe">

    <li><a href="general/privacy.php">nav</a></li><img src="fb4images/homepage/fb3_topnav_pipe.gif" align="absmiddle" class="pipe">
    <li><a href="/">nav</a></li>
    </ul>
    </div>
    <div id="footer">
    <div style="float:right"><img src="fb4images/homepage/hesback/fb3_footer_right.gif" align="absmiddle"></div>
    <div style="float:left"><img src="fb4images/homepage/hesback/fb3_footer_left.gif" align="middle"></div><div id="cards">
    <img src="fb4images/homepage/fb3_cards.gif" style="margin-top:22px">

    <img src="fb4images/homepage/fb3_cards_tech.gif" style="margin-left:45px;" >

    </div></div>
    </div>
    <div id="footsubnav"><a href="">sub sub nav</a> | <a href="">sub sub nav</a> | <a href="">sub sub nav</a> | <a href="">sub sub nav</a> | <a href="/chat-bingo.php">sub sub nav</a> | <a href="/skin/promotions/welcome.php">sub sub nav</a> | <a href="">sub sub nave</a>


    <p><br />Always - for more information visit <a href= "">www.somesite.co.uk</a></p>

    <p class="seotext" align="center" style="width:710px;font-size:11px; padding:5px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sit amet purus quis turpis condimentum dictum. Quisque sit amet neque vel nisi imperdieuismod a, vestibulum ac, mattis quis, orci. Vivamus quam sapien, dictum vitae, tempor ut, fermentum tincidunt, augue.<br/>
    &copy; Quisque sit amet neque vel nisi imperdieuismod a, vestibulum ac, mattis quis, orci. Vivamus quam sapien,
    </p></div>
    <!-- IE Column Clearing -->
    <div id="ie_clearing"> * </div>
    </div>

    </div>
    <!-- begin: #footer -->

    </div>
    </div>

    </body>
    </html>

    [code]

    css
    Code:
    body {
    background:#BA39AD url(../fb4images/homepage/fb3_pagebg.gif) repeat-x scroll 0 0;
    }
    * {
    margin:0;
    padding:0;
    }
    img {
    border:0 none;
    }
    #page_margins {
    margin:0 auto;
    }
    #page_margins {
    max-width:950px;
    min-width:950px;
    width:950px;
    }
    #page {
    padding:4px 10px;
    }
    #header {
    color:#000000;
    margin-bottom:8px;
    }
    #topnav, #bottomnav {
    color:#AAAAAA;
    text-align:center;
    }
    #topnav {
    background:transparent url(../fb4images/homepage/fb3_topnav_slice.jpg) repeat-x scroll 0 0;
    height:31px;
    }
    #bottomnav {
    background:transparent url(../fb4images/homepage/fb3_btmnav_slice.jpg) repeat-x scroll 0 0;
    font-size:smaller;
    height:32px;
    margin-bottom:10px;
    }
    #footer {
    background:transparent url(../fb4images/homepage/fb3_footer_slice.gif) repeat-x scroll 0 0;
    height:71px;
    }
    #col1 {
    float:left;
    width:190px;
    }
    #col2 {
    display:none;
    }
    #col3 {
    margin:0 0 0 190px;
    width:auto;
    }
    #col1_content {
    }
    #col3_content {
    }
    * html #col1 {
    margin-right:-3px;
    }
    * html #col3 {
    height:1%;
    margin-left:-3px;
    }
    * html #bottomnav {
    float:left;
    }
    * html #footer {
    float:left;
    }
    #foxy_content {
    background-color:#9232CF;
    border-left:1px solid #FFC7F9;
    border-right:1px solid #FFC7F9;
    padding:13px 6px;
    }
    #login {
    background:transparent url(../fb4images/homepage/fb3_bg_login.gif) no-repeat scroll 0 0;
    color:#FFFFFF;
    float:right;
    font-size:0.8em;
    height:60px;
    margin-left:105px;
    padding:30px 6px 10px;
    width:188px;
    }
    #submit {
    float:right;
    }
    .loginfields {
    float:left;
    text-align:right;
    }
    #login .textfield {
    background:transparent url(../fb4images/homepage/fb3_bg_textbox.gif) repeat scroll 0 0;
    border:medium none;
    font-size:0.9em;
    height:13px;
    padding:1px;
    width:83px;
    }
    #login a {
    color:#FFFFFF;
    font-size:0.8em;
    }
    #login a:hover {
    text-decoration:none;
    }
    .forgotten {
    clear:both;
    margin-top:8px;
    }
    ul.mainmenu li {
    display:inline;
    margin:0;
    padding:0;
    }
    ul.mainmenu img.pipe {
    padding:0 2px 0 6px;
    }
    ul.mainmenu {
    margin:0;
    padding:4px 0 0;
    }
    #bottomnav ul.mainmenu {
    padding-top:10px;
    }
    #tablets {
    float:left;
    margin-top:12px;
    width:100%;
    }
    #tablets li {
    background:transparent url(../fb4images/homepage/fb4_bg_contenttablet.gif) no-repeat scroll 0 0;
    float:left;
    margin:0;
    }
    #tablets ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    }
    #tablets div {
    display:block;
    float:left;
    font-weight:normal;
    height:328px;
    padding:19px 0;
    text-align:center;
    text-decoration:none;
    width:181px;
    }
    #tablets .tablet_title {
    margin-bottom:10px;
    }
    #tablets .tablet_image {
    }
    #tablets div h3 {
    padding:0 6px;
    }
    #tablets div h2 {
    color:#FFFFFF;
    font-size:1.1em;
    }
    .tablet_btn {
    margin-top:10px;
    }
    #instant ul {
    list-style-type:none;
    margin:13px 0 0 0;
    padding:0;
    }
    #instant ul li {
    }
    .instant_icon {
    float:left;
    padding-bottom:9px;
    width:51px;
    }
    .instant_desc {
    float:right;
    padding-bottom:9px;
    padding-right:10px;
    width:122px;
    }
    .instant_copy {
    }
    body {
    font-family:Arial,Helvetica,sans-serif;
    }
    ul.mainmenu li a {
    color:#FFFFFF;
    font-family:Verdana,Arial,sans-serif;
    font-size:0.9em;
    font-weight:bold;
    text-decoration:none;
    }
    ul.mainmenu li a:hover {
    text-decoration:underline;
    }
    .seotext {
    color:#FFFFFF;
    }
    #login p {
    color:#FFFFFF;
    font-size:0.8em;
    font-weight:bold;
    margin:5px 0;
    }
    #login .cp {
    color:#FFFFFF;
    margin:2px 0;
    }
    #sidebar {
    background:transparent url(../fb4images/homepage/fb3_bg_sidebar.gif) no-repeat scroll 0 0;
    height:305px;
    margin-bottom:16px;
    padding:8px;
    width:164px;
    }
    .side_heading {
    float:left;
    margin-top:6px;
    padding-top:5px;
    }
    .side_data {
    background:transparent url(../fb4images/homepage/fb3_sidedata.gif) no-repeat scroll 0 0;
    float:right;
    height:23px;
    margin-top:6px;
    padding-top:5px;
    text-align:center;
    width:51px;
    }
    .side_data_long {
    background:transparent url(../fb4images/homepage/fb3_sidedata_long.gif) no-repeat scroll center center;
    height:28px;
    padding-top:8px;
    text-align:center;
    width:158px;
    }
    .side_data_med {
    background:transparent url(../fb4images/homepage/fb3_sidedata_med.gif) no-repeat scroll center center;
    float:right;
    height:24px;
    padding-top:4px;
    text-align:center;
    width:85px;
    }
    #footsubnav {
    color:#FFFFFF;
    font-size:0.7em;
    font-weight:bold;
    margin-top:12px;
    text-align:center;
    }
    #footsubnav a {
    color:#FFFFFF;
    }
    #footsubnav a:hover {
    text-decoration:none;
    }
    #footsubnav p.seotext {
    color:#63228C;
    }
    #cards {
    height:71px;
    }
    .skip {
    display:none;
    }
    Last edited by jwhittlestone; 02-17-2009 at 05:11 PM.

  • #2
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Jon,

    Why not use what works. There are a lot of CSS templates available that have solved the IE problems. For instance:

    http://blog.html.it/layoutgala/

    Phil

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jwhittlestone,
    I think a good place to start might be to fix some of those errors. See what the validator says about your site.

    Check the links about validation in my sig below.



    Edit: You can edit your original post to fix those code tags.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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