|
CSS - Weird Specificity Problem
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 Similar TutorialsHi, 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 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>
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! 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! So I have the following website: http://www.itmustbecollege.com/ and it has a problem SOMEWHERE that I can't seem to figure out. The problem is that all of my pages now have a big "space" on the far right, forcing a huge horizontal size. I have tried to debug but can't seem to find out the exact problem. It is weird, because certain parts of the website have a "width: 100%" yet ENDS at the correct look, yet there is still that huge space! Hey guys, First post here. I've scoured the web for answers, searched this forum, and visited many CSS sites (alistapart, maxdesign.com.au, positioniseverything, htmldog, etc.) and haven't seen a problem like this. I'm learning CSS as we speak (or more correctly, as I type), and here's the issue. I have a space between my #header and #page. I can't get rid of it unless I put a border around the #page. I've posted four screens here so you can see what's going on in Safari and Firefox (the two browsers I use). #1 is what the site looks like now (as the code is below). #2 is with the #header removed, #3 is with the #header removed and a 1px border put around the #page, and #4 is with the #header there and the #page has a 1px border. It seems to me that the #page has a top margin, and I've tried margin-top: 0px; and tons of other combos, but I can't get that space to go away unless I put a border around #page. Here's my css: Code: /* basic elements */
body {
font: 8pt/16pt georgia;
color: #000000;
background: #AEAEAE url(images/butterflybg.gif) no-repeat top center;
}
p {
font: 8pt/16pt georgia;
margin-top: 0px;
text-align: justify;
}
h1 {
font: italic bold 14pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
h2 {
font: normal bold 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
h3 {
font: normal 12pt georgia;
letter-spacing: 1px;
margin-bottom: 0px;
color: #000000;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #D4CDDC;
}
a:hover, a:active {
text-decoration: underline;
color: #9685BA;
}
/* divs */
#header {
background: url(images/2006_Header.png) no-repeat;
width: 697px;
height: 127px;
padding: 0px;
margin: 0px auto;
}
#page {
width: 697px;
background: url(images/2006_WideExt.png) repeat-y center;
margin: 0px auto;
padding: 0px;
}
#nav {
background: url(images/2006_LNav.png) no-repeat left;
padding: 0px;
margin: 0px;
width: 175px;
height: 306px;
float: left;
}
#content {
background: none transparent;
margin-top: 0px;
}
#text {
}
#footer {
text-align: center;
}
And my 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" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> </div> <div id="page"> <div id="nav"> </div> <div id="content"> <div id="text"> <p>put text here</p> </div> <div id="footer"> <a href="http://devshed.com" title="Forums">xhtml</a> </div> </div> </div> </body> </html> Am I overlooking something simple? Hi, I have developed a page using only CSS with html. That means I have two files at the moment, layout.css and default.html. When I test it on my computer it works fine on IE6.0, Firefox, Netscape and Opera. I then decided to give it a go on the live internet. I created an account with geocities and uploaded all the required files. Now, when I loaded the page from IE6.0 the website is broken. Which means it is not displaying as it was when I was loading it from my computer. However Firefox and Opera are loading it fine. For me this is just weird, since if I download the html from the page (right click, view source), save it on my pc, and load it again from my computer (locally), it works fine on IE6.0 again. I know how I could solve this problem, however should I try solving this problem if my page is displaying fine on my computer (on the three browsers) but incorrectly on geocities? Ps: I am only using geocities for testing. Regards, Sim085 I'm having a slight problem with the appearance of the border for the DIV below the navigation bar. Firefox runs the border through the entire width of the DIV, but IE stops the bottom border as soon as the last <LI> is reached.. Any ideas guys? Thanks in advance. http://www.manliusvillage.org/test/index.html The related CSS is below: Code:
#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
* html #navigation a {width:1%;}
#navigation .selected,#navigation a:hover{
background:#80b0da;
color:#ffffff;
text-decoration:none;
}
#sublinks{
float:left;
height:1.4em;
line-height:1.4em;
width:758px;
margin:0 1px;
background:#578bb8;
color:#ffffff;
}
#sublinks li{
float:left;
list-style-type:none;
white-space:nowrap;
border-right:1px solid #578bb8;
}
#sublinks li a{
display:block;
padding:0 5px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}
* html #sublinks a {width:1%;}
#sublinks .selected,#sublinks a:hover{
color:#000000;
text-decoration:none;
}
Hi guys, I'm at the end of my rope about this. I have a three-column layout which is behaving fine in mozilla. IE, as usual, is causing problems. I've given the troublesome column a background color of yellow to emphasize the problem. There's a right padding sort of thing going on that's forcing the right-most column out of its place; might be easier if you just look at it: http://www.teamsnowvalley.com/home.php (still a work in progress. just sayin) the css behind the column: #content .left { float:left; padding-right:9px; background:yellow; width:179px; voice-family: "\"}\""; voice-family:inherit } html>body #content .left { width: 179px; } Can anyone tell what i'm doing wrong? Many thanks, M Hey guys, I was wondering if you can help me out with something. On my blog I couldn't figure out how to get the page to align to the top, so I had to use a negative margin on the header. Well now it's fine in firefox, but looks all botched in IE. What a surprise, right? Can you take a look at help me figure out what I need to fix? www.illuminatedmind.net Thanks! Hello. I've got a header div that my banner is in, below that, another div called "welcome". The background-color I set on the welcome div is somehow appearing at the very top of the container, right above my banner... I've tried adding a height to it but that just makes it worse. Not sure what else to do... The site is LeetWebmasters. My css: Code: p {
margin:0px;
padding:0px;
color:#006699;
line-height:20px;
}
h2 {
padding:0px;
margin:0px;
font-size:24px;
color:#006699;
font-weight:100;
border-bottom:1px dotted #ccc;
}
h3 {
padding:0px;
margin:0px;
color:#006699;
color:#006699;
}
html,body {
padding:0px;
margin:0px;
background-image:url(main-bg.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#container {
margin: 0 auto;
width: 922px;
}
#header {
width: 922px;
float: left;
height: 130px;
margin: 10px 0px 5px 0px;
}
#leftcolumn {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 5px 5px 0px;
padding: 10px;
height: 900px;
width: 195px;
float: left;
}
#welcome {
text-align:center;
padding:5px;
background:#EAEAEA;
color:#006699;
}
#latest_tuts {
color:#006699;
}
#latest_tuts h3 {
border-bottom:1px dotted #ccc;
}
#who_online h3 {
border-bottom:1px dotted #ccc;
}
#search {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#newsletter {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#welcome a:link {
color:#0066CC;
}
#content {
color: #333;
margin: 0px 5px 5px 0px;
padding: 10px;
width: 456px;
display: inline;
float:left;
background-image:url(content_gradient.jpg);
}
#content a:link, a:visited {
color:#0066CC;
}
#rightcolumn {
color: #333;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 0px 5px 0px;
padding: 10px;
height: 900px;
width: 196px;
float: left;
}
#footer {
text-align:center;
width: 900px;
clear: both;
color: #878787;
border: 1px solid #ccc;
margin: 0px 0px 10px 0px;
padding: 10px;
height:35px;
font-size:12px;
background-image:url(footer_gradient.jpg);
}
#footer a:link {
color:#0066CC;
text-decoration:none;
}
#footer a:visited {
color:#0066CC;
text-decoration:none;
}
#footer a:hover {
color:#006699;
}
#menu3 {
width: 200px;
border:1px solid #BCD2E6;
border-style: solid solid none solid;
}
#menu3 li a {
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #8BADCF;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu3 li {
list-style:none;
}
#menu3 ul {
padding-top:0px;
margin-top:0px;
padding-left:0px;
margin-left:0px;
margin-bottom:0px;
}
#description {
font-size:10px;
color:#006699;
}
Hi there! Please have a look here. As you can see there's a scrolling box with a overflow:auto propriety set. All works well either in Firefox and Internet Explorer, but I had to use a hack to made it work with IE: Code:
#content {
position: relative;
margin-left: auto;
margin-right: auto;
padding-right: 25px;
padding-left: 25px;
font-family: Verdana,Arial,helvetica, sans-serif;
font-size: 11px;
text-align: justify;
overflow: auto;
width: 543px;
height: 225px;
background-image: url(img/centerblank.jpg);
background-repeat: no-repeat;
_background-attachment: fixed;
}
FF doesn't read the _background-attachment so all works fine.. problem is, this way the css code is no w3c compliant. Any ideas? Hello, First off, if you know of a way to make round cornered boxes (that stretch hor and vert) in css using less than 6 divs, please be my guest. Now the problem I'm having is IE specific, when i load up the IE DOM inspector, i see that all the divs before the bottomleft div have a height that too big. i don't know what this could be from because i never set a height attribute for any of the divs. http://72.29.74.19/~majdkgf/tangerine/ NOTE: this doesn't happen to the last box hey, i have a page that includes several flash files.. since its a translation company i have made a page in Russian but the upper flash menu refuses to appear in firefox but displays in internet explorer.. other flash files appear.. and i don't know if its related but in order to make the Russian appear correctly i had to save the php page as utf-8 with no BOM... appreciate any help since i am clueless as to this weird problem here is the page address : bit.ly/4SqdNw sorry new in the forums could not link it but copy and pase I changed over all my CSS flyout menus from the CSSPlay method to the whatever:hover method. It's working great. I've just got a minor, but annoying, problem that occurs in IE (6 & 7 tested). URL 1 URL 2 Check out the left-side navigation menus on those two pages. Obviously they're different files, but the code is exactly the same for the menus (except the path for the links, of course). The pages even use the same stylesheet. So why, then, does the menu flutter when you hover over the "Our Dogs" <li> on the base level menu, but not move a pixel on the /dogs/ level menu? Here's the path to the stylesheet: Stylesheet 1 The site is question is: http:// w ww.stolen-bikes.org/index4.php The CSS is: http:// w ww.stolen-bikes.org/css/non_ie.css Basically I want the sidebar (blue div), to line up on the side as it is but up flush against the top as you would expect a floated content area with a floated sidebar next to it. If I take out the #sidebar in the css it DOES align right up at the top as I want it to. The minute you as a float:left or width or anything it jumps down to the end of the #masthead div and beginning of the #content div. Im pretty sure I have everything lined up correctly I just cant figure out why this is doing that! Please help! Hi fowks, Normally I'm able to solve CSS issues relatively easily, well with some experimentation at least. However, this one has really got me stumped. Basically, I'm developing a menu for a weblication which is based on the famous Suckerfish menus. Everything works ok in IE and Mozilla when in an Left-to-Right (LTR) environment, but it doesn't work quite so well when the direction is flipped to RTL. IE copes fine, but FF doesn't. The menu works itself, but the viewport doubles in size and scrolls off to the right, even though there are no elements there. Anyone got an idea as to what could be doing this? I've included the relevant files for you to trial. Thanks for having a look. Hope you can help. It's driving me nuts. Cheers, John omg I am going to fall from the window with this stupid language lol... Until yesterday, I was designing properly my site, using css and linking it in my php properly andddddddd.......... today I noticed a weird result. When I change something in css, I can see no result in the site. Even if I delete code from css, the site seems to be cached! I use Mozilla, I tried to clean cache, the css is properly linked... whats going on now Have anyone else faced a similar problem?... Hey everyone, I have an odd problem. CSS Code: Original - CSS Code ul#admin_menu li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }
ul#admin_menu li.am_item{
This works... CSS Code: Original - CSS Code li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }
li.am_item{
This doesn't work... I don't understand why. What gave it away was the display:inline; The first one displays them inline, the second displays them block and they don't get their width. |
|||||||