|
CSS - Unable To Override Class Specificity
Hello,
I'm an amateur with CSS, and would appreciate if you could take some time to help me out! I have a CSS rule to render all bullets in my page with a different icon, including on the sidebars. But there's one single list (a secondary navigation bar) where I do not want any bullets. I am trying to override it, but am unable to. I'd be glad if you could review my CSS and tell me where I'm going wrong. Thanks a Ton! Code:
.sidebar li {
border-top:dashed #cccccc 1px;
}
.sidebar ul li {
padding:0 0 0 1.5em;
list-style-type: none;
list-style-image: none;
background-image: url(img/menu-leaf.gif);
background-repeat:no-repeat;
background-position: 0.3em 0.6em;
}
This is my navigation block Code:
#navigation-secondary a {
display:block;
color:#ffffff;
}
#navigation-secondary a:hover {
background-color:#369; /* to change color when hovered over */
}
The following method to override it doesn't work Code:
#navigation-secondary , #navigation-secondary ul,
#navigation-secondary ul li, #navigation-secondary a {
list-style-type:none;
list-style:none;
}
ul.secondary-links li, ul.secondary-links ul li {
background-image:none;
border-top: none;
}
I should mention, the top border has been overridden, but not the background image. My html code snippet (rendered via php) is here Code:
<div class="sidebar" id="sidebar-left">
<div id="navigation-secondary">
<ul class="links secondary-links">
<li class="menu-138 first"><a title="Link1 site" href="/link1">Link1</a></li>
<li class="menu-139"><a title="Link2 site" href="/link1">Link2</a></li>
<li class="menu-140 last"><a title="Link3 page" href="/link1">Link3</a></li>
</ul>
<div style="clear: both;"/>
</div>
I'd be glad if you could help me out. Thanks! Similar TutorialsI was playing around with CSS transitions, and I came across I problem I haven't been able to figure out. I have my a:links set up to fade to a different color and rise by 3 pixels when hovered over. But if the link is also an image, I want the image opacity to fade in without being raised up the 3 pixels. I would have thought simply adding "bottom: 0" to a img:hover would negate the raising, but apparently not. I'm not an expert in CSS specificity, but it seems like it's not a specificity issue since a img:hover is slightly more specific than a:hover. What can I do to prevent the image links from rising the 3 pixels on hover? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
body {
background: #c44032;
color: #f4f1de;
font-size: 20px;
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
}
a:link, a:visited {
color: black;
position: relative;
-webkit-transition: color .25s ease-out .1s, bottom .25s ease-out .1s;
transition: color .25s ease-out .1s, bottom .25s ease-out .1s;
}
a:hover {
color: #ff6a5a;
position: relative;
bottom: 3px;
-webkit-transition: color .15s ease-out, bottom .15s ease-out;
transition: color .15s ease-out, bottom .15s ease-out;
}
a:link img {
opacity: .5;
border: 1px solid #c44032;
padding: 3px;
-webkit-transition: opacity .25s ease-out .1s;
transition: opacity .25s ease-out .1s;
}
a:link img:hover {
opacity: 1;
bottom: 0;
border: 3px solid white;
padding: 1px;
-webkit-transition: opacity .15s ease-out ;
transition: opacity .15s ease-out;
}
</style>
</head>
<body>
<p>Here is a <a href="#">text link.</a></p>
<a href="#"><img src="http://www.toprival.com/temp/balloon.jpg" height="64" width="64" border="0"></a>
<a href="#"><img src="http://www.toprival.com/temp/cat.jpg" height="64" width="64" border="0"></a>
<a href="#"><img src="http://www.toprival.com/temp/bee.jpg" height="64" width="64" border="0"></a>
</body>
</html>
So, I have my CSS, works wonderfully (well, as expected) in FF2. Unfortunately, IE7, Safari 3, and Opera 9 all seem to ignore the whole stylesheet. UNLESS! Any one of the properties in the sheet is declared !important. Then, it applies the entire sheet the way I expect. What gives? The way I understand (understood?) specificity, the !important flag should only effect the specific line it's applied to, not the entire sheet. Right? I'm really confused. The stylesheet is included last, so all else being equal, should cascade properly and override the other sheets. Any ideas? I'm just going to use the !important for now, but I really don't like that. MPEDrummer I have this navigation menu I made for my online catalog that is comprised of some 300+ links that display in 3 levels of CSS-controlled menues. A root UL and 2 levels of subULs. It's located here . The menues all work fine except for a small area where the first submenu overlaps the root menu. Illustration . The problem is in mousing from one link in the list in the first submenu to the next link in the same list. (below or above) As the mouse pointer moves between the links, the menu changes to the sublist for the next link in the root menu instead of the next link in the already open submenu. The second level submenu (sub-submenu) doesn't have any problem. Links in the opened submenu can be moved between successfully if the pointer is moved out to an area that isn't shared with the root menu. Making any sense? This is HTML for the basic structu HTML Code: Original - HTML Code <table><tr> <td class="linktd"> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Category</a> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Subcategory</a> <ul class="folderul"> <li class="nonfolderli"><a class="submenua" href="http://www.mydomain.com">Subsubcategory</a> </li> </ul> </li> </ul> </li> </ul> </td> </tr></table> <table><tr> <td class="linktd"> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Category</a> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Subcategory</a> <ul class="folderul"> <li class="nonfolderli"><a class="submenua" href="http://www.mydomain.com">Subsubcategory</a> </li> </ul> </li> </ul> </li> </ul> </td> </tr></table> These are the two CSS lines that are supposed to control the displays. css Code: Original - css Code ul.folderul ul.folderul, li.folderli:hover ul.folderul ul.folderul { display: none } li.folderli:hover ul.folderul, li.folderli:hover li.folderli:hover ul.folderul { display: block }
ul.folderul ul.folderul, li.folderli:hover ul.folderul ul.folderul { display: none }
Maybe my understanding is deficent, but I haven't been able to find the problem and I'm hoping someone of you can point it out for me, please? Hi all, I have been teaching myself CSS for a website I am making, which has all been running smoothly until an issue today. Basically the issue is with a .class DIV nested inside a #id DIV.. Code:
<div id="wrap">
......
<p>...</p>
.......
<div class="info_box">
........
<p>.....</p>
......
</div>
.......
</div>
Using CSS, i set the font color (among other things) for <p> to be different in the "wrap" id and "info_box" class.... and I was shocked to find that the styling I had written for the class was ignored, and it was using all the styling specified for the ID. After searching, I found that this is because of specificity, in which the #id has a higher specificity. Although I now know the cause, i am not sure what I should do? I would like to be able to keep "info_box" as a .class, because I would use it more than once on a page. The only solution I can think of is to make the "wrap" a .class, but this does not seem logical, as I only use it once. Please Help! Hi, I'm currently designing a Wordpress skin for someone and trying to style the navigation using CSS. Given that Wordpress is so popular, I expect that someone has encountered this before - but I can't find anything about this particular problem. Basically, I'm having problems achieving the correct precedence in the CSS cascade for certain elements of my page (navigation) design. In one part of the CSS I've had to use !important to get it to behave appropriately, but then I have another part which I need to be able to denote as "very important" but I don't think this is possible. I get the feeling that I can probably do this without !important since I'm aware that it is abusing its purpose a bit (i.e. accessibility?) and instead I could do it according to the selector's specificity if I understood it better: http://www.w3.org/TR/REC-CSS2/casca...cascading-order Here's a HTML snippet of what I have in the navigation: html4strict Code: Original - html4strict Code <div id="sidebar"> <ul> <li class="page_item current_page_item"> <a title="Home" href="home.php">Home</a> <ul> <li class="page_item"> <a title="Directors" href="home.php?page_id=12">Directors</a> </li> </ul> </li> <li class="page_item"><a title="News" href="home.php?page_id=3">News</a> </li> </ul> </div>
I'm then using the following CSS to attempt to style this part: css Code: Original - css Code #sidebar { float: left; width: 149px; padding: 1em 0; } #sidebar ul { list-style: none; } #sidebar ul li { margin: 0.4em 0.8em; padding: 1px; } #sidebar ul li a { font-size: 1.5em; font-weight: 500; padding: 0.3em; text-decoration: none; color: #000; background: #FFFACD; display: block; border: 1px solid blue; } #sidebar ul li a:hover { color: #bb2a2a; } #sidebar ul li ul li { display: none; } #sidebar ul li.current_page_item ul li, #sidebar ul li.current_page_parent ul li { /* sub-menu item */ display: inline; padding: 0; margin: 0; border: none; } #sidebar ul li.current_page_item, #sidebar ul li.current_page_parent { border: 1px solid green; } #sidebar ul li.current_page_item ul li a, #sidebar ul li.current_page_parent ul li a { /* sub-menu item link */ font-size: 1.2em; padding: 0.1em 0 0.2em 17px; background: #FFFACD url(images/sub-dot.gif) no-repeat left; } #sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item { color: #bb2a2a !important; border: none !important; } .current_page_item ul li a { color: #000 !important; border: none !important; } #sidebar ul li.current_page_parent ul li a, .current_page_parent a { border: none !important; } #sidebar ul li.current_page_item ul li a:hover, #sidebar ul li.current_page_parent a:hover { color: #bb2a2a; border: none !important; }
Using "View Formatted Source" in FF I'm finding that the color defined in ".current_page_item ul li a" is over-ruled by "#sidebar ul li.current_page_item a, #sidebar ul li.current_page_parent ul li a.current_page_item". As you can perhaps tell, the current_page_item class is set on the list item that matches the current page, and if the current page is within a sub-section (i.e. it has a parent), current_page_parent will be set to the parent list item. This gives me a navigation such as: > Home >> Directors If we're on the Home page (as in example code above), I want that to have the red colored text, but Directors to be black. If Directors is the current page, I want that to be red, and Home to be black. Basically anything that isn't the current page should be black... At the moment (because .current_page_item ul li a doesn't seem to work) I'm getting red text for Home and Directors when on the Home page... I want Directors to be left black in this situation. N.B. It's more complicated than above because I also want to do some styling with borders on the top level list items (well, the a element within), but if someone can point out where I'm going wrong with the above I think I should be able to sort the rest out... Thanks in advance - please let me know if you need more details! I'm new to CSS, and I've been working with Wordpress. While learning CSS, I'm experimenting with various things in HTML, Php, and Javascript. I'm often finding myself wanting to override the CSS settings implemented by Wordpress. However, I don't want the settings overridden for every page - just the particular one I'm working on. In other cases, I only want the CSS overridden for a few lines of code (such as font type). This kind of problem is making me think writing customized CSS/Php is worth exploring. I spend twenty minutes coding something to spend an hour trying to integrate it with Wordpress. A quick question about how to over-ride style on the <a> tag: I have the following css: Code:
#menu a {
display:block;
padding:8px 12px;
background:#5a5152 url(images/seperator.gif) bottom right no-repeat;
color:#ccc;
text-decoration:none;
}
#menu a:hover {
background:#2580a2 url(images/hover.gif) bottom center no-repeat;
color:#fff;
}
I want to override this for the last menu item to get rid of the separator on the last menu item on the right - but want to keep everything else. I have tried the following which does what I want but I lose the hover effect: Code: <a style="clear:both; display:block; padding:8px 12px; background:#5a5152 bottom right no-repeat; color:#ccc; text-decoration:none;" href="contact.php" title="Contact Us">CONTACT US</a> How do I add in the hover to the above override or is there abetter way to do this? Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ...... Code: <div style="margin:0px;padding:25px 30px;text-align:left;"> <img style="text-align:center;" src="..."> </div> I have 2 css files. One main one that I am using Code: input[type="text"], select
{
background: #FFF !important;
}
I use that mainly for Firefox as without it the form fields are yellow. but I would like to override that have have one form field on this one page stick out and have it like this. Code: .CCfield {
color: Black;
background: #FFFF66;
}
Is this doable? How can I override it for this one field? Thanks I have setup a style for the <A> Tag which will be used throughout the site. Code: a {
cursor:pointer;
color: #8E9300;
text-decoration: underline;
}
I have one div on one of the pages that contains some links, on this one div I would like to redefine the <a> tag or override it but not affect the <a> tags on the rest of the site. How can I do this? Thanks. Is there a way to get the style sheet to let the inner tag to override the parent's tag? Seem that only one webpage need that while many other doesn't. I'll post the code below, take a look at the text-align:left ...... Code: <div style="margin:0px;padding:25px 30px;text-align:left;"> <img style="text-align:center;" src="..."> </div> I have the following in my css: Code:
input, textarea, select {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #ECEEF1;
border: 1px solid #505355;
color: #505355;
margin: 3px;
font-size: 10px;
}
input:hover, textarea:hover, select:hover {
background-color: #FFE7DB;
border: 1px solid #D64800;
color: #D64800;
}
and then I have something like this on my page: <input name="rate" type="radio" value=6 onclick="this.form.submit()" class="rateradio" /> How can I make the class selector 'rateradio' to override the background-color and border options in the input and input:hover css? I have some inputs wich I want that css to work but some inputs I want to override the background color and the border, how can I do it? I have a CSS that manages my site, but I've got a list of links that are dynamicly created with php/mysql. I have two lists that I would like to use non-CSS colors for their links. Is there a way to override the CSS to force certain colors on the links? I've tried using the normal <p> or style settings, but the main links portion of the CSS always takes precedence and I can't seem to make it work for me. A little background for you...the lists are as follows: 1 - a list of currently open jobs in the company 2 - a list of all jobs in the company Both lists are also links to the job descriptions. List 1 is created based on whether the database has the job flagged as open, so its never static. List 2 is not static either because it lists the jobs in the database. Hi there. I have a print style that won't display images when printing.. img {display: none;} I have a certain page where I need the print style sheet but will like the images to print. How can I override the print style for the images? Hi can anyone tell me if I can override embedded CSS with a linked stylesheet? Here is what I want to change: Code: <col width="40%" style="background-color:#EEEEEE;text-align:left;"> I want to change the background-color without changing anything in the above mentioned code, this means I want to change it with an extern stylesheet. I made a few tables using the old HTML method o setting table attributes. However I later discovered css for tables and wrote the following and it works well with some new tables i have made: Code: table
{
border-collapse: collapse;
border-spacing: 0px;
}
Now all my old tables follow the above style (quite naturally). How can I override the css styles for the older tables? how do i set border-spacing to its default value? thanks Is there a way to override CSS padding to use cellpadding instead or can inheritance be prevented? I have a CMS and I want editors to still be able to use the cellpadding attribute rather than make a class for each desired padding. I am not able to set a defining ID or class on the table as it's generated with our CMS. The relevant tables are contained in a defined parent class. Code:
TD{ padding: 0px; }
.custom TD{ /*padding: ignore;*/ }
Code:
<span class="custom">
<table cellpadding="5">
...
</table>
<span>
Hi, I have a HTML page linking to a CSS file in the header. My main table is defined using class="formBody". This includes: Code: table.formBody td {
border-width: 1px 1px 1px 1px;
padding: 5px 5px 5px 5px;
border-style: solid solid solid solid;
border-color: black black black black;
background-color: white;
-moz-border-radius: 0px 0px 0px 0px;
}
I need to override this on certain cells, so that a SINGLE certain cell will not have any borders (these will be cells on the bottom row, so the table will have the appearance of having half of its' actual width on the bottom row). Any ideas? I tried explicitly setting border="0" in the <td> tag and also defining a new class called "noborder" with border set to none, and then using <td class="noborder"> but neither of these work. essentially, what I want, is a table that looks like: Code:
________________________
| | | |
------------------------
|________|
Any suggestions on how to do this? Hi, I'm wondering if it is possible to override style settings in an external html document. I'm using the <--#include file command to include a html file. I don't want to modify the html file, because people (here at work) are making documents in word9 and save it to html. The major problem is that the <hr> line is too long and so is the text, so it don't fit on our website, at this point these documents are opened in a new window, but it would be nicer to intergrate them into our site. thanks -Dan So I have an ad that is being served via an IFRAME. The src of the iframe has a few places where I can change colors as the css is dynamic based on the query string. There is one css element that is not supported with the user option to change the color and I want to try and override it. Obviously inline styles override embedded styles, but the element I need to override is span.price { color:#990000; } and that is within the source of the iframe. Is there a way to override this? |
|||||||