IF IE6 not working for me

Forum Moderators: not2easy

Message Too Old, No Replies

IF IE6 not working for me

JillC

8:02 am on Aug 23, 2007 (gmt 0)

I used a template with a fixed left div holding the navigation and a scrolling right div. Everything was fine until I implemented fckeditor for online editing. The top was obscured by the website making it impossible to save or publish the changes to the page. Eventually I found that if I changed the left div to position:relative instead of absolute, it worked. However the right side dropped to just below where the left side text ended when using the editor. I thought my end-user would cope with this.

Then I discovered that this is how it is shown in IE6 as well. So I tried putting position:absolute inside a <!--[if IE 6]> section but it has not worked.

Am I heading in the wrong direction? What have I got wrong?

Marshall

8:36 am on Aug 23, 2007 (gmt 0)

Are you trying to achieve a two column layout? And if memory serves, IE 6 does not support position:fixed.

Marshall

JillC

9:36 am on Aug 23, 2007 (gmt 0)

Yes, it's 2 columns, no header or footer.

Something like this:
<body>
<div id="sidebar">
<h1>sidebar text</h1>
</div>

<div id="main">
<h1>content of site</h1>
</div>

The stylesheets:

body{margin:0; padding:0; color:#303030; background:#fafafa url(../img/bodybg2.gif) repeat-y left top; font:76% Verdana,Tahoma,sans-serif;background-color: #E0E0E0;}
#sidebar
{position:relative; top:0; left:0; width:220px; height:100%; overflow:hidden; background:#e0e0e0 url(../img/sidebarbg.gif) top right repeat-y; text-align:right;}

body > #sidebar
{position:fixed;}
#main
{width:500px; margin:0 0 0 250px; padding:20px 6; background:#fafafa;}

then fix.css ..........

html
{overflow:hidden;}

body
{height:100%; width:100%; overflow:auto;}

#sidebar
{position:absolute;}

As I said, it worked perfectly in IE7 and in IE6 until I tried to implement the editor. But in order for the editor to work, I need to have the position:relative for the sidebar div.

Marshall

10:20 am on Aug 23, 2007 (gmt 0)

Two column fluid layout.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
height: 100%;
}
#container {
margin: 0 auto;
width: 90%; /* This can be %, px, em */
text-align: left; /* Needed for IE if you want the container to center */
}
#left { /* Assign margin. With no margin, columns will touch */
width: 50%; /* Will fill half container, adjust to needs*/
float: left;
}
#right { /* Assign margin. With no margin, columns will touch */
width: 50%;
float: left;
}
</style>
</head>

<body>
<div id="container">
<div id="left">Left column</div>
<div id="right">Right column</div>
</div>
</body>

</html>

Marshall

[edited by: Marshall at 10:33 am (utc) on Aug. 23, 2007]

JillC

11:02 am on Aug 23, 2007 (gmt 0)

Thanks, but that's not what I'm trying to do. This is a fixed position left col and a scrolling right col. It looks like one of those horrible frame sites we used to do :-)

Marshall

11:25 am on Aug 23, 2007 (gmt 0)

IE 6 is not going to support the fixed position. Try this if statement, Change the body.scrollTop as needed.

And forget the #container

Marshall

JillC

1:38 am on Aug 25, 2007 (gmt 0)

In all my searching around I figured it had to be something to do with "haslayout" elements. The answer from another forum was simpler and it works, the last line in the IE fix:
#nav li{height:1%;}

I guess if I had given you the full code you may have twigged that was where my mistake was. Sorry.