Geeks With Blogs
Tim Huffam Dotting the I and crossing the T of I.T.

A couple of notes regarding absolute positioning in FF and IE...

Specifying position values:

  • IE allows you to omit the unit of measurement for Left and Top.  It assumes pixels eg:
        obj.style.Left = 10;
  • However FF requires that you specify the unit of measurement eg:
        obj.style.Left = "10px";

Using other elements parents to calculate your object's position:

The scenario might be you have a div that you want to position over or by another object - but that object has no position values.  In this case I use parent object values.

  • Don't use the IE specific property parentElement (this is not supported in other browsers) eg:
        obj.style.Left = otherObj.parentElement.offsetLeft + 10; 
    note in this example (that works in IE only) there is no unit of measurement.
  • Instead use the parentNode property (this works for both IE and FF) eg:
        obj.style.left = (otherObj.parentNode.offsetLeft + 10) + "px";

HTH
Tim

Posted on Saturday, September 6, 2008 9:57 AM ASP.NET , PHP (incl PhpMyAdmin) , Web Development, JavaScript & CSS | Back to top


Comments on this post: CSS Absolute positioning in Firefox and IE

# re: CSS Absolute positioning in Firefox and IE
Requesting Gravatar...
Have to say this, but I learned the 'firefox needs units' trick the hard-way. Spent about 2-3 days on such a simple omission.

Moved to jQuery and life seems good ;)

Left by Syam on Sep 11, 2008 5:05 PM

# re: CSS Absolute positioning in Firefox and IE
Requesting Gravatar...
Hi Tim,

Lots of interesting stuff on your site and helpful too. Thanks for your work!

I think this post might be just what I need to fix a problem I'm having where for the first time ever I want FF to behave like IE!

Only problem is I don't know how or where to implement this type of code. I'm assuming it doesn't go in the CSS style sheet as I haven't seen this type of code in there before. Also I assume references like obj, otherObj and parentNode are placeholders for ones own div names etc?

I'm very much still learning in case you haven't guessed ;) so I apologize if these are stupid questions. Any further help most appreciated.

Best,

P.
Left by purpleyez on Nov 06, 2008 11:58 PM

# re: CSS Absolute positioning in Firefox and IE
Requesting Gravatar...
try !important property
Left by ff on Sep 08, 2009 12:28 AM

# re: CSS Absolute positioning in Firefox and IE
Requesting Gravatar...
hai iam a web developer. i try to use css. but aligning was not comapatible for both browser. how can i rectify it? pls reply me

thanks
Left by praveen on Sep 30, 2010 8:58 PM

# re: CSS Absolute positioning in Firefox and IE
Requesting Gravatar...
Thanks a lot for this.
Left by Dannielle on Dec 23, 2010 4:20 AM

# re: CSS Absolute positioning in Firefox and IE
Requesting Gravatar...
I tell you, ever since i got into blog development, I can't believe how tricky some things are that you would reckon should be straightforward.

I find w3schools to be an excellent resource though.
Left by How Much Is Silver Worth on Aug 07, 2011 7:20 AM

# re: CSS Absolute positioning in Firefox and IE
Requesting Gravatar...
I'm usually error css code on IE,I will use it for my website thank author
Left by giay nam on Dec 19, 2012 10:11 AM

Your comment:
 (will show your gravatar)


Copyright © Tim Huffam | Powered by: GeeksWithBlogs.net