I have encountered an issue with IE7 where my CSS is not functioning properly. In an attempt to target IE7 and lower versions specifically, I inserted IE comment tags into the HTML code. However, despite my efforts, it does not seem to be effective. Initially, I included the following code:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="sites/css/ie7-and-down.css" />
<![endif]-->
Unfortunately, this approach did not yield the desired results. Since I do not have access to IE7, I tried using developer tools in IE for debugging purposes. To test whether the comment tag was functioning correctly within IE, I added a broader IE targeting rule:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="sites/css/all-ie-only.css" />
<![endif]-->
Even with this expanded targeting, the issue persists! I am perplexed as to why this is happening. You can view the website here. My specific goal is to modify the navigation layout for IE7, which is currently defined in the main stylesheet as:
.modern-menu {
display: block;
}
To address this discrepancy in IE7, I attempted to hide the navigation by adding a rule in the IE-specific stylesheet:
.modern-menu {
display: none;
}
Here is an excerpt of the HTML code from the website:
<ul class="modern-menu>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
</ul>
style.css:
.modern-menu {
width: 920px;
height: 40px;
width:99%;
font-family: 'SourceSansProRegular',Arial,Helvetica,"Nimbus Sans L",sans-serif;
font-size: 13px;
float:left;
font-weight: normal;
position: relative;
clear: both;
margin-top:0px;
display: block;
}
all-ie-only.css:
@charset "utf-8";
/* CSS Document */
body {
background-color: #0099FF;
}
.modern-menu {
display: none;
}
.nav {
display: block;
}
I am seeking assistance to understand why these comment tags are not having the intended effect. Can you please provide insight on this matter?