By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,008 Members | 2,962 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,008 IT Pros & Developers. It's quick & easy.

Problem with the width of DIV in IE6 using CSS and width:auto

P: n/a
I'm changing the layout of my site. Instead of using tables, I will use
DIVs. It's working fine, except for 1 thing: In IE6 some DIVs are not
the correct width. Mozilla and Opera are showing the page the way I
want. Does anybody know a solution for this?

First of all, the code I am using:

CSS
-------
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #000000;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
}

div {
position: absolute;
margin: 0;
}

div.header {
position: absolute;
background-attachment: scroll;
width: 100%;
height: 27px;
left: 0;
right: 0;
top: 0;
bottom: auto;
background-color: FF00FF;
z-index: 999;
overflow: hidden;
}
div.logo {
position: absolute;
width: 133px;
height: 73px;
left: auto;
right: 0;
top: 0;
bottom: auto;
background-color: 0FF00F;
z-index: 1000;
}
div.search {
position: absolute;
left: 180;
right: 133;
width: auto;
height: 46px;
top: 27;
bottom: auto;
background-color: FFF00F;
z-index: 1000;
overflow: hidden;
}
div.layoutimage {
position: absolute;
width: 180px;
height: 120px;
left: 0;
right: auto;
top: 27;
bottom: auto;
background-color: 000FF0;
}
div.leftbar {
position: absolute;
width: 180px;
height: auto;
left: 0;
right: auto;
top: 147;
bottom: auto;
background-color: 00FFFF;
}
div.rightbar {
position: absolute;
width: 180px;
height: auto;
left: auto;
right: 0;
top: 73;
bottom: auto;
background-color: 00FFFF;
}
div.content {
position: absolute;
width: auto;
height: auto;
left: 180;
right: 180;
top: 73;
bottom: auto;
background-color: F0F0F0;
}
-------

HTML
-------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>div</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel=stylesheet href="div.css" type="text/css" media="screen">
</head>
<body>
<div class="header">Header</div>
<div class="logo">Logo</div>
<div class="layoutimage">Layoutimage</div>
<div class="leftbar">Leftbar</div>
<div class="rightbar">Rightbar</div>
<div class="search">Search</div>
<div class="content">Content</div>
</body>
</html>
-------

What's going wrong? The search- and the content DIV are not wide enough
when there is not so much content in it that it multiple lines of text
are needed. When there is enough content in it, it's working fine. How
can I make these two DIVs to listen to my CSS-properties and get rid of
the whitespace next to them in IE6? To make it sure, I'm describing the
yellow and the gray DIVs.

The URLs where these files are:
As described above: http://cglabbee.speed.planet.nl/test/div1.html
More content in the DIVs: http://cglabbee.speed.planet.nl/test/div2.html
The stylesheet: http://cglabbee.speed.planet.nl/test/div1.css

Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
In article <bj**********@reader08.wxs.nl>, Glabbeek wrote:
I'm changing the layout of my site. Instead of using tables, I will use
DIVs. It's working fine, except for 1 thing: In IE6 some DIVs are not
the correct width. Mozilla and Opera are showing the page the way I
want. Does anybody know a solution for this?

First of all, the code I am using:
[snipped CSS]
HTML
-------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

[..]

I could be wrong here, but you arent specifying a DTD file, which I think
puts IE6 into quirks mode, where it emulates IE5's broken box sizing model.

You could try replacing your doctype tag with

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">

and seeing if that solves your problem. If it does, you might want to add
some IE5 specific rules so the page displays as intended on that browser.

I prefer to do this by using IE's conditional comments after the main stylesheet
keeping the clutter out of the main CSS, eg

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5hacks.css">
<![endif-->

but there are other ways of making workarounds in the
same stylesheet.

Putting terms like ie5 box model hack into google should help.

Jon
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.