CSS - Fixed Page

Hi all,

I'm trying to do a div at the bottom of the screen as being a fixed position but the problem with this it does not work in IE.

So then how would i go about doing this?

css Code:
Original - css Code .footerBar { background-color:#CCCCCC; margin: 0 auto 0 auto; width:100%; height:40px; position:fixed; color:#FFFFFF; left:0px; bottom:0px; }

  

  


 .footerBar


     {


         background-color:#CCCCCC;


         margin: 0 auto 0 auto;


         width:100%;


         height:40px;


         position:fixed;


         color:#FFFFFF;


         left:0px;


         bottom:0px;


     } 

html Code:
Original - html Code <div class="footerBar"> Hello World </div>

  

<div class="footerBar">
    Hello World
</div>

I'm working on my personal website and needed something quick so I found a free template I liked and started changing things as needed. The way the header works is it uses a background img for the nav so it displays off both sides of the browser. This image scrolls up as the page does. To make it look more interesting I wanted to add a simple background image to visually box in the content... but I need this one to be fixed. Every solution I've tried doesn't seem to work. I'm posting separate test links with a description why its not working. (I'm a new user so you'll have to copy/paste links. Figured it'd be easier for you to see it than post 8 different code tags).

First thing's first: Images I'm moving around a
bg_boarder.jpg and bg_general.jpg

bradyoo.com/test.html
Both bg imgs in body {} - boarder img scrolls.

bradyoo.com/test02.html
Boarder img fixed in wrapper {} - boarder img displays on top of bg_general by YO logo.

bradyoo.com/tes03t.html
Boarder img fixed in body {}, general img in header{} - General image doesn't display beyond wrapper.

I even tried fixing everything (not the optimal result, but I will use it if this is the only solution)

bradyoo.com/test04.html
Both bg fixed in body {}, position: fixed in header {} - I added the fixed position in the header to keep the nav from scrolling but the embeded content displays on top of the header when scrolling.

Since position:fixed does not work in IE, are there any other ways to achieve the fixed effect, without using javascript?

Please look at
http://www.mailhorde.com/scripts.php
and
http://www.mailhorde.com/

You will see what i mean. THe navigation bar is being stretched down. I have the top image in a table cell of its own.

Is there any CSS that will stop this from happening?


Thanks,
Andrew

i am trying to do this example here

w3schools.c0m/css/tryit.asp?filename=trycss_position_fixed

the o, in .com has been changed to 0 so i could post. sorry

the text " Some more text "

I wish to had dead center on the right side of the page, not near the top like that,

mainly, i wish to put two more lines of text just under it as well, all being dead center of the page, on the right, i cannot figure it out, any help please?

Hi there,

I am trying to place a fixed backgroung image to a div, which is to be position to the bottom right of the screen. The code I have so far:

Code:

body#fixed { 
   background-image: url(../images/fixed-bg.png);
   background-position: bottom right;
   background-repeat: no-repeat;
   background-attachment: fixed;
   }

using <div id="fixed"></div>

However it doesn't seem to work. I can't add the bg image to the body style as I already have another background image specified for the entire document.

Any ideas?

hi

I have a page which has the top menu section fixed (using CSS), and the remainder of the page can be scrolled ... i.e. there are no frames.

However the code below works well in firefox, but not IE.

Could anyone please help make the code the work in IE (and all other major browsers).

cheers
nathan

here's the code:

Code:

	<style type="text/css" media="screen">


		html, body
		{
			margin: 0;
			padding: 0;
			height:100%; 
			max-height:100%; 
			font-size: 90%;
			font-family: verdana, sans-serif, arial, helvetica;
			background-image: url('gradient.jpg');
			background-repeat: repeat-x;
			background-color:#fff;
		}
		
		#header
		{	position: fixed;
          		top: 0px;
           		left: 0px;
           		width: 100%;
           		height: 100px;
           		z-index: 1;
			height: 50px;
			margin-bottom: 2em;
			background-image: url('gradient2.jpg');
			background-repeat: repeat-x;
		}

		#topmenu
		{
			position: absolute;
			left: 250px;
			top: 30px;
			width:505px;
		}

		#stats
		{
			position: absolute;
			right: 15px;
			top: 5px;
			text-align: center;
		}

		#gutter
		{
			float: left;
			width: 3%;
			height: 1px;
		}
		
		#col1
		{
			float: left;
			width: 45%;
			margin-bottom: 1em;
			border-right: 1px solid #ccc;
			padding-right: 3%;
			margin-top: 5.5em;
		}
		
		#col2
		{
			float: left;
			width: 15%;
			margin-left: 3%;
			margin-bottom: 1em;
			padding-right: 3%;
			margin-top: 5.5em;
		}
		
		#col3
		{
			position: absolute;
			right: 30px;
			margin-left: 3%;
			margin-bottom: 1em;
			margin-top: 5.5em;
		}
		
		#footer
		{
			clear: both;
			height: 50px;
			padding: .5em;
			font-size: 11px;
		}

		#footer ul {
			border-top: 1px solid #ccc;
			margin: 0;
			padding: 1em 0 0 0;
			list-style: none;
		}

		#footer li a, #footer li span {
			display: block;
			float: left;
			padding: 5px 1em;
			border-right: 1px solid #ccc;
		}

		#footer li span.copyright {
			border-right: none;
		}

		a:hover {
			color: #003;
		}
		
		h1
		{
			margin: 0;
			padding: .5em;
		}
		
		h2 { margin-top: 0; }

<!--[if IE 6]>

body
  {
  overflow: hidden;
  }
div.content
  {
  height: 100%;
  overflow: auto;
  }

<![endif]--> 
</style>

ok my site works perfect in ffox but when i load it in ie the fixed position dose not work :'( why not?, if i go back in firefox it will

I'm attempting to use the Declaration of Independence as the background for my site. It is much longer than wide, but I want to display all of it. So I want the background to stop scrolling when the bottom of the image is reached at the bottom of the browser window while still allowing content to scroll on top of it. I have seen this done with a completely fixed background, but not with a partially scrolling background. Does anyone know how, or even if, this can be done?

Does such a thing exist? I have seen various examples and tried more than one, and every time I either end up with a right margin when the page is not long enough to scroll, or I end up with a horizontal scroll bar when the page is scrolling.

All I want is a fixed position footer (at the bottom of the viewport permanently) where the page content scrolls vertically behind it without any gaps

Hey folks...

I'm working on a site that uses CSS, and the PHP "switch" statement, to pull pages into a main div on the index page.

I put a background image into the main ".content" div, which should remain fixed while the content (brought in by the switch), scrolls over it. When I wrote the image in, FF did this by default, whereas in IE, the image would scroll with the text... so I put in the "background-attachment:fixed" code in, and now it works fine in IE, but FF has suddenly developed a problem with it.. the image is off-center, so only part of it shows, leaving huge white spaces where it should be covered.

You can look at the site here.

I've attached the code for the index page as a word document. Hope this is OK, I figured it would be better than sticking all the code on here!

Anyone have any ideas what I'm doing wrong?

BW. x

The link below shows the fixed positioning layout I need to achieve, but rather than have the scrolling content fixed to the left or right hand side I want to have it centered with the navigation fixed and just to the left of the scrolling content. Like the image below:

http://limpid.nl/lab/css/fixed/header



Is this possible? Thanks

How to keep bg fixed with top header non moving

refer http://vedasprojects.com/

I want to keep the top header fixed

At present when i scroll the page , the top header moves ...

I dont want the header to move ...

please help