WEBDOOD.COM

Tag: ie

IE CSS backslash 9 hack beats the star hack

by webdood on Aug.23, 2010, under CSS, Software Development

Most folks know about the so-called “star hack” for IE.

However, there are two other varieties of IE-only hacks that are perhaps a bit more useful.

All of these work, in some form or another for IE. I tested them all in various flavors to arrive at my favorite (sic).

You can set up a test harness yourself using this code to see for yourself.

<style type=text/css>
body {
background-color:red;
_background-color:blue;
*background-color:green;
background-color:yellow\9;
}
</style>

  • _ hack WORKS for: IE8 Quirks, IE7 Quirks, IE6
  • _ hack DOES NOT WORK for: IE8 IE8 Standards, IE8 IE7 Standards, IE7 IE7 Standards
  • * hack works for: IE8 Quirks, IE8 IE7 Standards, IE7 Quirks, IE7 IE7 Standards, IE6
  • * hack DOES NOT WORK for: IE8 IE8 Standards
  • \9 hack WORKS for: IE8 IE8 Standards, IE8 IE7 Standards, IE8 Quirks mode, IE7 Quirks, IE7 Standards (all varieties of IE8), IE6

So, in short, if you want an IE CSS hack that works in all flavors of IE, use the backslash-nine hack. That is, just put a \9 after *whatever* css value you are assigning.

Examples
width: 9px\9;
background-color:yellow\9;

etc.

Good luck. I feel this to be quite a discovery.

Shannon Norrell

Leave a Comment :, , , , more...

The dreaded “Line 0, Object Expected” Javascript error

by webdood on Sep.05, 2008, under IE-Specific, Javascript, Software Development

One of my favorite mechanisms to do IE-specific CSS is to use the so-called dynamic properties available to IE5+ browsers. Firefox and Opera ignore these tags, so if, for instance you need a div of id “foo” to be 110 pixels in IE and 100 pixels in all other browsers, you would just do this:

#foo {
  width: 100px;
  width: expression(’110px’);
}

Of course, there are easier ways of doing this in IE if you just need a fixed value to appear, using the so-called IE CSS hacks like the star harck *width:100px or _width:100px; will only be interpreted by Internet Explorer, but when you need a truly dynamic property that is based on changing conditions, using “expression” is a valid tactic.

I began to encounter a strange Line 0. Object Required Javascript bug and spent the better part of a day trying to track down the cause. The bug was so severe that, when hit, it required me to close IE using Task Manager. I could not figure this one out and finally resorted to reconstructing the entire page, line-by-line until I found the problem.

I finally determined it occurred only when I added a <textarea> tag to the page. My current project is a Ruby on Rails app, which necessarily indludes the Prototype Library, so I initially wrote off this weirdity to the vagaries of Prototype and its many tens of thousands of lines of code.

In this context, an input type=text tag would do fine, so I switched to that and moved on.

Quite by accident, I stumbled across this section in my CSS file:

.WordBubble textarea {
  overflow:hidden;
  border:solid 1px lightBlue;
  height:30px;
  width:expression(document.getElementById(‘WordBubble’).offsetWidth-66);
}

And WHALA, the answer!

Thinking to reuse a WordBalloon construct I had developed, I had modified this CSS to play off of .WordBubble the className vs the original #WordBubble the ID. Therefore, when I used the original:

<div id=”WordBubble” class=”WordBubble”>
<textarea>
</div>

things worked as expected.

However, when using:

<div id=”AnotherWordBubble” class=”WordBubble”>
<textarea>
</div>

The CSS, when evaluating the dynamic property, could not find “WordBubble” as it did not exist as an ID (see it’s now a className).

Although I realize this posting is somewhat confusing (I barely understand it myself), what I am trying to say is “When you get a Line 0, Object Expected” Javascript error and can’t figure out where it comes from, check your CSS for Expression use.

Shannon

Leave a Comment :, , more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Blogroll

A few highly recommended websites...

  • A List Apart
  • Dive into HTML5
  • Javascript: The Good Parts
  • QuirksMode.org