Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2004
    Location
    Guadalajara, Mexico
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    what does this means

    I've seen this in some websites, specially in css examples and tutorials websites, but none of them actually explains it (or at least I havent seen any), they just put it there and I dont understand it.

    Here it is:
    Code:
    #content {
    	padding: 160px 50px 40px 50px;
    	margin-top: 30px;
    	margin-bottom: 0px;
    	margin-right: auto;
    	margin-left: auto; 	
    	border: 1px solid #ccc;
    	text-align:left; 
    	width: 600px; /* ie5win fudge begins */
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width: 498px;
    	}
    html>body #content {
    	width: 498px; /* ie5win fudge ends */
    	}
    Could someone please explain the commented part about the "ie5win fudge"? whats is that? and how exactly does it works (if I wanted to use it) ?

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    IE5 interprets the line:

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

    As a '}', which in CSS defines the end of a ruleset. Since browsers after it interpret it as merely a quoted string containing a }, it's ignored.

    Therefore, you can put IE5-specific code before that line, and then you can put the >IE5 code after that line, thus letting you correct for IE5's box model problem.

    It says:

    Tell IE5 that the width is 600px, then tell everything else that the width is 498px.

    The last bit, with html>body, tells older opera versions to use 498px too, as it doesn't suffer from the box-model bug, but DOES have the quoted brace bug.

    Clear as mud? Heh.

    Edit: Here's a better explanation: http://tantek.com/CSS/Examples/boxmodelhack.html

  • #3
    New Coder
    Join Date
    Sep 2004
    Location
    Guadalajara, Mexico
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks

    btw, I prefer your explanation better, shorter but enough for me considering how tired I am of reading tons of css tutorials and examples the past couple od days

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    personally i prefer this much less ugly version:
    Code:
    <selector>           
    {
      /* specify borders and paddings if any */
    	
      width: <content width> !important; 
      width /**/:<content width + paddings + borders>;
    	
      /* other declarations may appear anywhere in this rule */
    }
    more info can be found here: http://www.info.com.ph/~etan/w3pantheon/style/abmh.html
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #5
    New Coder
    Join Date
    Sep 2004
    Location
    Guadalajara, Mexico
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, this second site explains it better than the other one


  •  

    Posting Permissions

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