homepage Welcome to WebmasterWorld Guest from 54.211.34.105
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
column drop problem in IE6
Halim

5+ Year Member



 
Msg#: 3451222 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3451222 posted 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

5+ Year Member



 
Msg#: 3451222 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3451222 posted 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved