CSS - Conditional Comments

I need a way to apply a different style to IE6 and IE7/Firefox. The webpage renders as expected in IE7/Firefox but IE6 needs to be fixed. Here is a mockup of what I need to have:

Code:

.featdesc
 {
  margin-left: 10px;
  margin-top: 10px;
  width: 400px;
  text-align: justify;

  if (ie6)
     font-size: 11pt;

  else
     font-size: 10pt;
 
  color: #505050;
 }

Is there a way to accomplish this?

I've heard that there is a way to use comments in CSS that make certain definitions invisible to certain browsers. Is this true. If so, where can I learn more about this? What are the down sides?

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} 

can anyone tell me what is this..mean by

Quote:

Hello forum,

I've been breaking my head trying to find the solution for this, but can't seem to solve it. I have pinpointed the problem though.

I have this site which looks terrible on IE because the background shakes, so I removed a property from the body selector which makes the background fixed.

So I only want users using IE to load that CSS stylesheet by using conditional comment. The thing is when loading the website that IE stylesheet is getting overlapped by the main CSS stylsheet so the body property is added again. I know this is what's going on because when I remove the original CSS stylesheet from the server, the IE stylesheet loads up and the page looks as it should in IE.

So do you guys have any ideas on how to NOT load the original stylesheet on IE explorers?

Thank you!

website: http://prueba.stu.com.mx

That's the CSS causing the problem and how it looks on every browser except IE:
Code:

body {
 background-image: url(_images/patternBG.jpg);
 background-repeat: repeat;
 background-position: left top;
 background-attachment:fixed; }

How it looks on IE:
Code:

body {
 background-image: url(_images/patternBG.jpg);
 background-repeat: repeat;
 background-position: left top; }

Here is a test page... http://www.thedreyersonline.com/test.htm

It doesn't look horrible, so I can live with it, but it's designed so that the comments section will actually sit on the bottom like the "onbottom.gif" screenshot... It works if there is enough content in the "content" div prior to the "comments" div, but not when it's short.

An alternative solution would be like the "extended.gif" screenshot, but the onbottom shot is preferred.

Any help would be greatly appreciated!
Thanks
Bryan

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;
}
*/

Hey All,


I'm currently testing out an idea for using Facebook Comments within a clients site. The space given to input the is very limited so I have implemented an auto scroll using Mootools.

Everything seems OK but when you go to the page the scroll bar is not present, so you are unable to scroll down to see the comments towards the bottom and click the page numbers.

The only way in which I can make the scroll bar show is if I right click and click Inspect Element both on Firefox and Chrome (it works perfectly!!!).

I would appreciate it greatly if someone could have a look and let me know what I am missing and where I have gone wrong.

The link to the page is http://www.theblitzparty.com/communityspirit/comments

Thanks

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