Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > What is IE5 fudge

Reply
Thread Tools

What is IE5 fudge

 
 
VUNETdotUS
Guest
Posts: n/a
 
      11-09-2007
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 */
}

 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      11-09-2007
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
 
Reply With Quote
 
 
 
 
VUNETdotUS
Guest
Posts: n/a
 
      11-09-2007
On Nov 9, 11:29 am, "Jonathan N. Little" <(E-Mail Removed)>
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 */
}

 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      11-09-2007
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/
 
Reply With Quote
 
VUNETdotUS
Guest
Posts: n/a
 
      11-09-2007
On Nov 9, 11:47 am, Els <(E-Mail Removed)> 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?

 
Reply With Quote
 
VUNETdotUS
Guest
Posts: n/a
 
      11-09-2007
On Nov 9, 12:11 pm, VUNETdotUS <(E-Mail Removed)> wrote:
> On Nov 9, 11:47 am, Els <(E-Mail Removed)> 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...

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      11-09-2007
VUNETdotUS wrote:
> On Nov 9, 11:29 am, "Jonathan N. Little" <(E-Mail Removed)>
> 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
 
Reply With Quote
 
Els
Guest
Posts: n/a
 
      11-09-2007
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/
 
Reply With Quote
 
VUNETdotUS
Guest
Posts: n/a
 
      11-09-2007
On Nov 9, 12:28 pm, Els <(E-Mail Removed)> 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.

 
Reply With Quote
 
Bergamot
Guest
Posts: n/a
 
      11-10-2007
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
THE MICROSOFT MASTER PAGES FUDGE =?Utf-8?B?TWFyaw==?= ASP .Net 7 03-06-2007 05:38 PM
Resize window not working in IE5.0 RJN ASP .Net 0 09-29-2004 04:15 PM
IE5 and IE5.5 css layout issues. Tom HTML 0 08-02-2004 11:58 AM
Show Page To IE5 Jon ASP .Net 1 06-16-2004 02:59 PM
Re: RequiredFieldValidator cannot used for IE5,cause wrong Scott M. ASP .Net 1 11-28-2003 04:46 AM



Advertisments