SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    top & bottom or left & right properties in IE

    Ok, so here is something back for the group for all the help I got (special thanks to Paul O'B).

    Over the past few weeks I have been racking my brains on one CSS fault of IE - you cannot specify BOTTOM property when you specified TOP, and similarly you cannot specify RIGHT once you specified LEFT. Given that in standard-compliant box model the padding is added on top of your width or height, you are effectively unable to style an object that takes up the full width and/or height of its parent EXCEPT for a gap on each side. This is only problematic in IE 6 and below, since in IE 7 as well as FF and other "well-behaved" browsers you can easily set top / bottom / left / right properties, and the browser then stretches the width / height accordingly.

    Because of this IE bug, I faced a problem - should I style in a quirks mode (where lot of probelms can be overcome by, well, the quirks) and then separately cater to compliant browsers, or should I do the right thing, style everything in a standards-compliant mode, and then plug the IE gap programmatically, using javascript.

    Since IE7 has fixed this bug and since standard-compliant styling is the right thing to do, I chose the second.

    So here is my javascript solution. The good thing is that it doesn't hijack any common events, so you can still continue to use your "onresize" or "onload" events in any way you like. Also, for the sake of speed I restricted this feautre to "DIV" objects with absolute positioning (since that's what you'd use most often for screen layout), but you can easily make it applicable to all objects (see comment in the script).

    Instructions for use:
    1. Download the script from http://erideon.net/fileshare/iefix.js
    2. Include following line into your <header> section
    Code:
    <script language="JavaScript" src="myDownloadFolder/iefix.js"></script>
    That's it. It's tested, but feel free to let me know if you spot anything weird.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting.

    Any plans to make a .htc file version of this?

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not that versed in .htc files as yet, but it may be something to look into (later ).

    Btw, I updated version 1.1 of the script - a little quirk with padding has been fixed.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •