Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts

    Position FIxed: IE

    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...
    Code:
    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;}
    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>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...

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.

  • #3
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    I've found loads but none that I can get to work with my specific problem....

  • #4
    Regular Coder
    Join Date
    May 2005
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    position:relative;top:expression(offsetParent.scrollTop);
    Thanks in advance!

  • #5
    Regular Coder
    Join Date
    May 2005
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by NancyJ
    I've found loads but none that I can get to work with my specific problem....
    So... was that it, or did ya' not wanna' to know?
    Thanks in advance!

  • #6
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by enumerator
    position:relative;top:expression(offsetParent.scrollTop);
    Nice thinking I'll use that.
    CATdude about IE6: "All your box-model are belong to us"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •