Tim Huffam

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

  Home  |   Contact  |   Syndication    |   Login
  152 Posts | 0 Stories | 2306 Comments | 653 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

  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati
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.

# re: CSS Absolute positioning in Firefox and IE 9/8/2009 12:28 AM ff
try !important property

# re: CSS Absolute positioning in Firefox and IE 9/30/2010 8:58 PM praveen
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

# re: CSS Absolute positioning in Firefox and IE 12/23/2010 4:20 AM Dannielle
Thanks a lot for this.

# re: CSS Absolute positioning in Firefox and IE 8/7/2011 7:20 AM How Much Is Silver Worth
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.

Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification: