CSS - Using Conditional To Switch Css Based On User's Browser

I purchased a template for my admin area (didn't want to be bothered with the design, prefer to work on the functionality), and I noticed it had a lot of comments like the following:

PHP Code:
<!--[if !IE]>start login<![endif]-->

<!--[if !IE]>end login<![endif]--> 





Are these just basically regular comments? I am not sure why the if statements are in there.

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?

Hello,

I have some CSS that I'm using to implement zoom on an iframe

I found that it needed to look like this for IE7:

Code:

  
    <style type="text/css">

        .outerWrapper { width: 100%; height: 100%; padding: 0; overflow: hidden; margin-top: 10px; margin-left: 0px; float:left;}
        .wrapper { width: 500px; height: 350px; padding: 0; overflow: hidden; margin-top: 0px; margin-left: 0px; float:left;}
        .iFrameClass { width: 510px; height: 357px; border: none;  padding: 0; margin-top: -50px; margin-left: -52px; }
        
        .iFrameClass {
            
            zoom: 1.00;
            -moz-transform: scale(1.0);
            -moz-transform-origin: 50% 50%;
            -o-transform: scale(1.0);
            -o-transform-origin: 50% 50%;
            -webkit-transform: scale(1.0);
            -webkit-transform-origin: 50% 50%;
        }

    </style>

and this for IE8:


Code:

  
    <style type="text/css">

        .outerWrapper { width: 100%; height: 100%; padding: 0; overflow: hidden; margin-top: 10px; margin-left: 0px; float:left;}
        .wrapper { width: 500px; height: 350px; padding: 0; overflow: hidden; margin-top: 0px; margin-left: 0px; float:left;}
        .boxiFrameClass { width: 510px; height: 357px; border: none;  padding: 0; margin-top: -50px; margin-left: -52px; }
        
        .boxiFrameClass {
            
            -ms-zoom: 1.00;
            -ms-transform-origin:  50% 50%;
            -moz-transform: scale(1.0);
            -moz-transform-origin: 50% 50%;
            -o-transform: scale(1.0);
            -o-transform-origin: 50% 50%;
            -webkit-transform: scale(1.0);
            -webkit-transform-origin: 50% 50%;
        }

    </style>

What's odd is that ie8 converts -ms-zoom to just plain ZOOM in the DOM, but it doesn't like the IE7-style markup.

I decided to try to make both happy using conditional comments, and figured that since it's all browser dependent anyway, I'd make everything conditional like so:

So I changed it to:

Code:

    <style type="text/css">

        .outerWrapper { width: 100%; height: 100%; padding: 0; overflow: hidden; margin-top: 10px; margin-left: 0px; float:left;}
        .wrapper { width: 500px; height: 350px; padding: 0; overflow: hidden; margin-top: 0px; margin-left: 0px; float:left;}
        .iFrameClass { width: 510px; height: 357px; border: none;  padding: 0; margin-top: -50px; margin-left: -52px; }
        
        .iFrameClass {
            
            [if lte IE 7] zoom: 1.00;
            [if gte IE 8] -ms-zoom: 1.00;
            [if gte IE 8] -ms-transform-origin:  50% 50%;
            [if Gecko] -moz-transform: scale(1.0);
            [if Gecko] -moz-transform-origin: 50% 50%;
            [if Opera] -o-transform: scale(1.0);
            [if Opera] -o-transform-origin: 50% 50%;
            [if Webkit] -webkit-transform: scale(1.0);
            [if Webkit] -webkit-transform-origin: 50% 50%;
        }

    </style>

The problem is that now, the zoom isn't working any any browsers, whereas before I could make it work ok in either (IE8, FF, and Chrome) or (IE7, FF, and Chrome), depending on the markup.

Am I doing something wrong in the way I'm doing conditional comments?

Thanks,
Eric

can anyone tell me what is this..mean by

Quote:

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} 

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

My first post.... ok... First I would like to say THANK YOU to anyone who has time to bestow some knowledge to me on what I am sure is a highly noob-esqe situation. I would also like to say that I have thoroughly search this and other forums for my issue, unfortunately I dont think I understand CSS or any web design enough to comprehend the solutions given. I think this may require someone with the knowledge I lack to come down to my level... if you can bend that low.. and walk me thru layman term-style. Again thanks in advance for anytime spent helping out.

