CSS - Conditional Css

I read through many of the related articles I found through searching the board, but found no solution to my problem.

First question: Do these two CC's, when either is present in the head section, represent two ways of accessing my styles_IE.css file?
Code:

<!--[if lte IE 8]>
      <style type="text/css" media="all"> @import "css/styles_IE.css"; </style> 
<![endif]-->

<!--[if lte IE 8]> 
      <link rel="stylesheet" href="css/styles_IE.css" type="text/css" media="screen" />
<![endif]-->

Second:
An associate of mine complains that, since I took our new site live a week ago and migrated from my development site, his IE8 no longer makes the drop-down menus drop down. I built a first site a couple years ago using this same Suckerfish, which I found online after someone here recommended it. For my new project I just copied the Suckerfish and CSS and changed the target files and color scheme. Works like a champ.

Both my new live and development sites work fine with *my* IE8 (and FF, Opera, Chrome, Safari...), and no one else has told me of any issues. But this guy can no longer navigate our site due to drop-down problems (but he tells me he had no problem with the dev server...weird). Below is a look at my Suckerfish menus and CSS.
Thank you very much for any input regarding IE and how I might solve one of its countless and inexcusable foibles...
Curtis
Code:

<div id="navContainer">
   <ul id="nav">
      <li><a href="index.php">Home</a> 
         <ul>
            <li><a href="index.php">Home Page</a></li>
            <li><a href="about.php">About DT</a></li>
            <li><a href="dthc.php">DTHC Board</a></li>
            <li><a href="found.php">DT Foundation</a></li>
            <li><a href="email.php?email=gen">Contact Us</a></li>
         </ul>
      </li>
      <li><a href="">Events</a> 
         <ul>
            <li><a href="commu.php">Community Service</a></li>
            <li><a href="workday.php">Retreats/Workdays</a></li>
            <li><a href="history.php">House History</a></li>
         </ul>
      </li>
      <li><a href="">Alumni</a>
         <ul>
            <li><a href="email.php?email=addrChng">New Contact Info?</a></li>
            <li><a href="dues.php">Dues/Donations</a></li>
            <li><a href="pclass.php">Pledge Classes</a></li>
            <li><a href="missing.php">The Missing</a></li>
            <li><a href="memorial.php">Memorial</a></li>
         </ul>
      </li>
      <li><a href="">Up & Down</a>
         <ul>
            <li><a href="minutes.php">Newsletters / Minutes</a></li>
            <li><a href="manuals.php">Manuals and Docs</a></li>
            <li><a href="upTheRiver.php">Upload Center</a></li>
            <li><a href="vision.php?view=visi">Our Vision</a></li>
         </ul>
      </li>
      <li><a href="">Grab Bag</a>
         <ul>
            <li><a href="common.php?page=dtBusi">DT Businesses</a></li>
            <li><a href="gallery.php">Scrap Book</a></li>
            <li><a href="direc.php">Online Directory</a></li>
            <li><a href="mailList.php?page=main">DT Mail List</a></li>
            <li><a href="lilsis.php">Little Sisters</a></li>
         </ul>
      </li>
   </ul><!-- end ul #nav -->
</div><!-- end navContainer -->

Code:

#navContainer {
   z-index:3; width:100%; text-align:left; 
   border:0px solid #ddd; margin:0 auto; padding-bottom:1.3em
}
	
#nav, #nav ul {
   font-size:1.0em; float:left; width:665px; 
   list-style:none; line-height:1; background:#bfe2f9; 
   font-weight:bold; padding:0; border:solid #999; border-
   width:0 0 1px 0; margin:0 0 0 0
}
							
#nav ul{background:#bfe2f9;}
#nav {padding-left:6em}
#nav a {
   display:block; width:10em; w\idth:6em; 
   color:#db2438; text-decoration:none; padding:0.25em 0.4em
}

