f1vlad.com

Today I found a cool css hack called StarHtmlHack. Interesting problem. Pretty much for normal browsers I needed to add left: 0pt and for Internet Explorer 5--6, I had to add right:0pt. Yes I know, problem seems weird, but for consistent look of the div on my page in this case, that has to be the definition in the style sheet.

First solution was to include separate .css via <!--[if ie]>foobar<![endif]-->.

But I didn't want to create yet another stylesheet. Wanted to get it done all in one file.

Second solution was to use html>div trick. That didn't work well because IE7 understands that correctly.

And finally third solution worked for today:

.article div.tagtitleclosed{/* all normal browsers */
left:0pt;
}
 
* html .article div.tagtitleclosed{/* IE6 */
right:0pt;
}
 
* html body .article div.tagtitleclosed{/* IE6 as well */
left:auto;
right:0pt;
}
 
*+html  .article div.tagtitleclosed{/* IE7 */
left:auto;
right:0pt;
}

The reason I say "for today" is because IE8 is on the horizon. Who knows how close today's IE8 beta to what IE8 final.