...

View Full Version : css Text hack for IE



chaser7016
12-24-2007, 11:56 PM
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

Apostropartheid
12-25-2007, 12:11 AM
Merry Christmas, chaser!
You could use conditional comments, but a link may help us, especially with the "image element" you speak of.

chaser7016
12-25-2007, 03:38 AM
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.


<!--[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 :)

Arbitrator
12-25-2007, 07:58 AM
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.



<!--[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.


<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.


<style type="text/css" media="all">
#about { font-size: 1.1em; =font-size: 0.9em; }
</style>


http://annevankesteren.nl/2007/02/ie7-css-hacks

abduraooft
12-25-2007, 08:00 AM
if NOT IE ?

<!--[if !IE]><!-->
<h1>You are NOT using Internet Explorer</h1>
<!--<![endif]-->
http://www.cssplay.co.uk/menu/conditional.html

Apostropartheid
12-25-2007, 01:43 PM
(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
<!--[if mso]><![endif]-->

Arbitrator
12-25-2007, 04:50 PM
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
<!--[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)?


http://msdn2.microsoft.com/en-us/library/ms537512.aspx

chaser7016
12-27-2007, 01:23 AM
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

Apostropartheid
12-27-2007, 04:42 PM
Yeah, see...maybe A List Apart (http://www.alistapart.com/articles/howtosizetextincss) will tell you why this perhaps isn't the best solution.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum