Welcome to WebmasterWorld Guest from 54.159.50.111

Forum Moderators: not2easy

Message Too Old, No Replies

column drop problem in IE6

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

New User

5+ Year Member

joined:Sept 4, 2007
posts:22
votes: 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

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

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts: 2144
votes: 7


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

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

New User

5+ Year Member

joined:Sept 4, 2007
posts:22
votes: 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

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

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts:2144
votes: 7


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