Widht problem in IE6 - CSS-Tricks

This topic is empty.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
February 5, 2009 at 5:05 am #24114

hoven002
Member

Hello there,

I hope somebody can help me with a ‘width’ problem I am facing with my layout.

I put an example on the website http://www.werkstuk.com
If you make the screen smaller you can see that the blue ‘content-div’ is moving
beneath the ‘index-div’! I can’t figure out what the right css code is to solve this problem.
In IE7 and FF it works great.

See the code here:

<!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">

<head>
<title>MM Masterpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<head>

<style type="text/css">
* {
margin: 0;
padding: 0;
}
#banner {
position: relative;
height: 100px;
width: 100%;
background-color: red;
}
#wrappermain {
float: left;
width: 100%
}
#index {
float: left;
width: 200px;
height: 400px;
background-color: orange;
/*display: none;*/
}
#content {
/*float: left;*/
width: auto;
margin-left: 200px;
height: 400px;
overflow: auto;
background-color: silver;
}
* html #content { /* Star HTML patch for IE6 */
width: 80%; /* Why can I not use value ‘auto’ */
background-color: blue;
}
#footerend {
clear: both;
width: 100%;
height: 25px;
background-color: green;
}
</style>

</head>
<body>
<div id="banner">BANNER</div>
<div id="wrappermain">
<div id="index">INDEX</div>
<div id="content">
CONTENT<br />
<img src="pixel2000breed.gif" />
<img src="pixel2000hoog.gif" />
</div>
</div>
<div id="footerend">FOOTEREND</div>
</body>
</html>

Best regards,
Kenneth

February 5, 2009 at 5:40 am #53754

Ramesh
Member

check out this

<!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">
<head>
<title>MM Masterpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

#banner {
position: relative;
height: 100px;
width: 100%;
background-color: red;
}
#wrappermain {
float: left;
width: 100%
}
#index {
float: left;
width: 200px;
height: 400px;
background-color: orange;
clear:left;
/*display: none;*/
}
#content {
/*float: left;*/
width: auto;
margin-left: 200px;
verflow: auto;
height:400px;
background-color: silver;
clear:right;
}

#footerend {
clear: both;
width: 100%;
height: 25px;
background-color: green;
}
</style>

</head>
<body>
<div id="banner">BANNER</div>
<div id="wrappermain">
<div id="index">INDEX</div>
<div id="content">
CONsdfsdfsdfdsfsdfsdfsdfsdfsdfsdfsdfsdfsd sdfsd sdf s df sd dsf sdfsd df sfsfsdfsdfsdfsdfsdfsdfsdfsdfsdTENT<br />
<img src="pixel2000breed.gif" />
<img src="pixel2000hoog.gif" />
</div>
</div>
<div id="footerend">FOOTEREND</div>
</body>
</html>

February 5, 2009 at 7:11 am #53717

hoven002
Member

Ramesh, thanks for helping me, but adding the ‘clear: right’ atrribute doesn’t solve my problem!
If this isn’t what you meant, what am I doing wrong?

Regards,
Kenneth

February 5, 2009 at 8:58 am #53718

Ramesh
Member

not only clear i have add many things u just copy the html code and check it out

February 5, 2009 at 9:24 am #53784

hoven002
Member

Hello Ramesh,

If you look in IE6 with the following link: http://www.werkstuk.com/ramesh.html
you will see your code. Do you see that the layout is still not in place…
Other suggestions?

February 6, 2009 at 1:49 am #53813

Ramesh
Member

its coming fine for me in ie6

February 7, 2009 at 3:53 am #54162

ikthius
Member

@ramesh,

it looks fine on your IE but did you change your screen resolution for your test as the original poster said, it happens on smaller screens

@hoven

I will have a look at this later dude, if you don’t get it fixed soon

hoven:
I checked out your code in firebug, I played about, but I think having a % and pixel values is causing you problems, so I changed a few things, if you don’t mind

before the code, here is a question 100% – 200px does that leave 80%??

I think thats why your code was not behaving how you wanted it to, so I made it 100% – 20% = 80%

full code for you to test:

Code:

MM Masterpage

BANNER

INDEX

CONTENT

FOOTEREND

tested on IE6, FF in resolutions 1024×768 & 800×600

February 9, 2009 at 8:41 am #54146

hoven002
Member

Thanks Ikthius,

This works for me partially! Thanks.
I have to make different website with this layout where each leftdiv
has a different widht (in pixels). I will play with this a bit more.

Regards,
Kenneth

February 9, 2009 at 8:57 am #54143

ikthius
Member

"hoven002" wrote:

Thanks Ikthius,

This works for me partially! Thanks.
I have to make different website with this layout where each leftdiv
has a different widht (in pixels). I will play with this a bit more.

Regards,
Kenneth

so your trying to make your own template then???

does it have to fill in the whole page as in 100%?

February 9, 2009 at 4:25 pm #54057

hoven002
Member

Yes I am trying to make a template! You have some tips I can use?

February 9, 2009 at 5:08 pm #54058

ikthius
Member

"hoven002" wrote:

Yes I am trying to make a template! You have some tips I can use?

no not really, I am not a big fan of templates, cause not all sites end up the same.

I don’t think you will get all browsers to see it the same, unless you go for tables.

ik
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

The forum ‘CSS’ is closed to new topics and replies.