Suzee
05-05-2006, 03:52 PM
Hi all!
I need to position some divs very precisely over a background picture.
I am trying to use relative positioning, but I am getting problems with Firefox and IE.
Basically, if you create a small div with relative positioning from the top overlaying a background picture, then it is different for each browser. The entire point of using relative positioning is I need to precisely position a div from the top left corner of a background picture.
Create a new document and set some background picture in a div. Now, in the code, after the first div, add a second div with some text in it and a background color you can see easily.
Now shift the relative position of the second div up close to the top of the first. My first div is 660px high, so the code for mine looks like this,…
.plonk {position: relative; top: -640px; left: 20px; width:40px; height:20px; background-color:#606060; }
Now display the file in IE and Firefox and the relative position is quite different for both.
I need to position some divs very precisely over a background picture.
I am trying to use relative positioning, but I am getting problems with Firefox and IE.
Basically, if you create a small div with relative positioning from the top overlaying a background picture, then it is different for each browser. The entire point of using relative positioning is I need to precisely position a div from the top left corner of a background picture.
Create a new document and set some background picture in a div. Now, in the code, after the first div, add a second div with some text in it and a background color you can see easily.
Now shift the relative position of the second div up close to the top of the first. My first div is 660px high, so the code for mine looks like this,…
.plonk {position: relative; top: -640px; left: 20px; width:40px; height:20px; background-color:#606060; }
Now display the file in IE and Firefox and the relative position is quite different for both.