...

View Full Version : Position FIxed: IE



NancyJ
07-07-2005, 05:14 PM
How can I make the #topbar of this page stay at the top at all times, without using frames.
I've seen various different ways of achieving a fixed position element to work for IE, but I cant get any of them to work for my particular situation...

table{
padding-top:5px;}
tr{padding-top:3px;}

#wrap{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:xx-small;
line-height:11px;
border:1px solid #5D2E86;
width:743px;
height:100%;
padding:5px;
margin:auto;
}

td{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:xx-small;
line-height:11px;

}

a span{
display:none;}

ul#nav{
margin:5px;
padding:0px;
position:relative;
top:10px;
}
ul#nav li {
display:inline;
margin:0px;
padding:0px;

}

ul#nav li img{
border:0px solid;}

#topbar{
background-color:#8F74AB;
height:101px;
margin-bottom:5px;
}

#secondbar{
height:201px;
margin-bottom:5px;
font-size:11px;
color:#5D2E86;
}

#secondbar a{
color:#5D2E86;
text-decoration:underline;
}
#secondbar a:hover{
text-decoration:none;
}

p{
margin:0px;
padding:5px;

}

#secondbar p{
padding:0px;
line-height:18px;
}


#secondleft{
width:328px;
height:201px;
float:left;
}


#secondright{
width:394px;
height:185px;
background-color:#E8F7FC;
border:2px dotted #5D2E86;
float:right;
padding:6px;
}

#thirdbar{
height:120px;
margin-bottom:5px;
}

#thirdleft{
width:328px;
height:120px;
background-color:#FCD45B;
float:left;
}
#thirdleft h1{
background-image:url(../images/eventsh.gif);
position:relative;
left:159px !important;
left:0px;
}
#thirdright h1{
position:relative;
left:198px !important;
left:0px;
background-image:url(../images/newsh.gif);
}
#bottomleftright h1{
background-image:url(../images/involvedh.gif);
}
#bottomrightleft h1{
background-image:url(../images/adviceh.gif);
}
#bottomrightright h1{
background-image: url(../images/chillh.gif);
}

h1 span{
display:none;}

h1{
background-position: 3px 3px;
background-repeat:no-repeat;
width:100px;
height:13px;
margin:0px;
}

#thirdright{
width:410px;
height:120px;
background-color:#E1CF87;
float:right
}

#bottombar{
height:265px;
margin-bottom:5px;

}

#bottomleft{
width:328px;
height:265px;
float:left;
}
form{
margin:0px;
line-height:11px;}
#vote form input{
height:11px;
vertical-align:middle;
}
#vote form input.button{
height:22px;
margin-top:5px;
margin-left:5px;}

#vote{
width:120px;
background-color:#C0C0C0;
float:left;
height:265px;
color:#fff;
}

#bottomleftright{
width:203px;
float:right;
height:265px;
background-color:#FBEBC2;
}

#bottomright{
width:410px;
height:265px;
float:right;
}

#bottomrightleft{
background-color:#F7A569;
height:265px;
width:202px;
float:left;
}

#bottomrightright{
background-color:#A6C9EC;
width:203px;
height:265px;
float:right;
}
#footer{
text-align:center;
font-size:9px;
color:#5D2E86;}

