How to hide specific lines of css from IE 7 and IE 8


Tags: css,internet-explorer

Problem :

So I have been trying to make some css drop down menus work in IE 7 & 8

They work great on other browsers.

site is: http://hanling.focusww.com

I've got a block of css and I contains some lines that I want to hide from the IE 7 & 8

I've marked the lines with '*' at the end.

#menu a:visited {
  color:#f9f6e0;
  display:block;
  font-weight:700;
  padding-bottom:10px; //kill this in ie *
  padding-left:12px;
  padding-right:12px;
  padding-top:10px;  //kill this in ie *
}

Can someone point me to an article that explains how to do this?



Solution :

You can do that the simple way with IE conditional comments:

HTML

<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->

CSS

#menu a:visited {
  color:#f9f6e0;
  display:block;
  font-weight:700;
  padding-bottom:10px; //kill this in ie *
  padding-left:12px;
  padding-right:12px;
  padding-top:10px;  //kill this in ie *
}

.ie7 #menu a:visited,
.ie8 #menu a:visited, {
  padding-bottom: 0; //kill this in ie *
  padding-top: 0;  //kill this in ie *
}

..or also possible with CSS-Hacks, more: http://www.webdevout.net/css-hacks#in_css

#menu a:visited {
 color:#f9f6e0;
 display:block;
 font-weight:700;
 padding-bottom:10px; 
 padding-bottom:0\9; //kill this in ie *
 padding-left:12px;
 padding-right:12px;
 padding-top:10px;  
 padding-top:0\9; //kill this in ie *
}

    CSS Howto..

    when hovering on iframe, how do I trigger a class on element outside of iframe?

    jQuery - how do I show the full navbar at certain width?

    How does CSS height get applied to input fields?

    How to change the size of item-avatar in ionic?

    How to make full width image responsive? (no scale / stretch)

    How to select element by order ? - Css

    How to reset Chrome dev tools CSS styles filter?

    How to add decoration to link in CSS?

    How to fix incorrect element size on browser scaling?

    How to apply common JavaScript and CSS for all my jsp pages in the application?

    How to use javascript to trigger a css event for a collection of elements that have the same class/name

    How to stick a footer to bottom in css?

    How do I keep my HTML elements on the same horizontal plane inside a parent DIV?

    How do I use CSS to keep multiple images relatively sized withing the same outer element?

    How to style (increase the height) of select box in CSS?

    How to create a three-column website background using CSS?

    How did overflow actually work here?

    How can I change Javascript Value into percentage instead of pixels

    How to position 3 images in two equal height columns?

    How to find the second value with same CSS class using Selenium webdriver

    How to delete space in css?

    How to style checkbox using CSS?

    How to remove a html table particular column to make other datas visible(responsive) using media queries?

    How to use nth-child in CSS to select all elements after the 3rd one?

    How can I get Outlook to display my tables properly

    How to make balloon textbook talking style using css

    How do I find out if a CSS class exists in a StyleSheet? [duplicate]

    How to override the CSS !important property when the original file loads after the customized css file

    How to link to a “tab” on my website

    How to have multiple CSS color transitions on a single text line?