That being said

I was recently trying to jazz up my website that is hosted by a certain music community. I do a decent amount of business thru this site so I wanted to step up the interface a little and get away from using the standard page setup they give you. They do offer the option to edit CSS to construct your own for a little more customization. I jumped in, and after a few days of struggling, I got it looking how I wanted it. I was excited until I realized it looked different on almost every computer i visited the site on. My Background is fine, but the links to paypal and other content is all over the place(e.g. song player, twitter link, buttons) I have tweaked and tweaked, but have not been able to remedy this apparently common problem due to my lack of knowledge and experience. My only hope is to post the coding here and have a Smart Guy/Girl guide me in the right direction. I hope Im not asking too much guys... here goes

(I know I can post my url here, how can I redirect you guys to veiw my site??)


/********* SoundClick CSS Template (based on custom version Mon, Sep 28 2009) ***********/
Quote:
/* general */
body {background: url((MyBGJPEGforbackground)); margin:0px;}
body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;}
a, a:link, a:visited {color:white; text-decoration:none;}
a:hover {color:#ff0000; text-decoration:underline;}
.pageFooter {clear:both; color:gray; padding:1px 0px 50px 20px;}
.infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */
.infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;}

/* main containers */
.mainTable {background: url((MainTableBGPicWentHere)) ; color:#999999; width:750px; margin-left:auto; margin-right:auto; text-align:center;}
.mainContent {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:#999999; width:725px; float:left; overflow:hidden; margin:0px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible */

/* left navigation */
.navigation {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:white; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;}
.navigation a:link, .navigation a:visited {color:#999999;}
.navigation a:hover {color:#ffffff;}
.navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;}

/* general elements */
.headline {background:transparent; color:transparent; font-weight:bold; border-bottom:transparent dashed 0px; border-top:transparent solid 0px; padding:330px 1px 50px 50px;}
.headlineBig {font-size:22px; font-weight:normal;}
.headlineSuppl {float:right; margin:0px 0px 0px 100px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */
.headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;}
.headlineSuppl a:hover {color:black; text-decoration:underline;}
.pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */
.pageturner .nonactive {color:#666666;}
.pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;}
.pageturner a:hover {color:#ff0000; text-decoration:underline;}
.listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;}
.listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden}
.breaker {height:1px; line-height:1px; clear:both}

/* general color and font assets */
.color_supplemental {color:#666666;} /* used e.g. for song pages comments count */
.alternateBG0 {background:none;} /* used as background colors for comments */
.alternateBG1 {background:none;} /* alternate color */

/* main page (the default entry page) */
.mainContent .contHeadline {clear:left; font-size:16px; color:#cccccc; padding:1px 0px 2px 20px;} /* interview questions */
.mainContent .contText {clear:left; padding-left:15px;}
.mainContent .contInterview {clear:left; padding-left:30px;}
.mainContent .newsBox {clear:both; background:transparent; color:white; border:transparent solid 0px; margin:6px 20px 0px 20px; padding:100px;}

/* main page: video box (different from video page) */
.videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;}
.videoBox_mainPage .video {padding:5px; margin-bottom:10px;}
.videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;}
.videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;}
.videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;}
.videoBox_mainPage .info {padding-left:120px;}
.videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:13px; font-weight:normal; text-decoration:none;}
.videoBox_mainPage a:hover {text-decoration:underline;}

/* main page: upcoming shows */
.liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;}
.liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;}
.liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;}
.liveshowsBox a:hover {color:#666666; text-decoration:underline; cursorointer;}

/* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */
.playerBox {float:left; clear:left; padding-left:20px; margin:300px 0px 100px 0px;}
.playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:13px; padding:3px 5px 3px 3px;}
.playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;}
.playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;}
.playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:100px 0px 0px 1px; overflow:auto;}
.playerBox .songBox .singleSong {color:#000000; font-size:13px; padding:1px;}
.playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursorointer;}

/* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */
.embeddedPlayer {margin:1px auto; width:750px;}

/* main page: tabbed content headers (fans,stations) */
.tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; }
.tabbedCont_header li a:hover {color:white;}
.tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;}

/* main page: fans, stations (tabbed content) */
.fansBox {padding:30px 20px 20px 20px; clear:both;}
.fansBox a:link, .fansBox a:visited {}
.fansBox a:hover {}
.fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; }
.fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;}
.fancount a:hover {color:#E6E6E6; text-decoration:none;}
.fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;}
.fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;}
.fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;}
.fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;}
.stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;}
.stationPicBox {float:left;}
.stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden}
.stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;}
.stationsText {color:#999999; height:80px; overflow:hidden;}
.stationlink a:link, .stationlink a:visited {color:#999999; font-size:16px; text-decoration:none;}
.stationlink a:hover {color:#ff0000; text-decoration:underline;}

/* music page */
.songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;}
.songsBox a:link, .songsBox a:visited {text-decoration:none;}
.songsBox a:hover {text-decoration:underline;}
a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:16px; font-weight:bold;}
a.songtitle:hover {color:#ff0000; text-decoration:underline;}
.songsBox .actionlinks {font-size:14px;} /* the links for full song info, add to station, rate this song... */
.songsBox .topSong {color:#666666; float:left; text-align:left; font-size:13px;}

/* comments page */
.commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;}
.commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;}
.commentsBox a:link, .commentsBox a:visited {text-decoration:none;}
.commentsBox a:hover {text-decoration:underline;}
.commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;}
.commentsBox .postdate {color:#666666; font-size:13px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;}
.commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */
.commentsBox .postdate a:hover {text-decoration:underline;}
.commentsBox .comment {font-size:14px; padding:0px 5px 0px 140px;}
.commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;}
.commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;}
.ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */
.commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;}
.commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;}

/* video page */
.videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;}
.videoBox .video {padding:20px; margin-bottom:10px;}
.videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;}
.videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;}
.videoBox .info {float:left; width:440px;}
.videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;}
.videoBox a:hover {color:red; text-decoration:underline;}
.videoListBox {border-top:#4b4b4b dashed 1px;}

/* photo pages */
.photopage {background:black;}
.selectedPhoto_box {text-align:center;}
.selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;}
.photolist {padding:10px 0px 0px 30px;}
.photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;}
.photobox .photo {height:150px; width:118px; overflow:hidden;}
.photobox .photoComment {color:#444444; font-size:11px;}
.photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;}
.photobox_on .photo {height:150px; width:118px; overflow:hidden;}
.photobox_on .photoComment {color:#999999; font-size:11px;}

/* reviews page */
.reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;}
.reviewsBox .rev_headline {color:#cccccc; font-size:16px; font-weight:bold;}
.reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:14px;}
.reviewsBox .rev_source {text-align:right; font-size:13px; color:#666666;}

/* licensing page */
.licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;}
.licenses {margin-top:70px;}
.licenses .headline {font-size:14px;}
.lic_tableSongs {border:none;}
.lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;}
.lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;}

/* widgets page */
.widgetMargin { padding:8px 0px 8px 35px;}
.widgetSpacer {width:100; height:15px; clear:both;}

