CODEWITHSUNDEEP
css
Daimonan
Daimonan

Reputation:

In-line CSS IE hack

Is it possible to create, for instance, a box model hack while using in-line CSS?

For example:

<div id="blah" style="padding: 5px; margin: 5px; width: 30px; /*IE5-6 Equivalent here*/">

Thanks!

Upvotes: 6

Views: 41681

Answers (7)

Gabriel Hurley
Gabriel Hurley

Reputation: 40052

The best solution is to work in Standards Mode rather than Quirks Mode.... that'll eliminate the need for the majority of your box model hacks right away.

Beyond that, conditional comments with an IE-specific stylesheet are far cleaner and more maintainable. That method has been good enough for most every top-notch designer for the last several years... unless there's something specific about your site that requires it all to be inline I suggest taking a step back and looking at the root problems instead of how you can patch these little symptoms as they appear.alt text http://sonicloft.net/im/52

Upvotes: 0

John Dunagan
John Dunagan

Reputation: 1465

I'd go outside - slap a class on that element, or use the ID you have, and handle the styling externally.

I'd also concur with the conditional comments answers preceding mine.

That said: As an absolute last resort, you can use the following style hacks to target <= IE6, and even IE7. The trouble comes when/if they fix IE8 to defeat your hack.

.foo {
padding: 5px;
^padding: 4px; /* this targets all IE, including 7. It must go first, or it overrides the following hack */
_padding: 3px; /* this targets >= IE6 */
width: 30px;
}

Good luck.

Upvotes: 10

Paul M
Paul M

Reputation: 4157

Yeah like everyone above, if you can avoid doing it inline do!! But if you really need to go inline then parser filters are probably your best bet, these are certain characters you can use on properties such as the underscore hack in ie6

print("code sample");

 style="position:relative;padding:5px; _position:absolute; _padding:10px;"

ie6 will still get the underscored styles, everyone else will just ignore them!

There is also using !important instead of underscore.

have a play around and see what happens, but again like above, try and avoid like the plague :)

Upvotes: 0

savetheclocktower
savetheclocktower

Reputation: 1473

Keep in mind that IE 6 needs the box model hack in quirks mode but not in standards mode. IE 5 and IE 5.5 need the BMH all the time.

So if you're in standards mode, you'll need to use something like the original voice-family hack (which targets IE 5.X and not IE 6). If you're in quirks mode, any old IE <= 6 hack will do.

(The content of your question suggests to me that your page renders in quirks mode.)

Upvotes: 0

Atanas Korchev
Atanas Korchev

Reputation: 30671

You can use the "prefixing" hack in inline styles as well:

<div style="*background:red"></div>

Just make sure you put the IE hacks at the end of the style attribute. However I second the opinion that inline styles should be avoided when possible. Conditional comments and a separate CSS file for Internet Explorer seem to be the best way to handle such issues.

Upvotes: 11

eyelidlessness
eyelidlessness

Reputation: 63519

The most appropriate answer is don't. (Edit: to be clear, I mean don't do it inline, I don't mean don't use CSS hacks.)

Edit: This doesn't work, IE ignores the conditional comment. Leaving the answer here to not be a bastard.

The next most appropriate answer is conditional comments:

<div id="blah" style="padding: 5px; margin: 5px; width: 30px; <!--[if lte IE 6]> ... <![endif]-->">

Upvotes: 0

alexp206
alexp206

Reputation: 1739

Without arguing for or against CSS hacks, personally if I needed to do something like that, I would prefer to use a conditional comment:

<!--[if lt IE 7]>
<style>
#blah {
padding: 5px;
margin: 5px;
width: 30px;
}
</style>
<![endif]-->

Upvotes: 3

Related Questions