problem with div fixed to the bottom of the page.

I have an additional problem. I want the back link to follow the edge of the page when resizing.

The back button is in its own div and container

#backcontainer {
position:relative;
width: 989px;
padding: 0px 0px 0px 20px;
margin: 0 auto;
}


and within this

#back {
position:fixed;
bottom:15px;
z-index:+110;
}

here is a working example

http://test.venndiagram.eu/backbuttontest.html

If I set the padding on the container to 20px to the left then the back link only aligns to the edge of the page when the browser is smaller than the site, (this is the way I want it to look like).

http://i22.photobucket.com/albums/b304/heliosvk/Screenshot2011-04-02at135427.png

The moment I resize it to be bigger than the size of the site the back link moves about 15px right of the edge of the page

hhttp://i22.photobucket.com/albums/b304/heliosvk/Screenshot2011-04-02at135448.png

If I remove the padding on the container:

#backcontainer {
position:relative;
width: 989px;
padding: 0px 0px 0px 0px;
margin: 0 auto;
}


then when the brower is bigger than the site the back link is aligned to the edge of the page (as I want it to be) but when you resize the browser to less than the width of the page it just moves right to the edge of the browser as in here

http://i22.photobucket.com/albums/b304/heliosvk/Screenshot2011-04-02at135416.png

see a working example of the site here.

http://test.venndiagram.eu/backbuttontest.html

Can anyone be so kind to help me with this. I've tried everything. Many thanks in advance

Jordi

Change
#back {
position:fixed;
bottom:15px;
z-index:+110;
}
to
#back {
position:fixed;
bottom:15px;
z-index:110;
}

I think that will work.

That didn't seem to do anything. Any more ideas?

That didn't seem to do anything. Any more ideas?
We really need to see ALL your code in order to help you. Better still a link.

Frank

We really need to see ALL your code in order to help you. Better still a link.

Frank

Hi efpeetee,

I did post a link at the bottom of my first post (actually now I look at it I posted it twice) but here it is again:
http://test.venndiagram.eu/backbuttontest.html

Can you see the source from there?

I'm not sure exactly where you want the "back" to be positioned, but if the problem is the left to right movement as you resize the window, that's because #back is within #backcontainer which has margin:0 auto set to centre it....

..so when you resize your window the position on #backcontainer will move, and so will that of #back, as although you have set position:fixed it has no left or right value. In the absence of this the value will effectively be "auto" so it will move with #backcontainer. Set a left value to #back and it'll stay where it is. If that's what you want....

Hi SB65, thanks for looking into this. I would like BACK to be anchored to the bottom of the browser so when I resize it moves up with the edge of the page. So in that respect, vertically it's already doing what I want it to do. I've set it to center because the container for the main page also does that, so basically I want the site to be centered, and the back button to be aligned to the left edge of the main container if that makes sense. This now only happens when the browser is smaller than the page. Similarly, if I remove the 20px left padding in backcontainer, it only stays aligned when the browser window is bigger than the site, but moves right to the edge of the browser window when it's smaller. I want to find a way so the BACK link always moves with the left edge of the page which isn't happening now. Does that make sense?

Ah right. The problem is with #backcontainer. You have:

#backcontainer {
margin: 0 auto;
padding: 0 0 0 20px;
position: relative;
width: 989px;
}

- total width 989px+20px left padding = 1009px. But #container, which you're trying to line up with has:

#container {
margin: 0 auto;
padding: 0 20px 20px;
position: relative;
width: 989px;
}

-total width 989px + 20px left padding and 20px right padding = 1029px. So they don't line up. Try:

#backcontainer {
margin: 0 auto;
padding: 0 20px;
position: relative;
width: 989px;
}

YESSS! (it worked). Thank you so much.

While you're looking at the site, do you think you might know what is causing this other problem? It's an issue that has only appeared with recent versions of firefox as it used to work fine on all browsers. I've described the issue here.

http://www.codingforums.com/showthread.php?t=223079

YESSS! (it worked). Thank you so much.

While you're looking at the site, do you think you might know what is causing this other problem? It's an issue that has only appeared with recent versions of firefox as it used to work fine on all browsers. I've described the issue here.

http://www.codingforums.com/showthread.php?t=223079