Forum Moderators: open
I'm trying to place a DIV with an image inside it over an SWF using position: absolute. The image needs to be in a specific place on the page over the SWF so the only way I could think of is to use position: absolute. In I.E 7.0 its positioned where I want it to be, but in Firefox, Chrome its in a different place, here is the code I'm using;
<div style="position:absolute; left:260; top:95; bottom:200; height:70; background-color:#4E4E4E;"><img src="../ext_logo_bg_2.jpg"></div>
Is there any other way I could place the image over the SWF that works consistently in all browsers?
Many thanks for any advice.
In any case, it matters a lot whether each browser is using the same padding and margins for all the elements on your page. If you haven't explicitly declared them, this can introduce positioning shifts. In addition, if there is text involved in creating the position of the SWF block (such as a preceding paragraph) then IE will often be quite different in the way that the characters in the font are laid out.
Give all that, I suspect it is not the actual pixel position of your image div that is different across various browsers, but rather the position of the rest of the elements that appear "under" it. So I'd suggest:
1. Use a strict DTD and standards mode
2. Set margin and padding to 0 for all elements as a first rule in the CSS
3. Explicitly declare margins and/or padding for the elements that need to be non-zero
4. Never depend on text lines to be rendered at exactly the same width and height cross-browser
[edited by: tedster at 5:20 am (utc) on May 29, 2009]
left:260px; top:95px; bottom:200px; height:70px;
oh and add the wmode="transparent" to th embed tag
[edited by: tedster at 7:38 am (utc) on May 29, 2009]
[edit reason] no promotional links, please [/edit]
