1 reply [Last post]
bark
Offline
newbie
Last seen: 15 years 42 weeks ago
Timezone: GMT+1
Joined: 2003-09-28
Posts: 1
Points: 0

Hi there!

I've been struggling to get this style to work with IE6 lately. The problem is positioning containers with CSS2 style position: absolute. With Gecko-based browsers the page looks fine, but with IE6 the containers only extend as far as the content of the container go. The point is that the containers should extend over the entire browser window. The page (very short and simple) at:

http://folk.uio.no/bark/container.shtml

and the css-file:

http://folk.uio.no/bark/container.css

Also, here is a screenshot of how it should look (this is galeon 1.2.7).

http://folk.uio.no/bark/pics/container-correct.png

Does anybody know a solution to this problem?

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 5 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Positioning absolute elements - Gecko vs. IE

Hi,

Unfortunately IE doesn't like the width of its container to be set by using the margins only.

You could workaround it like this, although it's not quite the same.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/\xhtml1/DTD/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
  charset=ISO-8859-1" />
<title> CSS-test </title>
<style type="text/css">
html,body {height:100%;}
body { 
       color: #FFFFD1;
       background-color: #606060;
       margin:0;padding:0;
	   }    
                                                                                
#sidebar { 
           width: 13em;
           position: absolute;
           top: 1em;
           left: 1em;
           background-color: #424242;
           border: thin solid black;
           height:93%;
           }
           
#main { 
        margin-left: 16em;
        margin-top: 1em;
        margin-right: 1em;
        background-color: #424242;
        border: thin solid black;
        height:93%;
        overflow: auto;
        }
</style>
</head>
<body>
<div id="main"> Main left </div>
<div id="sidebar"> Sidebar right </div>
</body>
</html>

Hope that helps.

Paul