IE7, IE8 CSS Hack
Most of you will find this post to be boring, but I'm hoping that a select few of you will think its the coolest thing since sliced bread. Now, I'm not sure if I'm the first to figure this out, but I did figure it out on my own. So if you have heard of this before don't jump down my throat. After all, what do I know? I'm not a scientist...
Yesterday I was working with a SPRY Accordion, which if you don't know is an AJAX script that comes with Adobe Dreamweaver. Here was my problem: I was using a DOCTYPE to tell IE to stop being quite so dumb and act a little bit more like a grown-up browser that is actually compliant with web standards. This allowed my Accordion to work in IE. However, it still didn't force IE7 to use the overflow style properly. Whenever I would use the accordion it would bring up a horizontal scroll bar half way down the page. It looked like I was using frames or something. Anyway, because of company policy I couldn't just turn the horizontal scroll bar off with overflow-y. I also couldn't just set it to visible because Mozilla Firefox and other browsers perform different actions than IE when you set the overflow style to visible.
I needed a way to tell IE7 and just IE7 what to do. The common IE hacks like !important and *HTML don't work in IE7 anymore because MS is just smart enough to remove all of the hacks that web designers use to fix the bugs in IE, but not smart enough to fix the bugs that we needed the hacks for in the first place. After hours of banging my head against the wall, I finally snapped a little bit and just started inserting random characters into my CSS until I found a way to fool IE7.
So here it is; If you put a forward slash just before a style it will prevent compliant browsers from reading the style but IE7 still reads it. Below is an example. If you look at this box in any browser other than IE it will appear red, but look at it in IE7....Bam! that box is green!
background-color: red;
height: 100px;
width: 100px;
}
#example {
/background-color: green;
}
I hope you all enjoy that little hack, I know I will.

OH YES!
Mr. Gerren, you are the man!
Maybe somebody else thought of this before you and maybe not. But who cares? I found it here.
Before finding your site, I was right at the point of snapping myself.
What a relief!
Thanks.
YOU ARE THE LEGEND..........THANKS A LOT....
I concur with Steve! After wrestling with trying to fix a Spry Menu bug for some time I came across yr post. Instant fix - thanks
Thank you so much. It works...That stopped me scratching my head.
It looks like ie6 is falling for this hack too, either that or my version of ieTester is messing things up :/
Thank you Mr. Gerren,
You saved my useless life..
I tried putting !important on my css and the problem still occurred. Then I tried your hack and see if it really works.. and thankfully it did.. This is the css code I have in my css file. hehehe
position: absolute;
/top: -305px !important;
top: -260px;
left: 678px;
margin: 0px 0px 0px 0px;
padding: 0;
border: 0;
Great read! thx
This blog looks great. Which blog script have you been using?
Update