a{
text-decoration:underline;
color:#000;}

a:hover{
text-decoration:none;
color:#000;}




<!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>Connexions, West Yorkshire - The best start in life for every young person</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id = "wrap">
<div id = "topbar"><img src="images/banner.gif" width = "745" height = "55" alt = "Connexions, West Yorkshire - The best start in life for every young person" />
<ul id = "nav">
<li><a href = "#"><img src="images/abouta.gif" alt = "About" width="58" height="13" /><span>About</span></a></li>
<li><a href = "#"><img src="images/involveda.gif" alt = "Get Involved" width="119" height="13" /><span>Get Involved</span></a></li>
<li><a href = "#"><img src="images/advicea.gif" alt = "Get Advice" width="95" height="13" /><span>Get Advice</span></a></li>
<li><a href = "#"><img src="images/contacta.gif" alt = "Contact Us" width="100" height="13" /><span>Contact Us</span></a></li>
<li><a href = "#"><img src="images/chilla.gif" alt = "Chill Out Zone" width="133" height="13" /><span>Chill Out Zone</span></a></li>
<li><a href = "#"><img src="images/registrationa.gif" alt = "Registration" width="116" height="13" /><span>Registration</span></a></li>
<li><a href = "#"><img src="images/votea.gif" alt = "Poll/Vote" width="94" height="13" /><span>Poll/Vote</span></a></li>
</ul>
</div>
<div id = "content">
<div id = "secondbar"><div id = "secondleft"><img src="images/happychildren.jpg" width = "328" height = "201" alt = "happy, smiling children" /></div><div id = "secondright">
<p><strong>Connexions West Yorkshire, </strong> providing all young people in West Yorkshire with easy access to services in order for them to become successful adults and citizens.
</p>
<p><strong>One stop, one service: putting young people first.</strong></p>
<p>This area may be a good place to put the latest additions to the site. </p>
<p><a href = "#">New training courses</a> available throughout West Yorkshire. <a href = "#">Careers workshop</a> is back on the road again. Why not see if we are in a town near you over the coming weeks. If your school results didnt turn out as expected, why not take an alternative route, professional <a href = "#">career advice</a> is available.</p>
</div></div>
<div id = "thirdbar"><div id = "thirdleft">
<img src="images/dancing.jpg" width="159" height="120" alt = "teens breakdancing" align = "left" />
<h1><span>Events</span></h1>
<table border="0" cellpadding="0" cellspacing="0" summary="Upcomming Events" width = "165" align = "center">
<tr><th width="40" valign="top" title="Date" scope="col"></th>
<th width="123" title = "Event" scope = "col"></th></tr>
<tr><td valign="top">07/07:</td>
<td>Calderdale College End of Year Floorshow</td></tr>
<tr><td valign="top">09/07:</td>
<td>Wakefield College of Art Open Evening</td></tr>
<tr><td valign="top">22/07:</td>
<td>Leeds City Hall Summer Initiative Launch Night</td>
</tr>
<tr><td valign="top">05/08:</td>
<td>Work It Out Hits The Big Screen - IMAX Bradford</td></tr>
</table>
</div><div id = "thirdright"><img src="images/ict.jpg" width="198" height="120" alt = "children using computers" align = "left" />
<h1><span>Latest News</span></h1>
<table border="0" cellpadding="0" cellspacing="0" summary="Upcomming Events" width = "200" align = "center">
<tr><th width="40" valign="top" title="Date" scope="col"></th>
<th width="160" title = "News" scope = "col"></th></tr>
<tr><td valign="top">07/07:</td>
<td>Connexions West Yorkshire Capacity Build Grant </td>
</tr>
<tr><td valign="top">09/07:</td>
<td>Which Way Now? </td></tr>

<tr><td valign="top">22/07:</td>
<td>Work It Out Hits The Big Screen </td>
</tr>
<tr><td valign="top">05/08:</td>
<td>Calderdale &amp; Kirlees Learner of the Year Awards 2005 </td>
</tr>
<tr><td valign="top">05/08:</td>
<td>Rathbone MV </td>
</tr>

</table>
</div>
</div>
<div id = "bottombar">
<div id = "bottomleft">
<div id = "vote"><img src="images/vote.gif" alt="vote" width="120" height="92" />
<p>This is the area where an opinion poll or vote can be placed, this is meant to be long - winded, just to show worse case scanario.
</p>
<form action = "">
<input type = "radio" name = "poll" />Strongly Agree<br />
<input type = "radio" name = "poll" />Agree<br />
<input type = "radio" name = "poll" />No Opinion<br />
<input type = "radio" name = "poll" />Disagree<br />
<input type = "radio" name = "poll" />Strongly Disagree<br />
<input type = "submit" value = "Vote" class = "button" />
</form></div>
<div id = "bottomleftright"><img src="images/colourprinter.jpg" alt="colour printout on printer" width="203" height="152" />
<h1><span>Get Involved</span></h1>
<p>This area could be dedicated to <a href = "#">attracting target audience</a> to help in supporting the aims and objectives of Connexions West Yorkshire. There may be <a href = "#">information</a> and details of <a href = "#">incentives</a> that are in place to encourage clients of Connexions</p></div>
</div>
<div id = "bottomright">
<div id = "bottomrightleft"><img src="images/chef.jpg" width="203" height="152" alt = "young chef" />
<h1><span>Get Advice</span></h1>
<p>The area where advice can be given to target audiences covering all areas of <a href = "#">training and career advice</a>. It may also include perishable information on <a href = "#">exhibitions and roadshows</a> that the organisation is supporting or directly involved with in West Yorkshire.</p></div>
<div id = "bottomrightright"><img src="images/streetkids.jpg" width="202" height="152" alt = "young people hanging out" />
<h1><span>Chill Out Zone</span></h1>
<p>Focusing on <a href = "#">games</a>, <a href = "#">eCards</a>, <a href = "#">competitions</a> and special offers for the target audience. It may also provide links to articles and advice from <a href = "#">other sites</a> and in particular <a href = "#">government initiatives</a>. It could be the gateway to the social, health &amp; socio/relationship resources.</p></div>
</p>
</div>
</div>
<div id = "footer"> All Content Copyright &copy; 2002 - 2005 <strong> Connexions West Yorkshire</strong> - All Rights Reserved</div>
</div>
</div>

</body>
</html>



can anyone help me with this? My boss wants me to use frames but I really dont want to have to do that...

_Aerospace_Eng_
07-07-2005, 07:35 PM
Good luck getting position:fixed; to work in IE, its a PITA to get it working. It almost always requires use of expressions or some javascript. Search around the net for position:fixed in Internet Explorer you should find some articles that interest you.

NancyJ
07-07-2005, 11:18 PM
I've found loads but none that I can get to work with my specific problem.... :mad:

enumerator
07-09-2005, 05:05 AM
position:relative;top:expression(offsetParent.scrollTop);

enumerator
07-13-2005, 03:33 PM
I've found loads but none that I can get to work with my specific problem.... :mad:
So... was that it, or did ya' not wanna' to know?

mrruben5
07-14-2005, 10:31 AM
position:relative;top:expression(offsetParent.scrollTop);
Nice thinking :D I'll use that.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum