Internet Explorer 7.0 CSS Hack

I'm in need of inserting a Hack to a web page, so it works well on IE7.0 But I'm having issues with the way I'm doing things. It should be simple.

The actual CSS code is the following:

<style type="text/css">
body { margin:0;}
#home_splash { background-image:url(homeimages/image-background.jpg);background-repeat:repeat-x; background-position:left top;}
#home_splash #home_text { height:470px; padding-top:25px;padding-left:38px; }
#home_splash #home_text_1,
#home_splash #home_text_2 { display:none; }
#home_splash #home_text_1 { width:172px; height:58px; top:0px; left:70px; position:relative; background:inherit; background-position: -70px 0px; }
#home_splash #home_text_2 { width:212px; height:27px; top:460px; left:868px; position:relative; background:inherit; background-position: -868px -460px; }
#home_splash {background-color:#d1d1d9;margin-top:-15px; background-repeat:repeat;width:100%; }
#home_splash .picture { background-image: url(homeimage/image.jpg); width:960px; height:520px; display:block; margin-top:20px; margin-left :auto; margin-right:auto; }
#home_splash #boxes { margin-left:auto; margin-right:auto;padding-top:0px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#666; font-size:12px; font-weight:bold; height:190px; width:930px;}
#home_splash #boxes .box { width:33%; float:left; display:block;background-repeat:repeat-x;}
#home_splash #boxes h3 { font-size:23px; border-bottom: 1px solid #bcbcc4; color:#000033; margin:0; }
#home_splash #boxes h3,
#home_splash #boxes p {margin: 4px 25px; }
#home_splash #boxes p { line-height:160%; }
#home_splash #boxes .box_separator { border-right:1px solid #eee;}
ul#nav { width:100%; height:37px; margin:0px;display:block; background-color:#000; background-repeat:repeat-x; }
#开发者_如何学运维container {background-color:#d1d1d9; zoom:1; }
#content { margin:0; } 
.splash_text {width:885px; height:463px;}
</style>

I'd like to make ONE CHANGE in this CSS.

I'd like change the following line :

#home_splash .picture { background-image: url(homeimage/image.jpg); width:960px; height:520px; display:block; margin-top:20px; margin-left :auto; margin-right:auto; }

I want IE7.0 to remove the 'margin-top:20px;' property - but INLINE in this html file only

Conditional comments are exactly what you need. I'm assuming by "rmeove the margin-top: 20px' property, you mean set it to 0 (as there's really no other way to remove it). Here's the code:

<!--[if IE 7]><style type="text/css">#home_splash .picture { margin-top: 0; }</style<![endif]-->

Just stick that in your HTML file, below the CSS you already have, and you should be golden.

Since you're coding into an HTML file, by far the easiest option is conditional comments:

<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->

See http://www.quirksmode.org/css/condcom.html for more info.

If you want the hack in the same css as the other browsers:

    *+ html #home_splash .picture { background-image: url(homeimage/image.jpg);}

Look here: http://css-discuss.incutio.com/wiki/Star_Html_Hack