Browser-specific CSS to hide slider nav

[jodzeee]

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?

[rfmeier]

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.

CSS Specific for Internet Explorer

How To Create an IE-Only Stylesheet

I hope this helps.

---

Ryan Meier – Twitter

[surefirewebserv]

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

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

and ie 7 and lower:

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

---

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

[jodzeee]

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!

[surefirewebserv]

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.

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

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

[jodzeee]

Thank you, I'll give it a try!

[Author]

Posts