Ok, this might look like another stupid question, but I cant find answer.
See this fiddle:
Remove #Navigation in CSS declaration here:
#Navigation .stretch {
...
}
so it becomes:
.stretch {
...
}
Why browser (chrome Version 26.0.1410.64 m) ignore this rule?
I have tested also on firefox.
Probably it is not CSS priorities issue, because DevTools neither FireBug doesn't show it entirely. Not even overlined.
Thanks
EDIT: Many thanks guys! I couldn't see those crossed rules before, I was scrolling trough several times, in devTools and in fireBug and solving such a misserable "simple" problem for more than hour.
the rule defined only with .stretch selector is less specific than #navigator li, and it's not applied even if defined later on cascade. Thus display will be ever inline
It isn't ignored, it is overruled by #Navigation li because that selector is more specific. It sets display to inline (instead of your intended inline block).
You can easily spot this when you 'inspect element' in Chrome. It shows the styles of the element, and crosses out the overruled styles.
The issue is the #Navigation li has higher specificity than .stretch since it contains an id selector.
The reason you do not see it is because it is empty and you most likely select the previous element (on jsfiddle code).
If you select the empty li from firebug it shows it is overriden.
Related
I'm getting really confused here with my stylesheet. I have a lot of specific link styles in my sheet, and for some reason randomly one of them will get overridden by something else when I check the page with Chrome Dev Tools or Firebug. After fiddling around with !important cases and realizing that they are slowly making my code absolutely terrible, I've removed them all and am trying to figure out how to organize my link style to get all the right styles in the right places without them being overridden.
Basically I have like so:
.newlinks a {
some styling}
.dl a {
some styling}
.abclink a {
some styling}
And .newlinks is getting the "some styling" from ".abclink a". I'm really confused why this is happening if the class has a specific name and not just like "p" or something. Any explanation would be helpful! Thank you!
edit: here is the order of the html
<div class="newlinks"></div>
more of the page..
<div class="abclink"></div>
<div class="dl"></div>
I could post the longer code if necessary, I just thought it might be a general issue with my ordering or wording or something.
editedit: here it the relevant css/html in a jfiddle
http://jsfiddle.net/Ub6er/
as you can see in the jsfiddle, the link in "underrighttext" is getting the style from .dl :(
The reason underrighttext is being styled like dl is because of how you've declared your CSS for dl:
.dl a, a:active, a:visited {
...
}
This selector, which I copy-pasted from your JSFiddle, will apply to all a in dl, but also to all a:active and a:visited. Not just the a:active inside of dl!
You need to fix your selectors for the active and visited state to be like this:
.dl a, .dl a:active, .dl a:visited { ... }
Right now, your active and visited links are just being styled with whatever was the last style parsed by the browser.
I've updated your jsfiddle with the correct CSS selectors. It should work now as you expect it.
My question is really simple, just what i am trying to do is :hover, :after and :before , i want hover anf after to embed in same element, check out my css code:-
#sidebar .widget li a:before:hover, #sidebar .widget li a.active:before {
background-position: 65% 65.7%;
}
Here the element have an icon in :before which i cnt remove or modify, and also i want to have an hover effect on it...
Any solution for this, my console doesn't show the hovering effect?
Interesting question. If you're able to show us a working example we could probably be of more help.
However, in theory there's nothing wrong with what you're attempting to do (although not all browsers will like it: particularly IE8 and below).
The important thing to understand here is that :hover is a pseudo-class, whereas :before is a pseudo-element.
Here's a quick excerpt from the standard (with thanks to this answer previously on Stack Overflow):
Pseudo-classes are allowed anywhere in selectors while pseudo-elements
may only be appended after the last simple selector of the selector.
The mistake you're making is in your syntax: the order that you're appending them.
Try this instead:
#sidebar .widget li a:hover:before,
#sidebar .widget li a.active:before {
background-position: 65% 65.7%;
}
That should do as you wish. However this isn't going to give you great cross-browser coverage, it's not something that all browsers support of have implemented.
A better approach would be to:
reset the :before element to nothing (overwrite the styles you can't access);
use a non-repeated background image on the anchor instead (to display the image), and padding-left to give the indentation;
You can then switch the background-image in whatever fashion you see fit using :hover on the anchor in your CSS.
This will give you far better cross-browser compatibility.
I need to assign css that will get "Dusty Arlia" not to underline.
<p>
<span class="published">
By: Dusty Arlia<br />
Published on December 19, 2011<br />
Updated on January 26, 2012
</span>
</p>
I tried using CSS
span.published a:hover {text-decoration:none;}
but that didn't work, so I tried
.published a:hover {text-decoration:none;}
...and more. The CSS is in an external style sheet. I have placed these lines of CSS at the bottom and top of the stylesheet (I think it's at the bottom of the CSS page that gets rendered last). Anyways there is no CSS for the "published" class, but I do have CSS to underline my hyperlinks. I would like the hyperlink for my name not to have an underline. I CAN'T edit my HTML. I have hundreds of pages with this layout. I know I could possible do a "replace all" function if I have to edit the html, but I would like a CSS fix.
if you think the css declaration is being overridden by another stylesheet, you can try saying !important at the end of it, which would override that other style (if it itself didn't already have !important)
span.published a:hover {text-decoration:none !important;}
Your css should work as defined unless some other generic selector is redefining it. Try this:
span.published a:hover {text-decoration:none !important;}
Sounds like you've got some CSS somewhere that's taking precedence over the bit you're adding. If you've got Chrome you can use developer tools to look at all the rules affecting a particular element (right click -> inspect element, look under "Matched CSS rules"). You can do similar with Firebug in Firefox. This should give you the insight you need to fix the problem.
When all else fails, !important can be useful.
I think the problem is, that your a:hover rules are not applied, because your other a selectors have more weight (specifity) and therefore overwrite your a:hover selector.
Eric Meyer has a great article on that subject: http://meyerweb.com/eric/css/link-specificity.html
First of all, make sure your a: selectors have the following recommended order:
A:link
A:visited
A:hover
A:active
To remember this order I always use the LoVe/HAte mnemonic.
By the way, the :hover pseudo class only applies to links which are in hover state (i.e. the mouse is over). Did you also specify the no-underline rules for a:link or a?
If none of that helps you might also try the !important directive. However this should not be necessary at all, but it might help you to figure out where the fault lies.
I have a span in a li. According to both Firebug and Chrome inspector the span is inheriting list styles list-style-image, list-style-position, list-style-type. Which is not what I would expect given that a span is not a list element. Anyway, because of this (I assume) the span is not being positioned where I'd like it.
How can I stop this inheritance?
Thanks
According to the CSS specification, list-style properties only apply to elements with display:list-item. See here: http://www.w3.org/TR/CSS21/generate.html#lists
Therefore, the inherited list-style properties do not apply to the SPAN element, unless it has display:list-item set.
Look at Firebug and check which class is applying the styles to the span. Simply modify that style to fix your issue. Or put a screen grab of the Firebug inspect panel here, so we can have a look
I think your reading the information from Chrome and Firebug wrong or you've done a mistake in your CSS.
Normally, spans doesn't inherit any style related to list element automatically.
Paste your CSS, so we can help you.
You can't that is just the way CSS inheritance works,
You could negate the effects by adding this to the spans:
.className {
list-style-image:none;
list-style-position:inherit;
list-style-type:none;
}
Not that any of these should effect how the spans appear, more likely a rogue margin/padding, try using Eric Mayers CSSReset
basically im in a little dilemma... As usual, IE6 is messing up some tiny line of CSS.
All i need to fix everything is:
overflow:hidden;
Thats it. But, heres the problem. This is for a uni assigned piece of coursework and they say only 1 css file which must be valid. And no conditional comments :S so there goes my plan. Is there any way to target IE6 ONLY (not 7+ etc.) and still maintain a valid CSS file?
PS: before any of you say, well you should rethink your CSS etc, I have, its for a CSS dropdown menu and a nested element is stretching my link container so i need overflow set to hidden. Only IE6 needs this :S
EDIT MY SOLUTION:
html>body .allbrowsersceptIE6 {
overflow:visible;
}
.onlyIE6 {
overflow:hidden;
}
It works because all other browsers use the first value and ignore the second one unless the second has !important on it :D
If it comes down to using hacks as your only option: http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml
So, you want to apply that rule to #menu or whatever:
* html #menu { overflow: hidden; }