michaelnorth
asked on
Difference in absolute positioning in Firefox vs. IE -- exactly double!
Hello,
I'm using CSS absolute positioning to place a media player on a page -- very simple, there's nothing else on the page to interfere. Here's the CSS:
.position {
position: absolute;
left: 222px;
top: 18px;
}
Everything is fine in IE7, but in Firefox, the player is positioned exactly DOUBLE those dimensions, that is, offset is 444 x 36 pixels.
See this URL if you like: http://www.alta-publishing.com/playerdemo/drums.php
Anyone know how to fix this?
I'm using CSS absolute positioning to place a media player on a page -- very simple, there's nothing else on the page to interfere. Here's the CSS:
.position {
position: absolute;
left: 222px;
top: 18px;
}
Everything is fine in IE7, but in Firefox, the player is positioned exactly DOUBLE those dimensions, that is, offset is 444 x 36 pixels.
See this URL if you like: http://www.alta-publishing.com/playerdemo/drums.php
Anyone know how to fix this?
ASKER
I found a solution, or maybe it's a work-around, not sure.
Instead of "absolute" positioning, I used "fixed", which I didn't realize was an option. The "fixed" option in Dreamweaver displays the player in the correct position with both FF and IE7 browsers.
.position {
position: fixed;
left: 222px;
top: 18px;
}
Page: http://www.alta-publishing.com/playerdemo/drums.php
Instead of "absolute" positioning, I used "fixed", which I didn't realize was an option. The "fixed" option in Dreamweaver displays the player in the correct position with both FF and IE7 browsers.
.position {
position: fixed;
left: 222px;
top: 18px;
}
Page: http://www.alta-publishing.com/playerdemo/drums.php
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Mreuring,
Where would I find swfobject.js? Is that part of Flash CS3?
You are correct, the embedding code came from Dreamweaver's default behavior which prompts you to wrap the flash generated by Wimpy Player: http://www.wimpyplayer.com/
I have a related question if you don't mind . . .
Wimpy works pretty well for me, but it's very limited graphically, for example, the buttons may not "fit" a given page design.
Is Flash CS3 the best / generic answer to gain more customization?
I'm really not a codehead, more of a business guy who dabbles (great, huh?), but something a little more tweakable than Wimpy would be welcome as long as it's not super-technical. I've used DW since the early days, but have kept things pretty simple. I'm very familiar with digital audio and Photoshop. Any suggestions would be welcome.
Where would I find swfobject.js? Is that part of Flash CS3?
You are correct, the embedding code came from Dreamweaver's default behavior which prompts you to wrap the flash generated by Wimpy Player: http://www.wimpyplayer.com/
I have a related question if you don't mind . . .
Wimpy works pretty well for me, but it's very limited graphically, for example, the buttons may not "fit" a given page design.
Is Flash CS3 the best / generic answer to gain more customization?
I'm really not a codehead, more of a business guy who dabbles (great, huh?), but something a little more tweakable than Wimpy would be welcome as long as it's not super-technical. I've used DW since the early days, but have kept things pretty simple. I'm very familiar with digital audio and Photoshop. Any suggestions would be welcome.
michaelnorth,
No, you won't find swfobject at Adobe's. It's an opensource/comunity project build by developers who actually use flash in the real world: http://blog.deconcept.com/swfobject/ This is not a DreamWeaver plugin or something along those lines. But then again, it's not extremely difficult to implement either, most of the information should be available from the website.
Most offical flash-solutions are short-sighted and because the web changes pretty fast you can bet they'll certainly become obsolete at quite a rapid speed as well. I realise dreamweaver needed something in-build to embed flash in a cross-browser way, but it's old code stemming from the days when Netscape 4 was still an active player in the browser-wars...
I don't know that much about coding / designing flash-projects, so I'm likely not the best to answer you on these. From what I can see Wimpy is a verry handy project for someone who doesn't want to learn flash but likes to gain it's flexibility in displaying 'new media'. Since it's build on flash, anything wimpy can, you can code yourself in flash cs3. However, it does require some extra knowledge...
No, you won't find swfobject at Adobe's. It's an opensource/comunity project build by developers who actually use flash in the real world: http://blog.deconcept.com/swfobject/ This is not a DreamWeaver plugin or something along those lines. But then again, it's not extremely difficult to implement either, most of the information should be available from the website.
Most offical flash-solutions are short-sighted and because the web changes pretty fast you can bet they'll certainly become obsolete at quite a rapid speed as well. I realise dreamweaver needed something in-build to embed flash in a cross-browser way, but it's old code stemming from the days when Netscape 4 was still an active player in the browser-wars...
I don't know that much about coding / designing flash-projects, so I'm likely not the best to answer you on these. From what I can see Wimpy is a verry handy project for someone who doesn't want to learn flash but likes to gain it's flexibility in displaying 'new media'. Since it's build on flash, anything wimpy can, you can code yourself in flash cs3. However, it does require some extra knowledge...
I had a sudden realisation in that I seem to be pushing you towards a solution that, although much better and probably more future proof, is not the fastest way to solve your current issues. Seeying as your skills ly more with the actual music and less with the coding of a web-page it may be somewhat unfair to not let you know the easy way to resolve your current issue.
The quick and easy way to solve your issues would be in making your css-selector more specific:
object.position {
position: absolute;
left: 221px;
top: 37px;
}
By simply targetting only the object you'd resolve your problems just as well, perhaps even better.
The quick and easy way to solve your issues would be in making your css-selector more specific:
object.position {
position: absolute;
left: 221px;
top: 37px;
}
By simply targetting only the object you'd resolve your problems just as well, perhaps even better.
ASKER
mreuring,
Thanks for all the tips, I appreciate it. Over time, I'll probably end up buying Flash CS3 and meanwhile, look into swfobject.
Thanks for all the tips, I appreciate it. Over time, I'll probably end up buying Flash CS3 and meanwhile, look into swfobject.
I'm glad to have been of help, I hope I wasn't too evangelistic and wish you the best of luck and above all, fun :)
http://www.quirksmode.org/js/findpos.html
Unfortunately, I don't have a suggestion for you on how to fix the problem. Have you tried using something other than CSS? Even using html tables, might give you better control in your particular situation.