473,224 Members | 1,718 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,224 software developers and data experts.

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

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
1 13919
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Ryan Hubbard | last post by:
I'm inserting a record into MySQL 4.0 using Visual Basic ADO. When using the AddNew and Update method I am unable to retrieve the value of a Auto incrment field (Yes I know I can MoveLast but this...
5
by: Robert Downes | last post by:
I'm using the following in a page that I'm testing in Mozilla: p.actionLinkBlock {border: 1px #000000 dashed; padding: 0.2cm; width: auto} But the dashed border is extending to the right-edge...
18
by: day | last post by:
I know I've seen this issue described before, but I can't find it, or the solution now that I need it. I have some css-specified floating divs that contain images or text. The text divs have a...
5
by: robin | last post by:
Hi, I've implemented a Style Sheet in Dreamweaver; one of the elements is supposed to stay right with the text flowing around it on the left. A similar tag is supposed to stay left with the...
2
by: VB Programmer | last post by:
I created a page which I am using to prevent the user from hitting the BACK button. I'll call it my "Auto Jump" page. When it is called it basically auto-redirects to a page specified in the...
1
by: bissatch | last post by:
Hi, How do I set the width of each column within a table? Would I use the auto value for width? I tried to do: #mytable td { width: auto; }
1
by: Dave | last post by:
I have a table with 3 fields of which the primary key is a autonumber. I have created my dataadapter, dataset and datagridview using a wizard. However, in the datagrid, the update and delete...
1
by: gwhite1 | last post by:
I am using the auto-generate fields option because my query can be different based on what the user selects. But I would still like to set the column alignment but I can;t seem to access the...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.