Forum Moderators: open

Message Too Old, No Replies

Different CSS behavior with Firefox and IE

         

cfe_admin

4:14 pm on Oct 2, 2006 (gmt 0)

10+ Year Member



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

4:22 pm on Oct 2, 2006 (gmt 0)

10+ Year Member



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

5:09 pm on Oct 2, 2006 (gmt 0)

10+ Year Member



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

7:08 pm on Oct 2, 2006 (gmt 0)

10+ Year Member



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