Home/ Questions/Q 7166193
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T14:22:26+00:00

I’ve stopped using CSS hacks for different browsers and instead favour the conditional comments

  • 0

I’ve stopped using CSS hacks for different browsers and instead favour the “conditional comments adding classes to html tag” approach.

Which brings me to my question. How would I write this ie8 hack without the hack?

.grab-cursor{cursor:move\0/;}

I’m looking to implement:

.ie8 .grab-cursor{–non hacked code here– ;}

(I never really understood css hacks so I’m glad not to have to use them now!)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    .grab-cursor{cursor:move;}

    You really don’t need any hack or comment here, it should work pretty well across all browsers (see http://www.quirksmode.org/css/cursor.html). What exactly is the issue you are trying to solve?

    EDIT

    To answer the general question of how to apply certain styles to certain versions of IE without hacks, if you use the conditional comment block

    <!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

    you have various possibilities.

    If you just want to fix a general Internet Explorer problem, you can use

     .oldie .grab-cursor {
     /*IE-tailored css styles without the hack*/
 }

    and you’re set. If you want to fix something just for, let’s say IE7, you can use

     .ie7 .grab-cursor {
     /*IE-tailored css styles without the hack*/
 }

    but the best way to fix certain problems would be to use modernizr ( http://www.modernizr.com/ ), so you can do stuff like

    /* style I'm currently using in production */
.cssgradients #main nav{
    background: linear-gradient(left, black, #e00, black);
}

.no-cssgradients nav{
    background: url(../img/nav-bg.png) center center repeat-y; /*image background as fallback */
}

    I would also recommend http://leaverou.github.com/prefixfree/, as it allows you to have 

    background: radial-gradient(center, ellipse cover, #000000 49%,#8f0222 49%,#6d0019 100%);

    instead of 

    background: #000000; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #000000 49%, #8f0222 49%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(49%,#000000), color-stop(49%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #000000 49%,#8f0222 49%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #000000 49%,#8f0222 49%,#6d0019 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #000000 49%,#8f0222 49%,#6d0019 100%); /* IE10+ */
background: radial-gradient(center, ellipse cover, #000000 49%,#8f0222 49%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    • 0