#nav a.topDrop {
   background:url(../pics/rightArrowYellow.gif) 
   center right no-repeat;
}

#nav li {float:left; padding:0; width:8.5em}

#nav li ul {
   position:absolute; left:-999em; height:auto; 
   width:9.8em; w\idth:9.2em; font-weight:normal; border-
   width:0.1em; margin:0; z-index:1000
}

#nav li li {padding-right:0.9em; width:7.5em}

#nav li ul a {width:13em; w\idth:9em}

#nav li ul a:hover {
   width:13em; w\idth:9em; color:blue; 
   text-decoration:underline
}

#nav li ul ul {margin:-1.75em 0 0 10.4em}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, 
   #nav li.sfhover ul ul ul {
   left:-999em
}
	
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav 
   li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 
   left:auto
}
	
#nav li:hover, #nav li.sfhover {background:#bfe2f9} 

Hey everyone. So I've gotten the drop down menu to work in IE and Firefox until the client wanted to only have one of the menu items be a drop down menu.

I used conditional comments based on the tutorials found on CSSPlay but the menu is stuck in one location in IE. Please help!
I also don't understand why the content box's type is now centered in IE.

Http://www.thehomecollection.com

Thank you for your efforts everyone!

-Garrick-

html
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<!-- Header -->
<div id="header">
<!-- Search -->
<div id="search">
<form>
<input type="hidden" name="restrict" value="/your_site" />
<input type="hidden" name="exclude" value="" />
<img src="images/img_search.jpg" alt="" />
<input type="text" name="words" size="19" value="" />
<input type="image" class="button" src="images/btn_go.gif" alt="submit_button" />
</form>
</div>
</div>

<!-- Top Navigation -->
<div id="nav">
<ul id="top_nav">
  <li id="nav_home"><a href="index.html"></a></li>
<div class="menu">
<ul>
<li id="nav_shop"><a href="index.html"><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table class="shop"><tr><td><![endif]--><ul><li><a href="index.html">Versace</a></li><li><a href="index.html">Calvin Klein</a></li><li><a href="index.html">Versace</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
</div>
<div style="float: left;">
  <li id="nav_service"><a href="index.html"></a></li>
  <li id="nav_email_signup"><a href="index.html"></a></li>
  <li id="nav_account"><a href="index.html"></a></li>
  <li id="nav_bag"><a href="index.html"></a></li>
  <li id="nav_checkout"><a href="index.html"></a></li>
</div>
</ul>
<!-- Product Category Navigation -->
<!-- Menu Start -->
<div id="product_nav">
<ul>
<li><a href="giftware/index.html"><img src="images/menu_home_gift.jpg" /></a></li>
<li><a href="lux_bedding/index.html"><img src="images/menu_home_bedding.jpg" /></a></li>
<li><a href="dinnerware/index.html"><img src="images/menu_home_dinner.jpg" /></a></li>
<li><a href="stemware/index.html"><img src="images/menu_home_stem.jpg" /></a></li>
<li><a href="lighting/index.html"><img src="images/menu_home_light.jpg" /></a></li>
<li><a href="furniture/index.html"><img src="images/menu_home_furniture.jpg" /></a></li>
<li><a href="accessories/index.html"><img src="images/menu_home_access.jpg" /></a></li>
<li ><a href="sale/index.html"><img src="images/menu_home_sale.jpg" /></a></li>
</ul>
</div>
<!-- Menu End -->
</div>

<div id="content">
  <p>Content goes here.</p><br />
</div>
<div id="footer"></div>
</div>
</body>
</html>

css
Code:

body {
	background-color: #F5F5F4;
	color: #000000;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	text-align: center;
}

#wrapper {
	margin: 0 auto;
	width: 760px;
	text-align: left;
}

table, ul, li {
	margin: 0;
	padding: 0;
}

img {
	margin: 0;
	padding: 0;
	border: none;
}

