CSS - Conditional Styles For Ie
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? Similar TutorialsHey! My layout is working fine on every other browser except IE7. I would need to make the footer height 70px on IE7 instead of the usual 45px. Code: .footer { background: #6cbdf0; height: 45px; [if IE 7]height: 70px; padding-top: 5px; clear: both; background-repeat: repeat-x; bottom: 0px; position: relative; } According to what I got from a tutorial online, that should solve the issue. However, when I test it on IE7 nothing has changed... How could I make it work? Thank you very much! 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. 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 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; } 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'd like to seperate blocks of text with a horazontal rule. I'd like it to be dashed. So, I've come up with this: Quote: hr { border: none 0; border-top: 1px dashed #000; width:98%; height: 1px } However, although this works well in IE, it Firefox there is too much space between the HR and the text block under it. In other words, the text above the HR comes right up to the line, but the text under the line, there is a larger gap. Any way to close the gap? Any ideas? Unfortunately I am not very experienced and I am trying to edit some coding that has been done for me. The code is as follows <div title="[[TITLE]]" style='background-image: url ([bg]); padding: 5%; width:90%; height:100%; padding-left: 6%; padding-right: 6%; background-size: 100% 100%; '> Now what happens is the words I type in this box are beautifully laid out because of the padding... The images placed in the box should stretch border to border - but obviously don't because of the padding.... Can anyone please tell me what I can change to give my text padding but images with no padding? Thanks so much Hello -- new to this forum. My questions concerns a problem I've run into many times. I'm trying to be CSS-moral and use style sheets as much as possible, or a least place properties in the Header. But here's what I run into. Many times I find it necessary to have different properties for the same tag within the Body. Currently, I use CSS to create the Menu items at the top of each web page, an Unordered List, using the "li" tags. Ok, but I just discovered that by using a new CSS statement, I can use custom bullets in the Body's li tag: list-style-image : url(bullet.gif) . Cool!!! So, I went about making a little dog bone .gif and used it for my bullet graphic halfway down the page. Voila! It worked. Voila! I suddenly have dog bones in my menu (which I don't want !), which also use the li tag. I only know two workarounds. 1) is to go back to the BAD practice of using the taboo in-line style="images/dogbone.gif" in each li within the body and NOT put the statement in the Header style section or 2) at least try to use CSS in the header by making a class like li.bone { list-style-image : bone} and then repeat class="bone" for each li in the body, which is only slightly shorter than just putting in the style="xxx" in the first place. So, how do we handle using different style properties for the same tag within the body? Perplexed, Mike 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 Ok so what is the css substitute for the valign tag? Thanks! Basically, what i'm trying to work out is if the following is possible. Code: .mainBodyColor { background-color : #FFFFFF ; color: #000000; } .mainBodyFont10pt { font-size: 10pt; <mainBodyColor> } .mainBodyFont14pt { font-size: 14pt; <mainBodyColor> } where <mainBodyColor> is a nested call to the style in some way. etc etc etc How do i go about nesting/including the mainBodyColor styling within the mainBodyFont10pt style? I know that the following doesn't work Code: <font class="mainBodyFont10pt" class="mainBodyColor "> Some text to go in here</font> What I'm trying to do is have in one place the colour and include it into many styles, so if i want to change the colour scheme of the site i just have to change it in one spot and i know that the whole site will change. Thanks in advance. Hi, I'm trying to create a PDF of my site, and I want it to look EXACTLY like the site. Right now the links are coming out blue (instead of the color I've defined in my CSS), and the fonts are not displaying according to what I've defined in the CSS. Someone once told me that I can overlay the pages with a transparent gif and that would preserve my original CSS definitions. But I can't get that to work. If I add a <div> to the html page, in an effort to overlay a transparent image over the entire page, and then I convert it to a PDF, then in the PDF the big transparent image just moves to the bottom, underneath the rest of the page. Thanks to anyone who can maybe help. Laura S. I understand how to write a print.css style sheet, but I am unclear on how to use it. I want to have a link on my page that says "Printer Friendly Version" that displays the printer friendly version and lets them hit the print button on the browser to print it. I think this is the most common way to print a web page, right? So I am displaying to the screen first and the printer if they hit the button. So how do I get the print.css formatting to display instead of the screen version? Obviously I want a single markup file for both purposes. Newbie question...I've always struggled with getting my links to show up right (hover styles, visited styles, etc.) In this case, I want my links to show up without an underline normally, but with an underline when hovered over. When they're visited, I don't want there to be any difference. I want them to show up normally. Right now I've got Code: .leftnavtext A:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #666666; text-decoration: none; } .leftnavtext A:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #666666; text-decoration: underline; } .leftnavtext A:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #666666; text-decoration: none; } .leftnavtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #666666; } And when I hover over a visited link, it doesn't get underlined. Any idea why? Thanks. This is the website I am working on: http://www.rookscommunications.com/projects/naturalne/index.html Everything is working fine, except the footer. When I view it in FireFox, I'm all set, but most likely most people will be using IE and that's where the problem is. Any thoughts on the bug? I've tied many different things. ALSO... to kill two birds with one stone. Could you peek at my javascript for random images...every now and then it selects a blank image and that's no good. Many Thanks is it possible to modify the look of a checkbox input field with CSS? (background, check color, border, etc) thanks, --Lone Hi for some reason some style are getting lost when ie is displaying the page i am developing, if somone could have a look that would be fantastic edited links because question has been answered Thanks everyone |