...

View Full Version : IE6: 2 column layout, The second column drops down under the first



jwhittlestone
02-17-2009, 11:40 AM
Hi There folks...

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

If you can see this screenshot
http://jonwhittlestone.elementfx.com/helpplease/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


<!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,scrollbars=0,resizable=0,width=77 0,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=72 0,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="javascript:play();" 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;
}

PARoss
02-17-2009, 02:42 PM
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

Excavator
02-17-2009, 08:28 PM
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 (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fjonwhittlestone.elementfx.com%2Fhelpplease%2Fmain.php).

Check the links about validation in my sig below.



You can edit your original post to fix those code tags.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum