column drop problem in IE6

Forum Moderators: not2easy

Message Too Old, No Replies

column drop problem in IE6

Halim

9:04 pm on Sep 14, 2007 (gmt 0)

Hello all,

I have another weird annoying problem

I have a header, 2 columns, and a footer layout
Occasionally, the right column drop, but if i refresh it will move to where it supposed to be.
And It always happen at random page, some times drop sometimes dont
It looks like it only happens on IE6, it looks OK in firefox 2, IE7, Win Safari

Anyone know how to resolve this problem?

Thank you so much

Marshall

8:01 am on Sep 15, 2007 (gmt 0)

Is this a table layout, CSS with <div> or what? In order to help, you wlil need to post relevant CSS and HTML, and do not forget to include the doctype.

Marshall

Halim

3:20 am on Sep 20, 2007 (gmt 0)

im using XHTML 1.0 STRICT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

here is the css for the layout


* { padding: 0; margin: 0; }body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #5eaaca;
}
#wrapper { 
 margin: 0 auto;
 width: 775px;
}
#header {
 color: #333;
 width: 775px;
 float: left;
 height: 116px;
 background: #5eaaca;
}
#leftcolumn {
clear: left; 
 background: #e68841;
 margin: 0; 
 width: 230px;
 float: left;
 padding-top: 15px;
}
#rightcolumn { 
 float: right;
 background: #e68841;
 margin: 0;
 width: 545px;
 display: inline;
 padding-top: 15px;
}
#footer { 
 width: 775px;
 clear: both;
 color: #333;
 background: #5eaaca;
 margin: 0px 0px 10px 0px;
}

and here is the order in html


<body> <!-- Begin Wrapper -->
 <div id="wrapper">
 
   <!-- Begin Header -->
   <div id="header">
 </div>
 <!-- End Header -->
 
 <!-- Begin Left Column -->
 <div id="leftcolumn"> 
 </div>
 <!-- End Left Column -->
 
 <!-- Begin Right Column -->
 <div id="rightcolumn">
 </div>
 <!-- End Right Column -->
 
 <!-- Begin Footer -->
 <div id="footer"> 
 </div>
 <!-- End Footer -->
 
 </div>
 <!-- End Wrapper -->
 
</body>

thank you fro any help

Marshall

9:44 am on Sep 20, 2007 (gmt 0)

First of all, if you are not using any xml, do not use XHTML doctype. I suggest reading this post [webmasterworld.com] about using the correct doctype.

Second, you do realize by using
* {margin:0; padding:0;}
you are eliminating the default margin and padding from everything: <body>, <div>, <table>, <p>, <ul>, and so on, and it would be necessary to assign margins and padding to each individual element. You would be better off doing:

You would be better off just doing:

body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background: #5eaaca;
}

The way your HTML is set up, there should be no need to float the header left or have a clear:left in the left column. Just put:
<br style="clear:both" /> below the header -or- better yet, put a wrapper around the left and right columns and have it clear:both. And last, I believe the display:inline in you right column is not going to serve any purpose.

Marshall