Content is getting pushed down in IE6 on shrinking the page

[kigoobe]

Hi guys

I am going thro' some terrible time since this morning trying to figure out why IE6 is pushing down my floating contents when I try to shrink the page.

A simplified version of the page is at http://kigoobe.com/bugs/test.php

See the right content is getting pushed down when the page is shrinked width-wise.

I will appreciate any help. Probably someone of you have already gone thro' this issue and have come across a workaround.

Thanks for your time.

[Paul O'B]

Hi,

I'm not sure what you expect to happen because the right column has a fixed width element and when the browser window closes there is not enough room for it so the float drops down below the other column to get more room like floats do.

You have simply hidden the overflow in other browsers and if you want to do the same for iE you would need to add a width here:

.bodyCenter
{
    border: 0px none transparent;
    background-color: #FFFFFF;
    overflow: hidden; /* for netscape, else it gives a forced scroll */
width:100%
}

Of course I'm sure you realise that using overflow:hidden means the content will be hidden and unreachable via scrollbar at small screens sizes.

[kigoobe]

Hi Paul

Thanks for your interest. I've removed the overflow, you are right. I didn't think about that consequence. But even after adding width: 100% the right div is still getting pushed down.

[Paul O'B]

even after adding width: 100% the right div is still getting pushed down.

lol - No I was saying that in conjunction with the overflow:hidden the width:100% would make IE behave like the other browsers and hide the content and thus stop the column dropping.

There isn't a solution for IE in that scenario because it will always look for room below the other element. The only solution would be to set a minimum width using an expression to hold the page open just before the dropping was about to take place.

Or you could reverse it so the left column drops down instead of the right.

The only other alternative is to use one of my negative margin layouts although this gets quite complicated when percentages are used.

http://www.pmob.co.uk/temp/2col-nofloatdrop-fluid.htm

In the above the right column will not drop but its a lot of hoops to jump through to get there

[kigoobe]

Yeah, I'm going thro' your code, that must be the best solution, but till now unable to make out what's stopping the drop ...

[Paul O'B]

make out what's stopping the drop ...

Mainly its the negative margin which moves the left column out of the way combined with the floated main content. Its a very difficult effect to achieve and I know no other way of stopping float drop without hiding the overflow.

[kigoobe]

#sidebar{
 	float:left;
 	width:40%;
	position:relative;
	margin-left:-40.9%;
 	left:-.1%;
	display:inline
}

you mean the margin-left and left of this code ?

[kigoobe]

OK, got it ... you have basically positioned the contents of the left column above the contents of the right (in the green part itself), and this do not physically stays on the yellow part ... that's done with the negative margins ...


hmmm ... in complicated pages this can really be rough ...

[kigoobe]

... and I know no other way of stopping float drop without hiding the overflow.

But one thing, do you mean that we can achieve that in some way if we hide the overflow ?

[Paul O'B]

If you refer back to #post2 then adding the width as well as keeping the overflow:hidden would have made ie6 behave the same as firefox. However this makes the hidden content unreachable but the float won't drop.

[kigoobe]

You are a winner Paul. Yeah, that's working indeed in http://kigoobe.com/bugs/test.php ... perfect ... now I have a solution .

I just have to figure out how this can be incorporated in the main site where I'm working on ... something is stopping that to work as expected, hope I'll figure out what's that ...

thanks for all your help Paul. And yes, your site pmob is a great site, I visit that often, and am using a few of the codes in different places. It's a real gold mine ... thanks for the good work.

[kigoobe]

Well

I tried, but it seems that something somewhere is messing things up. If someone can have a look at the CSS file and help me to understand what's pushing the right div to drop, even after applying width:100% to .bodyCenter, would be greatly appreciated.

Thanks.

/* CSS Document */
html, body
{
	background-color: #FFFFFF;
	color: #000000;
	/*line-height: 1.4;*/
	font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
}
 
body, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, li, ol, p, ul
{
	margin: 0;
	border: 0 none #FFFFFF;
	padding: 0;
}
 
table { border:0px; margin: 0px; padding: 0px; border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
 
 
ol, ul {
	list-style-type: none;
}
 
td {
	vertical-align: top;
}
 
h1, h2, h3, h4, h5, h6 {
	color: #D02890;
	font-weight: normal;
}
 
.noContent {
	padding: 60px 0;
	text-align: center;
	width: 500px;
	min-width: 500px;
}
 
img
{
	border: 0 none transparent;
}
 
.imageLeft {
	float:left;
	margin-right: 10px;
}
 
.pagination {
	text-align: right;
}
 
a {
	color : #0171B9; 
	text-decoration: none; 
} 
 
a:hover {
	color: #D02890; 
	text-decoration : underline; 
}
 
input, textarea
{
	font-size: 10px;
}
 
select { 
	font-size: 10px;
	color: #006DC6;
	background-color:#FFFFF;
}
 
.submit { 
	margin-top: 5px;
	margin-bottom: 5px;
	color: #006DC6; 
}
 
.item {
	color: #414141;
	font-size: 10px;
}
 
.clearer
{
	clear: both;
	height: 1px;
	overflow: hidden;
	margin-bottom: -1px;
	font-size: 1px;
	line-height: 1px;
}
 
.note {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 9px;
	color: #3A5339;
	font-weight:normal;
}
 
 
.hidden
{
	position: absolute;
	left: -9999px;
	top: -9999px;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
 
#content
{
	min-width: 708px;
	margin: 10px 26px 0 26px;
}
 
* html #content
{
	w\idth: expression(document.documentElement.clientWidth < 760 ? "708px" : "auto");
}
 
/* HEADER --------------------------------------------------------------- */
 
#topleft
{
	position: relative;
	min-width: 760px;
	height: 52px;
	margin-bottom: -52px;
	background-image: url(../images/menu-tl.gif);
	background-repeat: no-repeat;
}
 
* html #topleft
{
	w\idth: expression(document.documentElement.clientWidth < 760 ? "760px" : "auto");
}
 
#topright
{
	position: relative;
	min-width: 760px;
	height: 52px;
	margin-bottom: -52px;
	background-image: url(../images/menu-tr.gif);
	background-repeat: no-repeat;
	background-position: top right;
}
 
* html #topright
{
	w\idth: expression(document.documentElement.clientWidth < 760 ? "760px" : "auto");
}
 
#header
{
	padding-top: 1px;
}
 
#headerInner
{
	border: 1px solid #B0036E;
	border-bottom: 0 none #FFFFFF;
	border-top: 0 none #FFFFFF;
	padding: 0px;
	background-color: #B0036E;
	background-image: url(../images/menu.jpg);
	background-repeat: repeat-x;
	background-position: 100% 0;
	color: #FFFFFF;
	height: 100px;
 
}
 
#header h1 {
	color: #FFFFFF;
	font-size: 30px;
	padding: 20px 0px 0px 20px;
	float: left;
	font-weight: bold;
	z-index: 500;
}
 
#header h2 {
	color: #FFFFFF;
	font-size: 14px;
	padding: 60px 0px 0px 10px;
	margin-left: -280px;
	float: left;
}
 
#headerRight {
	float: right;
	position: relative;
	width:270px;
}
 
#datetime {
	float: right;
	padding: 5px 15px;
	color: #F2A3D4;
}
 
#searchForm
{
	position: absolute;
	float: right;
	padding: 65px 35px 0px 0px;
	color: #FFFFFF;
	width: 23.2em;
	/*margin-right: -210px;*/
}
 
#searchForm label
{
	float: left;
	padding-left: 20px;
}
 
#searchForm input.text
{
	width: 12em;
}
 
#searchForm span.submit
{
	position: relative;
	width: 40px;
	height: 15px;
	overflow: hidden;
	float: right;
	/*margin: 2px 0 0 285px;*/
	margin: 3px 0px 0px 0px;
}
 
#searchForm span.submit input:hover, #searchForm span.submit input.hover
{
	position: relative;
	margin-top: -15px;
}
 
head+body .r{
	overflow:hidden;
}
* html .r{
	float:left;
}
* html .bodyCenter{ 
	height:1%;
	width: 100%;
}
 
* html .r .right {
	float: right;
}
 
.right {
	text-align: right;
}
 
/* MENU --------------------------------------------------------------- */
 
.menu
{
	position: relative;
	z-index: 2;
	height: 2.5em;
	margin-top: 1px solid #000000;
	border-right: 1px solid #A30D66;
	border-bottom: 1px solid #A30D66;
	border: 1px solid #B0036E;
	background-color: #D0248C;
	background-image: url(../images/px_e62c9c.gif);
	background-repeat: repeat-x;
}
 
* html .menu
{
	height: 2.35em;
}
 
.menu ul
{
	float: left;
	border-right: 1px solid #E62C9C;
	list-style: none;
}
 
.menu li
{
	float: left;
}
 
.menu a
{
	display: block;
	border-top: 1px solid #E62C9C;
	border-left: 1px solid #E62C9C;
	border-right: 1px solid #A30D66;
	border-left: 1px solid #E62C9C;
	padding: 0.5em 16px;
	color: #FFFFFF;
	text-decoration: none;
}
 
* html .menu a
{
	height: 1px;
	float: left;
}
 
.menu li.on a
{
	border-top-color: #E62C9C;
	border-left-color: #E62C9C;
	color: #FFCC00;
	background-color: #A30D66;
	font-weight: bold;
}
 
.menu a:hover
{
	background-color: #A30D66;
}
 
/* CONTENT BODY --------------------------------------------------------------- */
 
 
#postHead
{
	position: relative;
	min-height: 500px;
	margin: 0px;
	background-color: #FFFFFF;
 
}
 
* html #postHead
{
	height: 500px;
}
 
 
/* LEFT MENU --------------------------------------------------------------- */
 
#leftOuter {
	float: left;
	width: 29%;
	min-width: 29%;
 
}
 
#leftMenu
{
	display: block;
	background-color: #EC1A9D;
	color: #FFFFFF;
	border: 1px solid #B0036E;
	border-bottom: 0 none #FFFFFF;
	border-top: 0 none #FFFFFF;
	padding: 0px;
	background-image: url(../images/menuback.jpg);
	background-repeat: no-repeat;
	background-position: center 20px;
	line-height: 1.4;
	display:inline-block; /* Hate you IE */
}
 
.logoParent {
	text-align: center;
	padding-top: 10px;
}
 
#leftMenu .contentBody {
 
	padding: 0 20px;
}
 
#leftMenu h2
{
	margin-bottom: -2.35em;
	padding-top: 350px;
	padding-bottom: 2.4em;
	background-image: url(../images/dots_white.gif);
	background-repeat: repeat-x;
	background-position: 0 90%;
	font-size: 18px;
	color: #FFFFFF;
	position: relative;
}
 
#leftMenu form
{
	margin-top: 2em;
}
 
#leftMenu fieldset
{
	padding: 0 1em 1em 1em;
}
 
#leftMenu label
{
	float: left;  
	width: 7em;  
	text-align: right; 
}
 
#leftMenu .labelText
{
	position: relative;
	float: left;
}
 
#leftMenu .passforgot
{
	text-align: center;
	padding-top: 10px;
}
 
#leftMenu .passforgot a
{
	color: #F1CCE3;
}
 
#leftMenu .passforgot a:hover
{
	color: #FFFFFF;
}
 
#leftMenu input.text, #leftMenu input.password
{
	position: relative;
	top: -0.2em;
	width: 10em;
	color: #006DC6;
}
 
#leftMenu select
{
	background-color: #FFFFFF;
	color: #006DC6;
	font-weight: normal;
	position: relative;
}
 
#leftMenu input.submit
{
	position: relative;
	color: #006DC6; 
	background-color: #FFFFFF;
	width: 60px;
}
/* RIGHT SIDE --------------------------------------------------------------- */
 
.bodyCenter
{
	border: 0px none transparent;
	background-color: #FFFFFF;
	overflow: hidden; /* for netscape, else it gives a forced scroll */
}
 
.bodyContentOthers ol {
	padding: 15px 0;
}
 
.bodyContentOthers li {
	background-image: url(../intranet/img_intranet/icone_p.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 17px;
	margin-left: 17px;
}
 
.bodyCenter .bodyGeneral
{
	padding: 20px;
	text-align: left;
	background-color:#FFFFFF;
	display:inline-block; /* Hate you IE */
}
 
 
.bodyCenter .bodyContent
{
	top: -0.6em;
	padding-top: 1px;
	padding-left: 20px;
	text-align: left;
	background-color:#FFFFFF;
	background-image: url(../images/div2.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	overflow: hidden;
	float: left;
}
 
.bodyCenter .bodyContent ol {
	font-size: 120%;
	margin-top: 40px;
	margin-bottom : 40px;
}
 
.bodyCenter .bodyContent li#one {
	margin-left: 235px;
}
 
.bodyCenter .bodyContent li#two {
	margin-left: 185px;
}
 
.bodyCenter .bodyContent li#three {
	margin-left: 135px;
}
 
.bodyCenter .bodyContent li#four {
	margin-left: 85px;
}
 
.phrase {
	width: 80%;
	margin-bottom: 20px;
}
 
.bodyCenter .bodyContent li#but_three {
	margin-left: 60px;
}
 
.bodyCenter .bodyContent li#but_two {
	margin-left: 30px;
}
 
.bodyCenter .bodyContent li#but_one {
	margin-left: 0px;
}
 
 
.bodyCenter .bodyGeneral h1
{
	margin: 14px 0;
	padding-bottom: 10px;
	background-image: url(../images/dots_0171B9.gif);
	background-repeat: repeat-x;
	background-position: 0 90%;
	font-size: 21px;
	/*position: relative;*/
}
 
.bodyCenter .bodyGeneral p
{
	padding-bottom: 6px;
}
 
.bodyCenter .bodyContent h3
{
	font-size: 16px;
	font-weight: bold;
}
 
.break {
	height: 20px;
}
 
.center {
	text-align: center;
}
 
.leftContent {
	width:50%;
	float:left;
}
 
#text {
	display: none;
	position: relative;
}
 
#text2 {
	display: none;
	position: relative;
}
 
#marqueecontainer {
	position: relative;
	width: 300px; /*marquee width */
	height: 40px; /*marquee height */
	background-color: white;
	overflow: hidden;
	border: none;
	padding: 2px;
	padding-left: 4px;
	margin: 15px auto 0 auto;
}
 
#bottomDiv {
	width: 98%; 
	height: 126px; 
	background-color:#EC1A9D; 
	border: 1px solid #000000; 
	border-top: 1px solid #AF0870; 
	float: right; 
	margin-top: 10px; 
	background-image: url(../images/bottom-back.jpg); 
	background-repeat:no-repeat; 
	background-position: center left;
}
 
#bottomDivInner {
	z-index:100; 
	float:right;
	padding: 10px;
}
 
#bottomDiv h1
{
	background-image: url(../images/dots_white.gif);
	background-repeat: repeat-x;
	background-position: 0 90%;
	font-size: 18px;
	color: #FFFFFF;
	position: relative;
	padding-bottom:6px;
}
 
#bottomDiv p {
	color: #FFFFFF;
	font-size: 13px;
	margin-top: 6px;
}
 
/* FOOTER --------------------------------------------------------------- */
 
#bottomleft
{
	position: relative;
	min-width: 15px;
	height: 51px;
	margin-bottom: -58px;
	background-image: url(../images/menu-bl.gif);
	background-repeat: no-repeat;
	top: -14px;
	left: 0px;
}
 
* html #bottomleft
{
	w\idth: expression(document.documentElement.clientWidth < 760 ? "760px" : "auto");
}
 
#bottomright
{
	position: relative;
	min-width: 54px;
	height: 51px;
	margin-bottom: -58px;
	background-image: url(../images/menu-br.gif);
	background-repeat: no-repeat;
	top: 87px;
	background-position: bottom right;
	#top : -58px;
}
 
 
#footer
{
	width: 760px;
	padding: 20px 0;
	margin: 0 auto;
}
 
#footerInner
{
	margin: 0 auto;
	text-align: center;
	font-size:10px;
	color : #0171B9; 
	line-leight: 120%;
}
 
#footer img {
	margin-top: 10px;
}
 
* html #footer
{
	w\idth: expression(document.documentElement.clientWidth < 760 ? "760px" : "auto");
}

[Paul O'B]

Have you got some html to go with that?

[kigoobe]

Paul, thanks for your reply again. Here is the associated 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=windows-1252" />
<meta name="robots" content="index, follow" />
<title>:: &&& ::</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/btp.js"></script>
 
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" over";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" over\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
</head>
 
<body>
 
	<div id="topright">
	</div>
	<div id="topleft">
	</div>
	<div id="content">
			<!-- ########################################################################## Beginning of header #################################################### -->
			<div id="header">
				<div id="headerInner">
 
					<h1>Sitepoint php photoshop</h1>
					<h2>The best web service forum</h2>
					<div id="headerRight">
							<div id="datetime">
								<span id="clock"></span>
							</div> <!-- END #datetimeInner -->
						 <!-- END #datetimeOuter -->
 
						<form method="post" action="search.php" id="searchForm">
							<fieldset>
								<label>
									<span class="labelText">Rechercher:</span>
									<input id="searchword" name="searchword" class="text" type="text" />
								</label>
								<span class="submit"><input class="image" type="image" src="images/btn_search.gif" alt="Rechercher" title="Rechercher" /></span>
							</fieldset>
 
						</form>
					</div> <!-- END #headerRight -->
				</div> <!-- END #headerInner -->
			</div> <!-- END #header -->
			<!-- ########################################################################## END of header ######################################################### -->
			<!-- ################# Beginning of posthead. Its where all the action is, divided in two parts, the left pink one, and the main body of the right #### -->
			<div id="postHead">
 
			<!-- ########################################################################## Beginning of the left left part of posthead ########################### -->
				<div id="leftOuter">
					<div id="leftMenu">
						<div class="contentBody">
						<h2>Votre Espace Personnel</h2>
							<form id="form1" method="post" action="#">
								<fieldset>
									<ol>
										<li>
											<label for="email"><span class="labelText">Votre E-mail:</span></label>
											<input id="email" name="email" class="text" type="text" />  
										</li>
										<li>
											<label for="passw"><span class="labelText">Mot de passe:</span></label>
											<input id="passw" name="passw" class="password" type="password" />  
										</li>
										<li>
											Mémoriser: 
											<input type="checkbox" name="rememberme" />
											<select name="unit_time">
															<option value="hour" selected="selected">12 Heures</option>
															<option value="day">1 Jour</option>
															<option value="week">1 Semaine</option>
															<option value="month">1 Mois</option>
 
															<option value="year">1 Année</option>
														</select>										</li>
										<li>
											<label><span class="labelText">&nbsp;</span></label>
											<input class="submit" type="submit" value="Entrez" />  
										</li>
										<li><div class="passforgot">
											<a href="passf.php">Mot de passe perdu</a><br /><a href="contact.php">Contacter l'administrateur</a>
 
											</div>
										</li>
									</ol>  
								</fieldset>
							</form>
						</div> <!-- END .leftMenu .contentBody -->
				</div> <!-- END .leftMenu -->
				<div id="bottomleft">
 
				</div>
				<div class="logoParent">
					<a href="#" onclick="this.target='_blank'"><img src="images/logo.gif" alt="" /></a>
				</div>
			</div> <!-- END #leftOuter -->
			<!-- ########################################################################## END of the left left part of posthead ################################# -->
			<!-- ########################################################################## Beginning of the right part of posthead ############################### -->
			<div class="r">
 
				<div class="bodyCenter">
					<div class="navBack">
						<ul id="nav"> 
						  <li id="navone"><a href="/index.php">Accueil</a></li> 
						  <li id="navtwo"><a href="#">Autres rubriques</a>
							<ul>
							  <li id="navtwosub1"><a href="#">Sub menu 1</a></li>
							  <li id="navtwosub2"><a href="#">Sub menu 2</a></li>
							</ul>
						  </li> 
						  <li id="navthree"><a href="#">Rejoignez-nous</a>
							<ul>
							  <li id="navthree1"><a href="#">Sub menu 1</a></li>
							  <li id="navthree2"><a href="#">Sub menu 2</a></li>
							</ul>
						  </li> 
						   <li id="navfour"><a href="#">Liens</a>
							<ul>
							  <li id="navfour1"><a href="#">Sub menu 1</a></li>
							  <li id="navfour2"><a href="#">Sub menu 2</a></li>
							</ul>
						   </li> 
						</ul> 
					</div> <!-- END .navBack, the top menu -->
 
 
 
 
 
							<div class="bodyContent">
									<ol>
										<li id="one">
											<h3>ACCOMPAGNER</h3>
											<div class="phrase">A site consisting of links to various useful Webdesign Template sites.</div>
										</li>
 
										<li id="two">
											<h3>TEMOIGNER</h3>
											<div class="phrase">A site consisting of links to various useful Webdesign Template sites.</div>
										</li>
										<li id="three">
 
											<h3>PROMOUVOIR</h3>
											<div class="phrase">A site consisting of links to various useful Webdesign Template sites.</div>
										</li>
										<li id="four">
											<h3>REPONDRE</h3>
											<div class="phrase">A site consisting of links to various useful Webdesign Template sites.</div>
										</li>
									</ol> 
							</div><!-- END .bodyContent -->
 
						<div class="break">
						</div>
						<div class="clearer">
 
						</div>
						<div class="center">
							<div style="float:left; width: 49%; min-width: 49%;">
								<div style="text-align: center;">
									<a href="#"><img src="images/index_button_back_1a.png" height="42" width="226" onmouseover="doStuff(this)" alt="" /></a>
								</div> 
							</div>
							<div class="r" style="width: 49%; min-width: 49%;">
								<div style="text-align: center;">
 
									<a href="#"><img src="images/index_button_back_3a.png" height="42" width="249" onmouseover="doStuff2(this)" alt="" /></a>
								</div> 
							</div>
						</div><!-- END .center -->
 
						<div class="clearer">
						</div>
 
					</div> 
				<!-- END #bodyCenter -->
			  </div> <!-- END .r -->
			<!-- ########################################################################## End of the right part of posthead ##################################### -->
			<div class="clearer">
			</div>
 
		</div> <!-- END #postHead -->
			<!-- ########################################################################## End of posthead ####################################################### -->
			<!-- ########################################################################## Beginning of footer, the last part #################################### -->
		<div id="footer">
			<div id="footerInner">
				Copyright © Kigoobe web design. Tous droits réservés. <a href="#">Mentions légales</a>.
				<br />
				<a href="http://www.kigoobe.com/fr/accueil.html" onclick="this.target='_blank'">Création site internet</a> : <a href="http://www.kigoobe.com" onclick="this.target='_blank'">Paris web design</a>
				<br />
			</div> <!-- END #footerInner -->
		</div> <!-- END #footer -->
 
			<!-- ########################################################################## End of footer, the last part ######################################### -->
	</div> <!-- END #content -->
</body>
</html>

[Paul O'B]

HI,

Its a little difficult to see as the #nav styles are missing but try removing this line completely and see what happens.

* html #bottomleft
{
    w\idth: expression(document.documentElement.clientWidth < 760 ? "760px" : "auto");
}

Back tomorrow

[kigoobe]

He he Paul, should I tell you something? I think I have found a perfect triangle here, Australia in cricket, Rudy in mySQL and you in CSS.

Guess what, it's working. Personally, I could never make it out.

Thanks again, and I really appreciate all your time. Have a good night.