• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3024
  • Last Modified:

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?
0
michaelnorth
Asked:
michaelnorth
  • 4
  • 3
1 Solution
 
sah18Commented:
The problem you are having is a well-known one, in that each browser handles many of the css codes differently.  The following page discusses positioning issues in different browsers, and their inconsistencies:
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.
0
 
michaelnorthAuthor Commented:
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
0
 
mreuringCommented:
Hmmm, you have an object with class=position and inside it an embed tag with class=position

IE doesn't use embeds, FF ignore the object tags' flash content and uses the embed.

Since now IE only shows the object tag, it's position is correct. FF however has both elements and since they share the classname it will give both position:absolute and the embed with be position in relation to the object, effectively doubling your dimension...

The best way to solve this would be using swfobject.js instead of macromedia's (or adobe's nowadays) ultimately crappy piece of code to embed flash.
The fast way to solve this would be by altering your style rule to be object.position so that it only positions the object tag...

And yes, position fixed is a work-around, altough an effective one since your page doesn't scroll :)
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
michaelnorthAuthor Commented:
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.
0
 
mreuringCommented:
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...

0
 
mreuringCommented:
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.
0
 
michaelnorthAuthor Commented:
mreuring,

Thanks for all the tips, I appreciate it. Over time, I'll probably end up buying Flash CS3 and meanwhile, look into swfobject.
0
 
mreuringCommented:
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 :)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now