What is IE5 fudge

Discussion in 'HTML' started by VUNETdotUS, Nov 9, 2007.

  1. VUNETdotUS

    VUNETdotUS Guest

    Can anyone explain what IE 5 fudge from CSS below is? Why width? What
    about height?

    #right {
    position: absolute;
    top: 0px;
    right: 0px; /* Opera5.02 will show a space at right swhen there is no
    scroll bar */
    margin: 20px;
    padding: 10px;
    border: 5px solid #ccc;
    background: #666;
    width: 150px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 120px;
    }
    html>body #right {
    width: 120px; /* ie5win fudge ends */
    }
     
    VUNETdotUS, Nov 9, 2007
    #1
    1. Advertising

  2. VUNETdotUS wrote:
    > Can anyone explain what IE 5 fudge from CSS below is? Why width? What
    > about height?



    No idea 'cuz...

    >
    > #right {
    > position: absolute;
    > top: 0px;
    > right: 0px; /* Opera5.02 will show a space at right swhen there is no
    > scroll bar */


    what's a "scroll bar"? Invalid type selector

    > margin: 20px;
    > padding: 10px;
    > border: 5px solid #ccc;
    > background: #666;
    > width: 150px; /* ie5win fudge begins */
    > voice-family: "\"}\"";
    > voice-family:inherit;
    > width: 120px;
    > }
    > html>body #right {


    and what would this do for IE5? I think IE doesn't recognize child
    selectors until version 7!

    > width: 120px; /* ie5win fudge ends */
    > }
    >



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 9, 2007
    #2
    1. Advertising

  3. VUNETdotUS

    VUNETdotUS Guest

    On Nov 9, 11:29 am, "Jonathan N. Little" <>
    wrote:
    > VUNETdotUS wrote:
    > > Can anyone explain what IE 5 fudge from CSS below is? Why width? What
    > > about height?

    >
    > No idea 'cuz...


    This is the part that fixes width/height in IE5 but I though someone
    who is familiar with it can explain:
    See what I found: http://www.tantek.com/CSS/Examples/boxmodelhack.html

    width: 150px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 120px;
    }
    html>body #right {
    width: 120px; /* ie5win fudge ends */
    }
     
    VUNETdotUS, Nov 9, 2007
    #3
  4. VUNETdotUS

    Els Guest

    VUNETdotUS wrote:

    > Can anyone explain what IE 5 fudge from CSS below is? Why width? What
    > about height?


    sure :)

    > #right {
    > position: absolute;
    > top: 0px;
    > right: 0px; /* Opera5.02 will show a space at right swhen there is no
    > scroll bar */
    > margin: 20px;
    > padding: 10px;
    > border: 5px solid #ccc;
    > background: #666;
    > width: 150px; /* ie5win fudge begins */
    > voice-family: "\"}\"";
    > voice-family:inherit;
    > width: 120px;
    > }
    > html>body #right {
    > width: 120px; /* ie5win fudge ends */
    > }


    IE5 uses a different box model than current browsers in standards
    mode: where up-to-date browsers will calculate the border and padding
    to be added to the width of an element, IE5 takes them off.
    So, for IE7/Firefox, the padding of 10px left and right, plus the
    borders of 5px each, will total 30px to be added to the 'usable' width
    of the element (120px), and display it as a total of 150px wide.
    IE5, needs to see width:150px, and it will then take the padding and
    border width off, and also leave 120px for the content.

    The fudge is where IE5 can't read it anymore. So, IE5 only sees
    'width:150px', and uses that style. It then stops reading till after
    where the fudge ends.

    Other browsers will not be fooled by the fudge, and see width:120px;,
    which is what they should use, so everybody's happy.

    Then there is the 'make Opera 5 happy rule', see the article you just
    linked to in your reply to Jonathan.

    For more combinations of hacks for different versions of different
    browsers:
    http://centricle.com/ref/css/filters/


    --
    Els http://locusmeus.com/
     
    Els, Nov 9, 2007
    #4
  5. VUNETdotUS

    VUNETdotUS Guest

    On Nov 9, 11:47 am, Els <> wrote:
    > VUNETdotUS wrote:
    > > Can anyone explain what IE 5 fudge from CSS below is? Why width? What
    > > about height?

    >
    > sure :)
    >
    >
    >
    > > #right {
    > > position: absolute;
    > > top: 0px;
    > > right: 0px; /* Opera5.02 will show a space at right swhen there is no
    > > scroll bar */
    > > margin: 20px;
    > > padding: 10px;
    > > border: 5px solid #ccc;
    > > background: #666;
    > > width: 150px; /* ie5win fudge begins */
    > > voice-family: "\"}\"";
    > > voice-family:inherit;
    > > width: 120px;
    > > }
    > > html>body #right {
    > > width: 120px; /* ie5win fudge ends */
    > > }

    >
    > IE5 uses a different box model than current browsers in standards
    > mode: where up-to-date browsers will calculate the border and padding
    > to be added to the width of an element, IE5 takes them off.
    > So, for IE7/Firefox, the padding of 10px left and right, plus the
    > borders of 5px each, will total 30px to be added to the 'usable' width
    > of the element (120px), and display it as a total of 150px wide.
    > IE5, needs to see width:150px, and it will then take the padding and
    > border width off, and also leave 120px for the content.
    >
    > The fudge is where IE5 can't read it anymore. So, IE5 only sees
    > 'width:150px', and uses that style. It then stops reading till after
    > where the fudge ends.
    >
    > Other browsers will not be fooled by the fudge, and see width:120px;,
    > which is what they should use, so everybody's happy.
    >
    > Then there is the 'make Opera 5 happy rule', see the article you just
    > linked to in your reply to Jonathan.
    >
    > For more combinations of hacks for different versions of different
    > browsers:http://centricle.com/ref/css/filters/
    >
    > --
    > Els http://locusmeus.com/


    but if I use padding:0;margin:0; do I need that hack at all? And why
    IE5 needs 150px? Why not 160 for example? What is the rule of fudge
    hack?
     
    VUNETdotUS, Nov 9, 2007
    #5
  6. VUNETdotUS

    VUNETdotUS Guest

    On Nov 9, 12:11 pm, VUNETdotUS <> wrote:
    > On Nov 9, 11:47 am, Els <> wrote:
    >
    >
    >
    > > VUNETdotUS wrote:
    > > > Can anyone explain what IE 5 fudge from CSS below is? Why width? What
    > > > about height?

    >
    > > sure :)

    >
    > > > #right {
    > > > position: absolute;
    > > > top: 0px;
    > > > right: 0px; /* Opera5.02 will show a space at right swhen there is no
    > > > scroll bar */
    > > > margin: 20px;
    > > > padding: 10px;
    > > > border: 5px solid #ccc;
    > > > background: #666;
    > > > width: 150px; /* ie5win fudge begins */
    > > > voice-family: "\"}\"";
    > > > voice-family:inherit;
    > > > width: 120px;
    > > > }
    > > > html>body #right {
    > > > width: 120px; /* ie5win fudge ends */
    > > > }

    >
    > > IE5 uses a different box model than current browsers in standards
    > > mode: where up-to-date browsers will calculate the border and padding
    > > to be added to the width of an element, IE5 takes them off.
    > > So, for IE7/Firefox, the padding of 10px left and right, plus the
    > > borders of 5px each, will total 30px to be added to the 'usable' width
    > > of the element (120px), and display it as a total of 150px wide.
    > > IE5, needs to see width:150px, and it will then take the padding and
    > > border width off, and also leave 120px for the content.

    >
    > > The fudge is where IE5 can't read it anymore. So, IE5 only sees
    > > 'width:150px', and uses that style. It then stops reading till after
    > > where the fudge ends.

    >
    > > Other browsers will not be fooled by the fudge, and see width:120px;,
    > > which is what they should use, so everybody's happy.

    >
    > > Then there is the 'make Opera 5 happy rule', see the article you just
    > > linked to in your reply to Jonathan.

    >
    > > For more combinations of hacks for different versions of different
    > > browsers:http://centricle.com/ref/css/filters/

    >
    > > --
    > > Els http://locusmeus.com/

    >
    > but if I use padding:0;margin:0; do I need that hack at all? And why
    > IE5 needs 150px? Why not 160 for example? What is the rule of fudge
    > hack?


    Oh, I got it. 150 is width+margin+top. So, I do not need fudge hack if
    padding, margin are 0...
     
    VUNETdotUS, Nov 9, 2007
    #6
  7. VUNETdotUS wrote:
    > On Nov 9, 11:29 am, "Jonathan N. Little" <>
    > wrote:
    >> VUNETdotUS wrote:
    >>> Can anyone explain what IE 5 fudge from CSS below is? Why width? What
    >>> about height?

    >> No idea 'cuz...

    >
    > This is the part that fixes width/height in IE5 but I though someone
    > who is familiar with it can explain:
    > See what I found: http://www.tantek.com/CSS/Examples/boxmodelhack.html
    >
    > width: 150px; /* ie5win fudge begins */
    > voice-family: "\"}\"";
    > voice-family:inherit;
    > width: 120px;
    > }
    > html>body #right {
    > width: 120px; /* ie5win fudge ends */
    > }
    >


    I misread the code because of the "wrap" in the message. Hence the value
    in URL's over code snippets.

    Now I see that it is over-sizing a block for broken box model. But I
    would dump this hack because:

    1) If you don't trigger quirks mode IE6+ will correctly size the block

    2) Even Win98SE support IE6 so the percentage of folks using IE5x < 1%

    3) Hacks can come back to bite you when browsers can CSS support

    4) Can have side-effects on other rules

    5) Many times can adjust design so for the %0xx of folks that will see
    the bug it will not really impair the site!

    6) Can get carried a long with each new version of markup like a
    vestigial gene until the origin purpose is lost...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 9, 2007
    #7
  8. VUNETdotUS

    Els Guest

    VUNETdotUS wrote:

    >> but if I use padding:0;margin:0; do I need that hack at all? And why
    >> IE5 needs 150px? Why not 160 for example? What is the rule of fudge
    >> hack?

    >
    > Oh, I got it. 150 is width+margin+top. So, I do not need fudge hack if
    > padding, margin are 0...


    width+padding+border, not width+margin+top.

    And indeed, without padding or border, no hack needed.
    I usually work around it by setting padding/border only on elements
    without a width, and setting width on their parents but no
    padding/border.

    --
    Els http://locusmeus.com/
     
    Els, Nov 9, 2007
    #8
  9. VUNETdotUS

    VUNETdotUS Guest

    On Nov 9, 12:28 pm, Els <> wrote:
    > VUNETdotUS wrote:
    > >> but if I use padding:0;margin:0; do I need that hack at all? And why
    > >> IE5 needs 150px? Why not 160 for example? What is the rule of fudge
    > >> hack?

    >
    > > Oh, I got it. 150 is width+margin+top. So, I do not need fudge hack if
    > > padding, margin are 0...

    >
    > width+padding+border, not width+margin+top.
    >
    > And indeed, without padding or border, no hack needed.
    > I usually work around it by setting padding/border only on elements
    > without a width, and setting width on their parents but no
    > padding/border.
    >
    > --
    > Els http://locusmeus.com/


    right, width+padding+border. thanks for workaround hint.
     
    VUNETdotUS, Nov 9, 2007
    #9
  10. VUNETdotUS

    Bergamot Guest

    VUNETdotUS wrote:
    > Can anyone explain what IE 5 fudge from CSS below is?
    >
    > #right {
    > right: 0px; /* Opera5.02 will show a space at right


    I think you can stop right there. Anything that even mentions Opera 5 is
    too ancient to take seriously any more. Find a more modern example.

    > voice-family: "\"}\"";
    > voice-family:inherit;


    The infamous Tantek hack. Don't use it. I wouldn't even bother trying to
    get styling similar in IE 5.x anyway. As long as the page is usable,
    little differences in the visuals are completely acceptable.

    You can bet anybody still using browsers that old have long since
    discovered that a lot of sites look a little "off". They have learned to
    deal with it, so you don't have to.

    --
    Berg
     
    Bergamot, Nov 10, 2007
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Scott M.
    Replies:
    1
    Views:
    335
    ʹÃûÑï
    Nov 28, 2003
  2. Jon

    Show Page To IE5

    Jon, Jun 16, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    331
    Raterus
    Jun 16, 2004
  3. RJN
    Replies:
    0
    Views:
    455
  4. Tom
    Replies:
    0
    Views:
    1,038
  5. =?Utf-8?B?TWFyaw==?=

    THE MICROSOFT MASTER PAGES FUDGE

    =?Utf-8?B?TWFyaw==?=, Mar 6, 2007, in forum: ASP .Net
    Replies:
    7
    Views:
    430
    =?UTF-8?B?R8O2cmFuIEFuZGVyc3Nvbg==?=
    Mar 6, 2007
Loading...

Share This Page