Browser-specific CSS to hide slider nav

Community Forums Forums Design Tips and Tricks Browser-specific CSS to hide slider nav

This topic is: not resolved

Tagged: 

This topic contains 5 replies, has 3 voices, and was last updated by  jodzeee 1 year, 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #45179

    jodzeee
    Participant
    Post count: 227

    I’ve just discovered that the responsive slider is not friendly with IE7. It seems to work okay, but the navigation buttons are vertical. Is there a way to target them in the CSS and change it to display:none for just users viewing with IE7?

    #45207

    rfmeier
    Participant
    Post count: 597

    Hello,

    I am guessing the navigation buttons are inline-block since they stack in IE7? There are specific ways to target IE versions through css. These are mostly considered hacks, but here are a few decent references. I wouldn’t sweat IE 7 too much.

    http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer

    http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

    I hope this helps.


    #45915

    surefirewebserv
    Participant
    Post count: 69

    There’s lots of IE7 hacks, but now a days there are more and more companies just not supporting it. Especially since ie10 is already out.

    Ask yourself if you absolutely even need it to work in ie7 based on your traffic. Just see what browser their using.

    Otherwise, you can add a style sheet specifically for ie like so:

    ie7 only
    [code]<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
    <![endif]-->[/code]

    and ie 7 and lower:

    [code]<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
    <![endif]-->[/code]


    SureFireWebServices.com | Genesis Tuts and More
    Genesis Theme Starter Kit | It’s Free

    #45943

    jodzeee
    Participant
    Post count: 227

    That’s why I’m asking … I saw in Analytics there are several still using IE7, unfortunately. I’d like to think by seeing broken design, they’d eventually upgrade so I’m tempted to blow it off … but I also hate to see my hard work not showing up nicely in all browsers!

    I was hoping there was something I could target within my existing stylesheet … like you do for media queries for browser sizes. Is the only way to accomplish it to create a new stylesheet? And if so, do I just add my code fixes to it or do I have to duplicate the existing and adjust?

    Thank you so much for your response!

    #45945

    surefirewebserv
    Participant
    Post count: 69

    You would just add your code to whatever you want fixed. There’s a few ie hacks, but to be honest I haven’t used these in a very long time.

    Add an _ before your style.

    [code]style {
    margin-top:10px;
    _margin-top:15px; /* old ie style */
    }[/code]

    That should work but I’m not sure if it will work on all versions of ie or just 7,


    SureFireWebServices.com | Genesis Tuts and More
    Genesis Theme Starter Kit | It’s Free

    #46307

    jodzeee
    Participant
    Post count: 227

    Thank you, I’ll give it a try!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.