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 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2006
    Posts
    64
    Thanks
    5
    Thanked 0 Times in 0 Posts

    css Text hack for IE

    Hi

    I am using em as a measurement for text on my site. At 96 DPI (which majority use) in both FF and IE, everything looks cool.

    When I raise the DPI to 120 still looks good in FF, but in IE the wording extends out of the image element.

    Is there a hack i could add in the css or html that says when FF send this size em and when browser is IE send this smaller sized em?

    Thanks,
    Chaser

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Merry Christmas, chaser!
    You could use conditional comments, but a link may help us, especially with the "image element" you speak of.

  • #3
    New Coder
    Join Date
    Mar 2006
    Posts
    64
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hi Cyan

    Merry Christmas to you!

    I looked up conditional comments and then try to implement it within my html, as seen with the below code.
    Code:
    <!--[if IE ]>
    <span id="about" style="font-size: .9em;">Text here text here<br />text here text here text here<br />text here text here text here</span>
    <![endif]-->
    
    
       <span id="about" style="font-size: 1.1em;">Text here text here<br />text here text here text here<br />text here text here text here</span>
    Im trying to display a lower sized text when IE and when not IE display the second statement. When I view this in Firefox, it skips the IE code accordingly. When I view this code in IE ... IE is displaying both lines of text and they are overlapping.

    How do I get IE to only display the .9em text and not display the same sentence in 1.1em also?

    thanks for your help!

    P.S. Im working on a project for my friend which is not public yet

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by chaser7016 View Post
    How do I get IE to only display the .9em text and not display the same sentence in 1.1em also?
    You can use modified versions of so‐called “down‐level revealed” conditional comments to hide information from Internet Explorer and reveal it to other browsers (it exploits a bug in IE’s handling of SGML comment syntax). Below is a revision of your provided code that uses this technique.

    Code:
    <!--[if IE ]>
    <span id="about" style="font-size: .9em;">Text here text here<br />text here text here text here<br />text here text here text here</span>
    <![endif]-->
    
    <!--[if !IE]>-->
       <span id="about" style="font-size: 1.1em;">Text here text here<br />text here text here text here<br />text here text here text here</span>
    <!--<![endif]-->
    However, there are at least two more practical methods. The first would be to use a conditional comment to hide a style element (or to hide a style sheet called in another way). Below is an example.

    Code:
    <style type="text/css" media="all">
    	#about { font-size: 1.1em; }
    </style>
    
    <!--[if IE]>
    	<style type="text/css" media="all">
    		#about { font-size: 0.9em; }
    	</style>
    <![endif]-->
    The second method would be to use CSS exploits [1] that exploit Internet Explorer bugs and play on more compliant browsers’ error handling mechanisms. Below is an example.

    Code:
    <style type="text/css" media="all">
    	#about { font-size: 1.1em; =font-size: 0.9em; }
    </style>
    1. http://annevankesteren.nl/2007/02/ie7-css-hacks
    Last edited by Arbitrator; 12-25-2007 at 08:05 AM. Reason: I removed a stray vB code tag.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    if NOT IE ?
    Code:
    <!--[if !IE]><!-->
    <h1>You are NOT using Internet Explorer</h1>
    <!--<![endif]-->
    http://www.cssplay.co.uk/menu/conditional.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    (it exploits a bug in IE’s handling of SGML comment syntax).
    No it doesn't. It was intentionally put in, which is why a lot of us use it, as it isn't...well, a bug. MS implements it in stuff like Microsoft Office, too
    Code:
    <!--[if mso]><![endif]-->

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by CyanLight View Post
    No it doesn't. It was intentionally put in, which is why a lot of us use it, as it isn't...well, a bug. MS implements it in stuff like Microsoft Office, too
    Code:
    <!--[if mso]><![endif]-->
    Perhaps my statement lacked accuracy; it may have been safer to use the term “flaw” or phrase “incorrect/deviant implementation” instead of the term “bug”. You can argue that Microsoft intentionally chose not to support SGML‐based comment syntax when they first implemented HTML commenting in Internet Explorer such that this would not be a “bug”; I don’t have hard evidence one way or the other. Additionally, you can assume that that they intend or intended to never implement them subsequent to implementation and that this is not a “bug”; again, I lack the hard evidence to tell either way (though there’s the obvious compatibility problem now that CC use is established).

    Nevertheless, conditional comments are workable because Internet Explorer doesn’t handle SGML commenting correctly.

    Ever tried X<!-->Y<!-->Z? Internet Explorer sees two comments instead of one and incorrectly renders “XYZ” instead of “XZ”. (Notice how you don’t even need the [if IE] and [!endif] code in there for Internet Explorer to behave as if the code included a conditional comment; was this intentional?) Microsoft’s own conditional commenting design exploits the flaw. Of course, if this is not a bug or flaw, perhaps I should have said “correctly renders ‘XYZ’”.

    Now consider downlevel‐revealed conditional comments (which is primarily relevant since this is what I was referring to). Microsoft’s by‐design syntax [1] is <![if expression]>HTML<![endif]>. This means malformed HTML. Again, you end up exploiting bugs (err flaws) in Internet Explorer’s SGML commenting mechanism by adjusting the delimiters such that the original code is rewritten as <!--[if expression]>-->HTML<!--<![endif]--> and the code ends up being well‐formed. Was this redesign/exploit of downlevel‐revealed CCs and correct SGML commenting mechanisms intentional (by Microsoft)?

    1. http://msdn2.microsoft.com/en-us/library/ms537512.aspx
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    New Coder
    Join Date
    Mar 2006
    Posts
    64
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I fixed my problem and thought it best to detail it for others in the future when they Google, as I did, but came up empty.

    I first used font-size: 12pt, then read via a Google search to use em, but that didn't help - the text in IE with DPI 120 still bled outside of background image element.

    The solution I used was to use px for my font size property! Doing this now in all resolutions and or DPI settings the font size stays the same!

    Cheers,
    Ryan

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Yeah, see...maybe A List Apart will tell you why this perhaps isn't the best solution.


  •  

    Posting Permissions

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