|
CSS - Conditional Statement In Style's
can anyone tell me what is this..mean by
Quote: Similar TutorialsI 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 header.inc file and a footer.inc file that is called to each new file that I create. The header.inc file holds all the javascripts as well as calls the css, etc. It also begins the body and the footer.inc file closes the body. In other words in each new file that I create I have a php statement calling the header, and at the bottom of the file another statement that calls the footer. So each new file is really only part of the body as the title and head are found in the header.inc file. What I would like to do is be able to change the background color of the body of a new file if I choose to do so. But obviously because each new file is only part of the body I cannot put a css style in the new file. Is there any way of writing a php statement that I can place in a new file that would allow me to change the background-color of let's say #faunabody for that particular page??. Hope this is clear...thanks alot I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! Hey! 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. 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 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; }
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;
}
*/
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 on my site I have a list with the UL Class of threads. I am not good with CSS at all I have this Code:
#threads {
padding:0;
margin:0;
}
#threads li {
list-style:none;
border-bottom:1px dotted #ccc;
display:block;
padding:2px 0px 2px 13px;
background:url(images/sub.png) no-repeat 0 0px;
}
not doing what I want, my site is mypricesavings(dot)com you can see the list on the homepage under Recent Activity, I'd like to make it so that the avatars line up on top of each other and a line between each one like the featured section located on this site, however, without the scrolling. http://demo.colorlabsproject.com/?theme=arthemia-premium thank you for attempting I did a web page for a company and it looks fine in ie7 where I tested it. The problem is when viewed in IE6 its like it ignores the sizes I put in. The box appears too big in IE6 and is the propr size in IE7. Is there any way to fix it so it would look the same in IE6 as IE7? Hello, In the css below, why I can't set it on the same time? Code:
background: #FFF url(../images/main_bottom.gif) no-repeat bottom ;
background: #FFF url(../images/main_top.gif) no-repeat top ;
How would you go about creating a navbar like the one Red cross uses on the left side for generic website mapping? Red Cross Example Is this pure css with dual images? Or is this done with some effect with other forms of CSS (or even DHTML?) I was reading a tutorial were they always style both <tr> & <td> with the same thing... Is this needed? Or do you just need to style <tr>? Code:
table.navigation tbody tr.odd {
background: #252525;
color: #fff;
}
table.navigation tbody tr.odd td {
background: #252525;
color: #fff;
}
I want to apply this style to a Table TD cell: Code: border-bottom: 1px solid #D2D7DD; It works fine in firefox but not IE, as with many things. Any get-around for this, something that IE would be happy with? Thanks. So for an example: if I have this in the html: Code: <div id="box" style="width:100px;">123</div> and this is the CSS Code: #box{width: 200px;}
What is the outcome? Will it always use the css or always use the style element? Or does it depend? |
|||||||