p {
	margin: 0 0 10px 0;
	padding: 0;
}

a:link, a:visited {
	color: #FF0000;
	text-decoration: underline;
}

a:hover, a:visited:hover {
	color: #FFFF00;
	text-decoration: underline;
}

#header {
	background: url(images/header.jpg) scroll no-repeat;
	height: 89px;
	margin: 0;
	padding: 0;
	width: 760px;
}

#search {
	margin: 0;
	padding: 0 20px;
	float: right;
	position: relative;
	top: 48px;
}

/* IE hack start */
html[xmlns] #search {
	top: 47px;
}
/* IE hack start */

#search .button {
	position: relative;
	top: 1px;
}

/* IE hack start */
html[xmlns] #search .button {
	position: relative;
	top: 3px;
}
/* IE hack start */

#nav {
	height: 58px;
	margin: 0;
	padding: 0;
	width: 760px;
}

#nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

#nav_home {
	background: url(images/top_nav.jpg) no-repeat scroll;
	width: 80px;
	height: 27px;
	display: block;
	float: left;
}

#nav_home a {
	width: 80px;
	height: 27px;
	display: block;
}

#nav_home a:active {
	background: url(images/top_nav.jpg) no-repeat scroll 0 -27px;
}

#nav_shop {
	background: url(images/top_nav.jpg) no-repeat scroll -80px 0;
	width: 110px;
	height: 27px;
	display: block;
	float: left;
}

.menu {
	padding: 0;
	margin: 0;
	width: 110px;
	height: 27px;
	z-index: 600;
	background: #ffffff;
	top: 0px;
	float: left;
}

.menu img {margin: 0; padding: 0; border: none;}

.menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.menu ul ul {
	width: auto;
}

.menu ul ul li {
	float: left;
	width: 100%;
	position: relative;
	background: #ffffff;
}

.menu ul ul {filter: alpha(opacity=75);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
 -moz-opacity: 0.75; opacity:0.75;
}

.menu li {
	float: left;
	width: auto;
	position: relative;
}

.menu ul ul a, .menu ul ul a:visited {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 11px;
	text-decoration: none;
	color:#000000; 
	background:#ffffff;
	padding: 5px;
}

/* IE hack start */
html[xmlns] .menu ul ul a, .menu ul ul a:visited {
	width: auto;
}
/* IE hack start */

.menu ul ul {
	visibility: hidden;
	position:absolute;
	height: 0px;
	top: 27px;
	left: 0;
}

.menu ul :hover ul{
visibility:visible;
display: block;
}

.menu a:hover {
color:#000000; 
background:#ffffff;
}

.menu ul ul a:hover{
color:#ffffff; 
background:#777777;
}

.menu :hover > a {
color:#000000; 
background:#ffffff;
}

.menu ul ul :hover > a {
color:#ffffff; 
background:#777777;
}

/* another hack for IE5.5 */
* html .menu ul ul {
top:27px;
t\op:27px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table.shop {position:absolute; top:0; left:0; width: 100%;}

#nav_bag {
	background: url(images/top_nav.jpg) no-repeat scroll -544px 0;
	width: 106px;
	height: 27px;
	display: block;
	float: left;
}

#nav_bag a {
	width: 106px;
	height: 27px;
	display: block;
}

#nav_bag a:active {
	background: url(images/top_nav.jpg) no-repeat scroll -544px -27px;
}

#nav_account {
	background: url(images/top_nav.jpg) no-repeat scroll -445px 0;
	width: 99px;
	height: 27px;
	display: block;
	float: left;
}

#nav_account a {
	width: 99px;
	height: 27px;
	display: block;
}

#nav_account a:active {
	background: url(images/top_nav.jpg) no-repeat scroll -445px -27px;
}

#nav_checkout {
	background: url(images/top_nav.jpg) no-repeat scroll -650px 0;
	width: 110px;
	height: 27px;
	display: block;
	float: left;
}