/* tag cloud */
.tagCloud {padding:10px;}
.tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;}
.tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;}
.tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;}
.tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;}
.tagCloud .cloudS30 {font-size:11px; color:#999999;}
.tagCloud .cloudS40 {font-size:12px; color:#999999;}
.tagCloud .cloudS50 {font-size:14px; color:#666666;}
.tagCloud .cloudS60 {font-size:16px; color:#666666;}
.tagCloud .cloudS70 {font-size:18px; color:#333333;}
.tagCloud .cloudS80 {font-size:22px; color:#333333;}
.tagCloud .cloudS90 {font-size:28px; color:#111111; }
.tagCloud .cloudS100 {font-size:36px; color:#111111;}
.tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;}
.tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;}
.tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;}

I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE.

<a href="(URL address blocked: See forum rules)">Link</a>

I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers.

Any guidance is very appreciated. thanks.

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?

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 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?

I have a background image that is defined in CSS.

Code:

#content {
		font-size: 70%; 
		clear: both; 
		background-color: #FFFFFF;
		background-image: url(images/content_background.gif);
		background-repeat: repeat-y;
		float: left;
		width: 100%;
		margin-right: -3px;
	}

And then if I apply class="top_navigation" to "content", I want I want the background to not be there.

Code:

#content.top_navigation {background-image: none}

This works in every browser I try except IE, which still stubbornly applies the background image. Even changing the second bit of CSS to apply a different background image doesn't work. Any ideas on how I can give IE a kick in the butt and make it realize it needs to NOT show that background image?

Hello!
I am putting the finishing touches on a website for a client of mine, and even though the main menu works perfectly in Firefox 3.0.10, IE 7 and IE 8 both appear to add a CR/LF to the end of each menu button.

The menu is CSS based, and uses ul and li tags.
Here is the CSS Code:

Code:

@charset "ISO-8859-1";

#nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* This keeps the menu from interfering with the main content. */
#nav + *{
	clear: left;
}


#nav ul {
	padding: 0;
	margin:0;
	list-style: none;
	z-index:99;
	position:relative;
	overflow:visible;
	display:inline;
}

#nav > li ul {
	text-align: center;
	display:inline;
	list-style-type:none;
}
#nav li { /* Appearance settings (eye candy) */
	position: relative;
	background: #E7E7E7;
/*	background: url(trans/white80.png);*/
	color: #00F;
	border: solid 1px #AAA;
	height: auto;
	width: 6.5em;
	max-width: 6.5em;
	overflow: hidden; 
	font-weight: normal;
}
#nav ul ul {
	width: 8em;
}
#nav > li {
	margin: 0;
	float: left;
	text-align: center;
	height: 3em;
	overflow:hidden;
}


#nav a {
	text-decoration: none;
	padding: 0 0.5em; 
	line-height: 1.2em;
	background: transparent;
	color: inherit;
	overflow: hidden;
}
#nav li li a {
	line-height: normal;
/* TEST: Is This Better?
/*	padding: 0.25em 0.5em; */
}

/* #nav ul, #nav li, #nav a{
	 * display: block;
}


#nav ul{
	visibility: hidden;
}



/* (sub-)submenus */
#nav ul ul, #nav ul ul ul{
	position:absolute;
	top: 0;
	left: 95%;
	visibility: hidden;
}



/* Shadow! */

#nav li:hover {
/*	border-style: outset;*/
/*	background: #D7D7D7;*/
	background: #1AD;
	color: white;
}
#nav > li ul {
/*	background: #666;*/
	background: transparent url("trans/black40.png");
}
#nav > li > ul {
	margin: -1px;  /* This is to make the width equal to parent li width. */
	position: relative;
	top:  4px;
	left: 4px;
}
#nav > li ul li {
	position: relative;
	top:  -4px;
	left: -4px;
}
/* end shadow */


/* Enlarger */
/* #nav > li {width: 8em;} */ /* popping disappears if we use a fixed-width */
#nav > li:hover {
	margin: -0.2em;
	padding: 0.2em;
	z-index: 2;  /* Opera does not seem to respect this. */
}
#nav > li:hover > a {
	margin: -0.2em;
	padding: 0.2em 0.7em;
}
/* end enlarger */


/* Interactive lines: show/hide menus */
#nav li:hover ul ul, #nav li:hover ul ul ul{
	visibility: hidden;
}

#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{
	visibility: visible;
}




.skipnav {
	display: none;
}

#nonav {
	display: block;
	background: transparent;
	height: 1px;
	border: 0;
	margin: 0 0 -1px 0;
	padding: 0;
}

Here is the other file:

Code:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="/style/MainMenu.css">
<title>Main Menu</title>
</head>
<ul id="nav">
<li><a href="index.php">Nova Health Center Home</a></li>
<li><a href="drtoufigh.php">About Our Doctor</a></li>
<li><a href="approach.php">About Our Approach</a></li>
<li><a href="clients.php">Client Testimonials</a></li>
<li><a href="nutrition.php">Nutrition Information</a></li>

<li><a href="faq.php">Questions And Answers</a></li>
<li><a href="directions.php">Directions & Office Hours</a></li>
</ul>
</html>

Can anybody tell me what I need to change to make the menu render correctly in IE 7/8? I have made both files pass W3C Validation, consulted Google, researched IE CSS bugs and after many hours of failed attempts, I figured it would be quicker to ask here.

I know that the rest of the site is not W3C compliant (yet); however, all I need for now is to fix this one bug so I can show it to my client in IE as well as FF.

Thanks in advance for any assistance you can provide!
Regards,
Riley F. Marquis III

Hi All,

I'm in the process of building my very first CSS-based site, and I'm having some challenges with getting the nav menu to render and function properly. I'm using the Pixy rollover technique, and I've modeled my code after several sources, since none of the sources exactly match what I need to do for this site. I'm sure my code is probably pretty messed up, but I don't have enough experience yet to determine how and where. I'm using Dreamweaver CS3 to create the code/pages.

There are three main issues:

1. The nav menu is not placed correctly on the page (it's too high in Firefox, and too low in IE)

2. The links for the nav buttons are not rendering

3. The rollover states for the nav buttons are not rendering

Here's the relevant code as it's presently constituted:
Code:
CSS

.twoColLiqLtHdr #mainContent {
	margin: 5px 20px 0 291px;
	background-image: url(../assets/structure/main_background.png);
	width: 638px;
	height: 622px;
	background-repeat: no-repeat;
	position: relative;
}
#mainContent #navMenu {
	width: 636px;
	height: 60px;
	background-image: url(../assets/navigation/navigation_buttons.png);
	background-repeat: no-repeat;
	}
#mainContent #navMenu ul {
	margin: 0;
	padding: 0;
	float: left;
	}
#mainContent #navMenu li {
	float: left;
	}
#mainContent #navMenu li a {
	display: block;
	}
/*nav menu up*/
#mainContent #navMenu li#services a:link {
	background-position: 0 0;
	}
#mainContent #navMenu li#faq a:link {
	background-position: -167px 0;
	}
#mainContent #navMenu li#about a:link {
	background-position: -272px 0;
	}
#mainContent #navMenu li#contact a:link {
	background-position: -422px 0;
	}
/*nav menu over*/
#mainContent #navMenu li#services a:hover {
	background-position: 0 -60px;
	}
#mainContent #navMenu li#faq a:hover {
	background-position: -167px -60px;
	}
#mainContent #navMenu li#about a:hover {
	background-position: -272px -60px;
	}
#mainContent #navMenu li#contact a:hover {
	background-position: -422px -60px;
	}
/*nav menu down*/
#mainContent #navMenu li#services a:active {
	background-position: 0 -120px;
	}
#mainContent #navMenu li#faq a:active {
	background-position: -167px -120px;
	}
#mainContent #navMenu li#about a:active {
	background-position: -272px -120px;
	}
#mainContent #navMenu li#contact a:active {
	background-position: -422px -120px;
	}

Code:
XHTML

<div id="mainContent">
    <div id="navMenu">
    	<ul>
			<li id="services"><a href="services.html"></a></li>
   			<li id="faq"><a href="faq.html"></a></li>
			<li id="about"><a href="about_us.html"></a></li>
			<li id="contact"><a href="contact_us.html"></a></li>
		</ul>
	</div>
</div>

I'd be happy to post links to my nav menu image and uploaded code, but I can't yet since I'm a new user. If anyone who thinks they can help wants to see them, please let me know and I'll send the links in a PM (provided I can do that).

Thanks in advance for any help provided. I've been working on this issue for almost 8 hours, and I'm ready to move on to the next one.

Sam

I have delved into building websites using CSs instead of tables. It looks great in IE 7 and above and Firefox, but in IE 6 it is out of whack badly. Like all the divs are on one side, when all the measurements are correct and should fit.

Is there something I am doing wrong, it looks right even when I look at it in Dreamweaver.

Is there a special method you should always apply when building a CSS website, like always add border:none; on all divs, just the same way, that you always have to add border: 0; on all images otherwise a border will appear?