4 Replies - 3039 Views - Last Post: 01 December 2011 - 05:19 AM

#1 scentauri   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 64
  • Joined: 16-February 11

Bar that stays visible at the bottom of the page

Posted 22 November 2011 - 07:53 PM

I want to code a bar that stays visible at the bottom of the page, even when scrolling. It works in Firefox, Chrome, IE8+, but I want it to be able to work in IE7 and possibly IE6.

I have a program called IETester and the following code does not render correctly in IE6/7

Any help would be greatly appreciated:

<!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>
<style type="text/css"> 
body{    
width:100%; 
height: 10000px; 
margin: 0 auto;
text-align: center;
} 
#bar { 
position: fixed; 
bottom: 0px; 
width: 100%; 
float: bottom; 
height:25px; 
background: #000; 
color: #FFF; 
margin: 0; 
padding: 10px 0px 10px 0px; 
} 
#top{    
width: 100%;   
 height: 1000px;    
 } 
 </style>
 </head> 
 <body> 
 <div id="top">Top</div> 
 <div id="bar">Content</div> 
 </body>
 </html>



Is there any other way of making this work for IE6/7? Maybe JQuery with CSS?

Is This A Good Question/Topic? 0
  • +

Replies To: Bar that stays visible at the bottom of the page

#2 Lemur   User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1442
  • View blog
  • Posts: 3,622
  • Joined: 28-November 09

Re: Bar that stays visible at the bottom of the page

Posted 22 November 2011 - 08:32 PM

http://www.howtocrea...edPosition.html

It wasn't supported until late IE7
Was This Post Helpful? 1
  • +
  • -

#3 ranthi   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 20
  • Joined: 28-November 11

Re: Bar that stays visible at the bottom of the page

Posted 28 November 2011 - 09:04 PM

dont think you can do that in pure css for those browsers but perhaps some javascript to keep it at the bottom like those menus on the side that follow you down the page..anways...
Was This Post Helpful? 0
  • +
  • -

#4 The Prodigy   User is offline

  • New D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 34
  • Joined: 03-October 11

Re: Bar that stays visible at the bottom of the page

Posted 29 November 2011 - 12:43 PM

Well, the float property is not supported in IE7 or earlier (w3schools - CSS float property)

Neither is z-index, which is what I was going to suggest, until I looked and found that it, as well, is not supported in IE7 or earlier (w3schools - CSS z-index property)

I don't know of another way besides the use of the <frame> and <frameset> tags, which I doubt is what you want. Sorry :( You rarely get what you want with IE... especially the old versions!
Was This Post Helpful? 0
  • +
  • -

#5 e_i_pi   User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: Bar that stays visible at the bottom of the page

Posted 01 December 2011 - 05:19 AM

It's entirely possible in CSS. I use it on my site.
It can be easily achieved by setting a particular area as scrollable, which gives the user the impression of the remainder of the screen adhering to its original position, regardless of the position of the scrollbar:
<div style="height: 90%; width: 100%; overflow-y: scroll">
	Main Content that has the scrollbar
</div>
<div style="height: 10%; width: 100%">
	Bottom bar that stays static
</div>



Of course, you may want more styling attributes in there, or to rearrange the divs and measure them out using absolute positioning, but that'd the basic gist of it.

This post has been edited by e_i_pi: 01 December 2011 - 05:20 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1