Design Problem in IE6

Ali Al Omairi Abu AlHassan

guys; I have a problem in design on IE6. when I write the code like this:

.main{background-color:gray;padding:5px}
.header{height:40px;background-color:blue;}
.leftnav{float:left;width:50px;height:260px;background-color:red;}
.content{margin-left:50px;height:260px;background-color:white}

It looks like this in all browsers

but in IE6 it look like this

what should i do to appear the same in both?

Help people,so poeple can help you.

Morgs Morgan

Ali Al Omairi(Abu AlHassan) wrote:

.leftnav{float:left;width:50px;height:260px;background-color:red;} .content{margin-left:50px;height:260px;background-color:white}

Your class .leftnav is floating left and .content isn't. It could be why. Try something like:

.leftnav{ float:left; width:50px; height:260px; background:red; }
.content{ float:left; height: 260px; background:white; }

I just eliminated the margin-left on the .content class and replaced it with float:left. Hope that helps. Morgs.

Ali Al Omairi Abu AlHassan

Thank you. But actualy, the the content div is used to hold Dynamic content (e.g. records from the database). using float css would make the content to overflow the main div. consider tha actual css

.main{background-color:gray;padding:0px 90px}
.header{height:250px;background-color:blue;}
.leftnav{float:left;width:200px;}
.content{margin-left:200px;min-height:450px;}

Logo & Company Name

Item1 Item2 Item3 Item4 Item5

databound databound databound databound databound databound databound databound databound databound databound databound databound databound databound databound

Help people,so poeple can help you.

Morgs Morgan

Here is the rule around this: - if two one elements (e.g. div id="1") is floating left, and the next element also happens to be the same (e.g. div id="2"), the the browser will automatically make div id="2" float left aswell untill it finds a different element type (e.g. img) or a div with style="clear:both/left;" thats when it will go to the next line. I'm purposly assuming my dear old IE6 won't understand this rule. - The .main doesn't have a set fixed width or height so this div class="main" will grow automatically and nothing will "Overflow". - I still insist on making two elements float:left if you want them next to each other, using that margin-left:200px will make you cry endlessly if you care resize the browser or simply when viewed in different browsers. And yes, either .leftnav or .content will be higher/longer than the other one unless if you explicitly set the same height for the classes but like you mentioned .content is loaded dynamically. Good luck, Morgs

Ali Al Omairi Abu AlHassan

with floating;

It would appear like this with no height for .main

Logo & Company Name

Item1 Item2 Item3 Item4 Item5

databound databound databound databound databound databound databound databound databound databound databound databound databound databound databound databound

and like this with adding min-height to .main

Logo & Company Name

Item1 Item2 Item3 Item4 Item5

databound databound databound databound databound databound databound databound databound databound databound databound databound databound databound databound

Help people,so poeple can help you.

Keith Barrow

My e-mail said you left a message on my blog on CP asking for help, but it disappeared. Anyway Morgs Morgan is correct: you should use floats to arrange divs, or you'll find a world of pain. You need to decide whether you want a fixed or fluid layout, personally I think fixed is good. The following is the usual way to achieve a fixed layout:

<html>
<head>
<style type="text/css">
*
{
padding:0px;
margin:0px;
}

body
{
    background-color:gray;
}

div#container
{
    width:640px;
}

div#header
{
    background-color:blue;
    height:40px;
}

div#menu
{
    background-color:red;
    float:left;
    height:400px;
    width:100px;
}

div#content
{
    background-color:white;
    width:540px;
    float:left;
    height:400px;
}

.clear
{
    clear:both;
}

</style>
<head>
<body>
<div id="container" >
<div id="header" >Header</div>
<div id="menu" >Menu</div>
<div id="content">Content </div>
<div id="footer" class="clear" />
</body>
</html>

I haven't tested the above in IE6, but it should work, that said IE_n_ where n < 8 are so quirky there are lots of things that should work that don't. IIRC think the footer div needs to be expanded and a  

Sort of a cross between Lawrence of Arabia and Dilbert.[^]
-Or-
A Dead ringer for Kate Winslett[^]

Ali Al Omairi Abu AlHassan

OK, I didn't expect that when I called you. :-D but about the data, shall I add overflow:auto to the content div css?

Help people,so poeple can help you.

pankajsinha

.main{width:100%;background-color:gray;padding:5px}
.header{height:40px;background-color:blue;}
.leftnav{float:left;width:50px;height:260px;background-color:red;}
.content{ width: 70%; float:left;margin-left:50px;height:260px;background-color:white}

Please set the width and float in class "content" and set the width in class "main" to 100% or required width in px

Er. Pankaj Sinha

Ali Al Omairi Abu AlHassan

You were right, Morgs; the page would look like this

Logo & Company Name

Item1 Item2 Item3 Item4 Item5

databound databound databound databound databound databound databound databound databound databound databound databound databound databound databound databound

sorry for misunderstanding. :-\

Help people,so poeple can help you.

Morgs Morgan

:thumbsup:

Ali Al Omairi Abu AlHassan

You are a :rose: :kiss:

Help people,so poeple can help you.