Different CSS behavior with Firefox and IE

[cfe_admin]

Now, the bolts at the four corners are absolutely positioned divs. What I'm trying to do is have the divs appear at the four corners (as far up and down as the viewer can scroll) of the mid-section. In IE this is working, but in Firefox it instead plops the bolts down in the four corners of the viewable area, so that the bottom two are scrolled right past when viewing more of the page...I hope some of this made sense, it'll help to take a look at the page with both browsers. I'm pretty new to this, any suggestions would be apprecaited. I used the style code below to create this effect:

.boltTopLeft {

background-image: url(http://www.example.com/cfeproducts/images/boltBG_left.jpg);

background-position: center top;

height: 36px;

width: 33px;

position: absolute;

left:50%;

margin-left:-418px;

top: 0px;

right: auto;

bottom: auto;

z-index: 1000;

}

.boltTopRight {

background-image: url(http://www.example.com/cfeproducts/images/boltBG_left.jpg);

background-position: center top;

height: 36px;

width: 33px;

position: absolute;

right:50%;

margin-right:-418px;

top: 0px;

left: auto;

bottom: auto;

z-index: 1000;

}

.boltBottomRight {

background-image: url(http://www.example.com/cfeproducts/images/boltBG_left.jpg);

background-position: center bottom;

height: 36px;

width: 33px;

position: absolute;

right:50%;

margin-right:-418px;

top: auto;

left: auto;

bottom: 0px;

z-index: 1000;

}

.boltBottomLeft {

background-image: url(http://www.example.com/cfeproducts/images/boltBG_left.jpg);

background-position: center bottom;

height: 36px;

width: 33px;

position: absolute;

left:50%;

margin-left:-418px;

top: auto;

right: auto;

bottom: 0px;

z-index: 1000;

}

[edited by: jatar_k at 5:09 pm (utc) on Oct. 2, 2006]
[edit reason] no urls thanks [/edit]

[icantthinkofone]

IE is wrong. Your image should be placed with relation to the body, in this case. So FF is correctly 'auto' placing it at bottom of the browser viewport.

[cfe_admin]

Heh, thought that may be the case, as I hate IE, but would there be a simple (correct) solution that will place the div's at the bottom of the page in both browsers? Thanks!

[cfe_admin]

Well, managed a make-shift fix by just throwing the bolts into the footer image...I'd rather like to know if this is possible through CSS, however, so any feedback is appreciated. Thx