Tim Huffam

Dotting the I and crossing the T of I.T.

  Home  |   Contact  |   Syndication    |   Login
  129 Posts | 0 Stories | 874 Comments | 677 Trackbacks

News

Archives

Post Categories

Interesting Blogs/Links

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 06, 2008 9:57 AM

Feedback

# re: CSS Absolute positioning in Firefox and IE 9/11/2008 5:05 PM Syam
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 ;)



# re: CSS Absolute positioning in Firefox and IE 11/6/2008 11:58 PM purpleyez
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.

Post Feedback

Title:
Name:
Email: (never displayed)
Url:
Comments: 
Please add 4 and 6 and type the answer here: