PDA

View Full Version : Absolute nightmare IE6


Rich_A06
01-10-2009, 09:05 AM
Learned to use div and css after previously using tables and it looks fine in FF and Opera but in IE6 it's completely wrong.

http://paygwp.com/demo.htm

Are there some hacks I can use to make it work in IE6? I really like the layout and what I'm able to do with absolute positioning, it's like iframes but there's the added bonus of the scoller being resizeable.

Here's the code ..

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<script language="JavaScript" type="text/JavaScript">
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindo w.
document.body.scrollHeight;

//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
</script>
<style type="text/css">
body {
margin-left: 10px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
background-color: #ccc;
}

.header{
top:0px;
right:240px;
left:0px;
margin-right:0px;
height:160px;
width:auto;
border: 2px solid #000000;
background: #ffffff;
color: #333333;
padding: 0px;
position:absolute;
overflow:hidden;
}

.right-col{
top:0px;
right:0px;
left:auto;
bottom:88px;
width:230px;
height:auto;
border: 2px solid #000000;
background: #ffffff;
color: #333333;
padding: 0px;
position:absolute;
overflow:auto;
clear: left;
clear: right;
}

.left-col{
top:168px;
left:220px;
right:240px;
bottom:88px;
height:auto;
border: 2px solid #000000;
color: #333333;
padding: 0px;
position:absolute;
overflow:auto;
clear: right;
clear: left;
}

.footer{
bottom:0px;
right:0px;
left:0px;
height:80px;
width:auto;
border: 2px solid #000000;
background: #ffffff;
color: #333333;
padding: 0px;
position:absolute;
overflow:hidden;
}

.scrollcell {
width: 100%;
height: 100%;
overflow: auto;
margin:0px 0px 0px 0px;
}
</style>
<body>
<div class="header"><img src="design_pencil_8.png" height="160px;" width="auto" align="right"></div>
<div class="left-col"><div class="scrollcell">
<iframe name="the_iframe" onLoad="calcHeight();"
scrolling="no" width="100%" height="2200px" id="the_iframe" src="http://www.forum.eoaa.org" frameborder="0" allowtransparency="true" ></iframe></div></div>
<div class="right-col"></div>
<div class="footer"></div>


</body>
</html>

Corrosive
01-10-2009, 11:06 AM
Learned to use div and css after previously using tables and it looks fine in FF and Opera but in IE6 it's completely wrong.

http://paygwp.com/demo.htm

Are there some hacks I can use to make it work in IE6? I really like the layout and what I'm able to do with absolute positioning, it's like iframes but there's the added bonus of the scoller being resizeable.

Here's the code ..

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<script language="JavaScript" type="text/JavaScript">
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindo w.
document.body.scrollHeight;

//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
</script>
<style type="text/css">
body {
margin-left: 10px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
background-color: #ccc;
}

.header{
top:0px;
right:240px;
left:0px;
margin-right:0px;
height:160px;
width:auto;
border: 2px solid #000000;
background: #ffffff;
color: #333333;
padding: 0px;
position:absolute;
overflow:hidden;
}

.right-col{
top:0px;
right:0px;
left:auto;
bottom:88px;
width:230px;
height:auto;
border: 2px solid #000000;
background: #ffffff;
color: #333333;
padding: 0px;
position:absolute;
overflow:auto;
clear: left;
clear: right;
}

.left-col{
top:168px;
left:220px;
right:240px;
bottom:88px;
height:auto;
border: 2px solid #000000;
color: #333333;
padding: 0px;
position:absolute;
overflow:auto;
clear: right;
clear: left;
}

.footer{
bottom:0px;
right:0px;
left:0px;
height:80px;
width:auto;
border: 2px solid #000000;
background: #ffffff;
color: #333333;
padding: 0px;
position:absolute;
overflow:hidden;
}

.scrollcell {
width: 100%;
height: 100%;
overflow: auto;
margin:0px 0px 0px 0px;
}
</style>
<body>
<div class="header"><img src="design_pencil_8.png" height="160px;" width="auto" align="right"></div>
<div class="left-col"><div class="scrollcell">
<iframe name="the_iframe" onLoad="calcHeight();"
scrolling="no" width="100%" height="2200px" id="the_iframe" src="http://www.forum.eoaa.org" frameborder="0" allowtransparency="true" ></iframe></div></div>
<div class="right-col"></div>
<div class="footer"></div>


</body>
</html>


Do you know why you have used absolute positioning over relative positioning? The absolute'ness' of your divs could well be causing your browser issues.

Rich_A06
01-10-2009, 07:46 PM
Because as far as I can tell, there's no other way to create a central or main section which is resizable (depending on screen resolution and window size) and scrollable at the same time. Try changing the shape of your window, it works real nice. I could create a fixed iframe of 500px but this might not work for someone using a low or extremely high resolution. It's very much either or, either fixed iframe or have the entire area scroll. Spent all day yesterday trying to acheve that page, works perfectly in FF and Opera but doesn't work at all in IE6. Doesn't work in design view either but I'm used to editing code so it don't matter too much.

Rich_A06
01-10-2009, 09:06 PM
It can be done with frames. I don't mind using frames, put a simple Print symbol in content area which opens that frame in new tab on it's own. Is possible to manage frameset and make it bot friendly http://www.searchengineguide.com/dale-goetsch/optimizing-frames-for-search-engines.php. There's no other soluton if I want fixed areas and one resizable/scrollable central area. Obviously it can be done with divs and css but it's messy and needs fixes for each browser. Could be done with flash but flash is no good for search engines. Could be done with js too but would take forever.

domedia
01-10-2009, 10:41 PM
The only item in that layout that requires an absolutely positioned element is the footer. I don't really see the problem, but I have not investigated the code in full. I've been making tablesless layouts for IE6 for the last 5 years, the browser can handle it just fine imho.

Rich_A06
01-10-2009, 11:37 PM
Yes it's fine to scroll the entire area but not really for fixing areas. It would probably work fine for a fixed header but when more abosolute areas are added it goes a bit mental in IE, might be fine in IE7 but can't ignore IE6 and printing issue is a big problem too. Have made frameset now, works great. I'm still interested in finding out if the css issues with IE6 can be resolved.


<title>Untitled Document</title>
</head>

<frameset rows="160,100%" cols="*" framespacing="0" frameborder="no" border="0">
<frame src="header.htm" scrolling="no" />
<frameset rows="100%,60" framespacing="0" frameborder="no" border="0">
<frameset cols="100%,200" framespacing="0" frameborder="no" border="0">
<frameset cols="280,100%" framespacing="0" frameborder="no" border="0">
<frame src="paste%20body%20to%20convert.htm" scrolling="no" />
<frame src="paste%20body%20to%20convert.htm" scrolling="auto" />
</frameset>
<frame src="paste%20body%20to%20convert.htm" scrolling="no" />
</frameset>
<frame src="footer.htm" scrolling="no" />
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>