#nav_checkout a {
	width: 110px;
	height: 27px;
	display: block;
}

#nav_checkout a:active {
	background: url(images/top_nav.jpg) no-repeat scroll -650px -27px;
}

#nav_service {
	background: url(images/top_nav.jpg) no-repeat scroll -191px 0;
	width: 127px;
	height: 27px;
	display: block;
	float: left;
}

#nav_service a {
	width: 127px;
	height: 27px;
	display: block;
}

#nav_service a:active {
	background: url(images/top_nav.jpg) no-repeat scroll -191px -27px;
}

#nav_email_signup {
	background: url(images/top_nav.jpg) no-repeat scroll -318px 0;
	width: 127px;
	height: 27px;
	display: block;
	float: left;
}

#nav_email_signup a {
	width: 127px;
	height: 27px;
	display: block;
}

#nav_email_signup a:active {
	background: url(images/top_nav.jpg) no-repeat scroll -318px -27px;
}

/* Prodcts Navigation */

#product_nav {
	margin: 0;
	padding: 0;
	float: left;
	width: 760px;
}

#product_nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}

#product_nav li {
	margin: 0;
	padding: 0;
	display: inline;
	float: left;
}

#content {
	background-color: #ffffff;
	margin: 0;
	padding: 20px;
	width: 720px;
	clear: both;
}

/* remove comments to add footer
#footer {
	background: url(images/footer.jpg) scroll no-repeat;
	height: 10px;
	margin: 0;
	padding: 0;
	width: 760px;
}
*/

I need to hide the following code from IE 7 But I can't quite get the conditional comments to work.

Code:

#fullc p a em {
	padding-top: 190px;
	right: auto;
	text-align: center;
	width:500px;
	height: auto;
	min-height: 190px;
	display: block;
	_display: none;
}

This is what I've tried so far:
Code:

<!--[if !IE 7]>
#fullc p a em {
	padding-top: 190px;
	right: auto;
	text-align: center;
	width:500px;
	height: auto;
	min-height: 190px;
	display: block;
	_display: none;
}
<![endif]-->

And this:

Code:

<!--[if IE 7]>
#fullc p a em {
	padding-top: 0;
	right: 0;
	text-align: center;
	width:0;
	height: 0;
	min-height: 0;
	display: block;
	_display: none;
}
<![endif]-->

Neither of these seem to work. The first one hides it from FF but not IE7 for some reason.

Is what I'm trying to do going to work?

Hello and thank you in advance for any help!

I am trying to add code to my website so that the CSS that is loaded will be based on the user's browser. Specifically, I want to load one CSS if the user is not using IE, and another if they are using IE. This is the code in my HEAD:

Code:

<link rel="stylesheet" type="text/css" href="css/chooser.css" />
<!--[if IE]> <link rel="stylesheet" type="text/css" href="css/chooser_ie.css" /> <![endif]--> 
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="css/chooser_IE6.css" /> <![endif]-->

I have tested with FF, Chrome, IE8 and IE6 and it does not work. I am guessing that the "default" stylesheet (chooser.css) is loading, and then either the IE (chooser_ie.css) or IE6 (chooser_ie6.css) is loading in addition to it. But I want only one of these CSS to be loaded.

Any help appreciated!

LSIRYAN

PS: URL = www.languagesystems.com/languagechooser.html

I want to use conditional comments to load a style sheet for IE7.


When I check the site in IE7 I see images for the content area being placed incorrectly. They are over to the right of the page when they should be in the middle.

When I check the images with IE dev bar they have a position of absolute. However the ie_7style.css sheet has them with a position float left. When I link to the ie7style.css without conditional comments and load the page it works as intended.

I believe the absolute positioning is coming from the style.css sheet which is intended for Firefox.

It seems to me that the ie7style sheet isn't being implemented properly and is relying somewhat on the style.css to render the page.

How do I resolve this problem?