SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    the text hack... why does this happen?

    hey all

    if i have

    Code:
    body, p, div, th, td, li, dd  {
       /* more specific to override rule in improrting sheet */
      font-size: x-small;
       /* false value for WinIE4/5 */
      voice-family: "\"}\""; 
      voice-family: inherit;
       /*recover from trick */
      font-size: small;
       /*intended value for better browsers*/
      }
     
    html>body, html>body div, html>body p, html>body th, 
    html>body td, html>body li, html>body dd	{
    	font-size:	x-small
    			 /* be nice to Opera */
    	}
    and i put my <div id="main">apply styles here</div>
    it works in IE & Op7 - not in Nets 7 or Mozilla

    if i create a

    Code:
    /* CONTNT ELEMENTS --- */
     
    .contnt p, div, th, td, li, dd  {
       /* more specific to override rule in improrting sheet */
      font-size: x-small;
       /* false value for WinIE4/5 */
      voice-family: "\"}\""; 
      voice-family: inherit;
       /*recover from trick */
      font-size: small;
       /*intended value for better browsers*/
      }
    and wrap a <div id="main"><span class="contnt">apply styles here</span></div>

    then it work in Netscape 7, Mozilla and EI but i odn't know how to rewrite the code for opera. - anyone?

    i understand the difference betweent he 2 codes styles (i think) but i don't see how they might differ - it seems like they are identical jsut defined in different ways no?

    thanks in advance

  2. #2
    SitePoint Zealot ComputerBob's Avatar
    Join Date
    Jul 2003
    Location
    USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know if this will solve your problem, but it looks like you're missing an ; after "x-small" in the html> section of your first example.
    ComputerBob - Making Geek-Speak Chic™
    http://www.computerbob.com
    - XHTML 1.0 Strict + CSS Layout
    Ratings | Forums | Software | Polls | Weird | Quotes | Weather
    Guest Articles | Free Greeting Cards | CB Awards | Search

  3. #3
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no it doesn't
    i am still curious what is the difference between the first way of writing the code and the second one.?

  4. #4
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok so to re-write the opera styles i figured it out

    Code:
    html>body .contnt p, html>body .contnt div, html>body .contnt th, 
    html>body .contnt td, html>body .contnt li,html>body .contnt dd  {
      font-size: x-small;
      }
    but i still don't understand the difference between creating a class and just applying the properties to an html element (or however you might describe the first option)

  5. #5
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of using the complicated text hack, why not define the base font size as a percentage using:
    Code:
    body { font-size: 90% } /* set this to the value you want as your base font size */
    and then define the font-size for all other sections using ems, e.g.
    Code:
    .contnt p, div, th, td, li, dd { font-size: 1em }
    Andy.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com

  6. #6
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tygger2512
    Instead of using the complicated text hack, why not define the base font size as a percentage using:
    Code:
    body { font-size: 90% } /* set this to the value you want as your base font size */
    and then define the font-size for all other sections using ems, e.g.
    Code:
    .contnt p, div, th, td, li, dd { font-size: 1em }
    Andy.
    because if the user already has their default font size set smaller than usual making it 90% could make it un-readable.

    your solution is viable, but not without its own risks

  7. #7
    SitePoint Zealot Tygger2512's Avatar
    Join Date
    Jul 2003
    Location
    Pittsburg, KS
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pissant
    because if the user already has their default font size set smaller than usual making it 90% could make it un-readable.

    your solution is viable, but not without its own risks
    True, but there is no perfect solution. As web page designers we cannot mandate how things will look on people's browsers (no matter how hard we try!) - given that there is no perfect solution, I choose the most elegant, which does not rely on a hack that may no longer work in future versions of a browser. What happens when IE starts interpreting voice-family correctly? All the sites that use voice-family hacks will have to find another solution (unless IE finally comes in to line with the rest of the world on default font-sizes and box model interpretations).

    Andy.
    Learn the Emotional Freedom Technique at www.as-if-by-magic.com

  8. #8
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tygger2512
    True, but there is no perfect solution. As web page designers we cannot mandate how things will look on people's browsers (no matter how hard we try!) - given that there is no perfect solution, I choose the most elegant, which does not rely on a hack that may no longer work in future versions of a browser. What happens when IE starts interpreting voice-family correctly? All the sites that use voice-family hacks will have to find another solution (unless IE finally comes in to line with the rest of the world on default font-sizes and box model interpretations).

    Andy.
    actually the beauty of the tantek hack is that it is future compatible, since it is not really a hack but is valid css which is just not understood by the 5.x series of ie/win...
    But you do make a good point about hacks, one has to be very careful when using them... and think about all the possible consequences

  9. #9
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tygger2512
    Instead of using the complicated text hack, why not define the base font size as a percentage using:
    Code:
    body { font-size: 90% } /* set this to the value you want as your base font size */
    and then define the font-size for all other sections using ems, e.g.
    Code:
    .contnt p, div, th, td, li, dd { font-size: 1em }
    Andy.
    actually that works quite nicely!
    thank you


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
  •