Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2008
    Location
    Northern Ireland
    Posts
    167
    Thanks
    12
    Thanked 6 Times in 6 Posts

    I need some CSS to not get picked up by Safari or Chrome

    Hey there,

    I have a CSS issue, I have applied a set of styles to a checkbox in order to make it zoom correctly in IE8 (This is a must have feature for my customer).

    However the solution requires some CSS which just isn't recognised by Safari or Chrome, to be honest I am not too worried about Chrome support for this particular audience, but Safari support is certainly something I need to achieve.

    Basically I am wondering if anyone knows of a nice way of stopping Safari or Chrome from applying certain CSS rules?

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Use conditional comments for IE.

  • #3
    Regular Coder
    Join Date
    Aug 2008
    Location
    Northern Ireland
    Posts
    167
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Cheers but I need Firefox et al to still work, it is an issue specific to those two browsers.

    I think I am going to go with a PHP Browser Detect function and then call these extra CSS classes from one document if the browser isn't Chrome or Safari.

    I will post up how I get on.

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Conditional comments only work on IE so Firefox and Safari will ignore them. So anything you want to feed IE and not the others, put them in conditional comments.

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by drhowarddrfine View Post
    Conditional comments only work on IE so Firefox and Safari will ignore them. So anything you want to feed IE and not the others, put them in conditional comments.
    I think you missed it, but the OP seems to want IE and FF to read and use the CSS and make it so that ONLY Safari and Chrome will ignore it. I would guess that there are two options for that:

    1) To simply make Chrome and Safari NOT get a certain style at all - meaning that you could even leave those elements at their browser default...
    For Mozilla-based browsers you can use the -moz- prefix to target only that browser type. This is the way you would write up the CSS in the main CSS file (basically just add that prefix only to the CSS you want Safari and Chrome to ignore). Then you'd just need to give IE those styles separately with conditional IE code to link the CSS in an ie-only CSS file.

    2) To simply change the style for Chrome (and all other webkit browsers, just FYI) and Safari - meaning that you cannot use browser default styles for those elements anymore...
    You could use the basic CSS file you already have and then add a second statement using the -webkit- CSS prefix to target Chrome and other webkit-based browsers and specify different CSS if that fixes the problem. Safari can be similarly targeted (with a hack) described here:
    http://dustinbrewer.com/css-hackgett...ari-to-behave/

    The second method assumes that there is CSS you can apply to fix those two browsers which would not be the case if, for example, you wanted to see default input or button styles in those two browsers. In a case like that you would have to use the first method I mentioned.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •