Should work in ie but isnt :@

Mr P!nk · October 18, 2007

i have a form where i need the nav, nav bg and nav header to stay, but the content to scroll across the top of the header.

Now this works great in FF, but IE6 doesn't seem to like it (as per usual) i have seen a few scripts online to "hack" IE6 with the determined fixed vs absolute positioning, but they don't seem to be working either

maybe im just not coding it right

So any comments as to why would be awesome

css.

html, body {
margin: 0;
background-color: white;
}

body {padding-left: 220px;}

div.fixed1 {
position: fixed;
width: 152px;
height: 600px;
left: 0px;
top: 0px;
z-index: 1;
}
div.fixed2 {
position: fixed;
width: 648px;
height: 281px;
left: 152px;
top: 0px;
}
div.fixed3 {
position: fixed;
width: 136px;
height: 200px;
left: 5px;
top: 200px;
padding: 0px;
z-index: 100;
}
div.fixed4 {
position: absolute;
width: auto;
height: auto;
left: 156px;
top: 281px;
padding: 0px;
z-index: 100;
}
.licence {
font-size: 10px;
color: #333333;
font-family: Arial;
font-weight: bold;
top: 281px;
position: absolute;	
left: 5px;
width: 140px;
height: 79px;	
}
.style9 {font-size: 12}
</style>
<!--[if lte IE 6]>
//<![CDATA[
html, body
{
height: 100%;
overflow: auto;
}
div.fixed1 {
position: absolute;
}
div.fixed2 {
position: absolute;
}
div.fixed3 {
position: absolute;
}
//]]>

<![endif]-->

page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="includes/global.css" rel="stylesheet" type="text/css">
<title>form 1</title>
<script type="text/javascript">
function activity(){
     this.form.action='e.php'
}
</script>
</head>

<body>
<form method="post" enctype="multipart/form-data"> // i'm aware no action is assigned
<div class="fixed1">
		<img src="admin/images/navbg.gif" alt="nav bg" width="152" height="600" />
</div>

<div class="fixed2">
<img src="admin/images/content_header.gif" alt="content header" width="648" height="281" />
</div>

<div class="fixed4">
Reply ID <br />
<label>
<input name="merc_replyId" type="text" class="formData" id="merc_replyId" value="test" size="50" />
</label>
<p>Reply Address<br />
        <label>
        <input name="merc_replyAddress" type="text" class="formData" id="merc_replyAddress" value="test@test.co.uk" size="50" />
        </label>
</p>
<p> Message Title<br />
        <input name="merc_messageTitle" type="text" class="formData" id="merc_messageTitle" value="Title <?php echo date('F Y'); ?>" size="50" />
        <br />
</p>
<p>Mailing List<br />
        <label>
        <textarea name="merc_mailingList" cols="50" rows="3" class="formData" id="merc_mailingList"></textarea>
        </label>
</p>
<p>Topic Title 1 <br />
        <input name="corp_topictitle1" type="text" id="corp_topictitle1" value="1" size="50" />
</p>
<p>Text Area 1 <br />
        <textarea id="corp_messagebody1" name="corp_messagebody1" cols="50" rows="10" >text text text</textarea>
</p>
<p>Topic Title 2 <br />
        <input name="corp_topictitle2" type="text" id="corp_topictitle2" value="2" size="50" />
        <br />
        <br />
     Textual Content 2<br />
    <textarea name="corp_messagebody2" cols="50" rows="10" class="formData" id="corp_messagebody2">Text text text</textarea>
</p>
<p >Topic Title 3 <br />
        <input name="corp_topictitle3" type="text" id="corp_topictitle3" size="50" />
        <br />
        <br />
    Textual Content 3 <br />
    <textarea name="corp_messagebody3" cols="50" rows="10" class="formData" id="corp_messagebody3"></textarea>
    <br />
</p>
</div>

<div class="fixed3">
<input name="preview" type="image" value="preview" src="admin/images/preview_btn.gif" alt="Preiview your Layout" align="left" />
        <br />
        <br />
        <input align="left" name="send2" type="image" onclick="activity()" src="admin/images/test_btn.gif" alt="Send mailout" />
        <br />
        <br />
        
        <input name="send" type="image" src="admin/images/list_btn.gif" alt="Send mailout" align="left"/>
        <br />
            <br /> 
            <input name="corp" type="image"  src="admin/images/reset_btn.gif" />
		<br/>

</div>
</form>
</body>
</html>

does using css in php differ from using css in HTML ( just so i can rule it out my thoughts is no but im no expert)

Thanks

P!nk

ToonMariner · October 18, 2007

you will have to use javascript in ie 6 to keep an element at a fixed position in the window...

Mr P!nk · October 18, 2007

Ok TM i will look at JS.but in the meantime i found

div.fixed1 {
position: fixed;
width: 152px;
height: 600px;
left: 0px;
top: 0px;
z-index: 1;
}
* html div.fixed1 {position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop : document.body.scrollTop);
}
div.fixed2 {
position: fixed;
width: 648px;
height: 281px;
left: 152px;
top: 0px;
}
* html div.fixed2 {position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop : document.body.scrollTop);
}
div.fixed3 {
position: fixed;
width: 136px;
height: 200px;
left: 5px;
top: 200px;
padding: 0px;
z-index: 100;
}
* html div.fixed3 {
position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop : document.body.scrollTop);
top: 200px;
}
div.fixed4 {
position: absolute;
width: auto;
height: auto;
left: 156px;
top: 281px;
padding: 0px;
z-index: 100;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
}

which works in ie6 lags the page a bit, but what i would like to know is if someone could do it in ie 7 ?

tell me the results? usint the layout i supplied above

Thanks

P!nk

bronzemonkey · October 19, 2007

What you are using is javascript and the problem is that the "fixed" element doesn't stay perfectly still during scrolling.

There is also this non-javascript trick to get position:fixed emulated in IE6 - http://css-discuss.incutio.com/?page=EmulatingFixedPositioning - but it doesn't work for all layouts. Give it a try.

Sign In

Should work in ie but isnt :@

Recommended Posts

Mr P!nk

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

Mr P!nk

Link to comment

Share on other sites

bronzemonkey

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information