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.
Related
How do I fix the conflict I'm running into when trying to style the UL in this blog post with check mark images. There's a style set up in the skin that is taking precedence over my style I've applied to the ul. Not sure how to over-ride it. I've tried every variation I can think of, and I'm sure it's just a basic misunderstanding of how things cascade. Can you help?
The post is here: http://alexisexhibits.com/trade-show-preparation-checklist
The CSS I have for the style is:
.checklist {
list-style-image: url(http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg) !important;
}
I know, the !important declaration is hackery, but oftentimes I find it necessary in dealing with CMS stuff, since the CSS is so piled on top of each other. In this case, it doesn't seem to help, but I left it.
The offending rule that allows the checks to show up if I disable it in Chrome Dev inspector is:
.shortcodes ul li {
list-style: disc;
}
but I'm hesitant to change that as I don't want all ul li to change, just this specific one.
What's the right way to fix this? Any tips you can give on how to suss this sort of thing out for myself in the future?
list-style-image should be applied to the <li> not the <ul>
Like this:
.checklist li{
list-style-image: url('http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg') !important;
}
EDIT #3, and finall:
Ok, so i actually made it happend. Idiotically, however. In case someone will need the same, i'll post a solution here:
What i've did is, basically defined the global style as below:
a:link,a:visited
{
color:#000000;
text-decoration:none;
}
a:hover,a:active
{
color:#000000;
text-decoration:none;
}
That was the very basic parameters i could insert at the global style. The next move is makin' the same inside the link and customize it for ur need as like as u want, hover, make sure u're doin' the copy of that customization of ur div, and insert the :hover thing into it, as following:
.some-div-cutomization
{
text-decoration:none!important;
blabla
}
.some-div-cutomization:hover
{
text-decoration:none!important;
blabla
edit if needed the hover function
}
That's about it. Have fun :)
I've got some source links, that i can't touch, even to insert the class element, so i would be able to change the style of the links, but i do need somehow to change they style.
So, let's say tag of this link would be [link][/link], so what i did is, put inside it div element with full customization and it's worked, however there's two moments:
1) I don't really know if it's may work properly on all browsers, 'cause i need it cross-browser version actually.
2) i can't get rid of the text-decoration line. i've tried text-decoration with none, and even mad a copy style of that specific div with :hover and put inside it text-decoration none, and still, it's not working.
Also, if there's some another trick to avoid such a thing, please share.
EDIT:
I've tried all below, didn't work as i wanted to. BUT, i've made it, but with very, very ugly coding, and i'm not sure it's goin' to work at all browsers:
I've inserted the link-element with underline none inside the one() i can't touch, so now it's link inside another link, witch very ugly.
[link-i-cant-touch]<div class="style_test"><a id="no-textdecoration" href="#">somecooltext</a></div>[/link-i-cant-touch]
.style_test
{
text-decoration:none!important;
font-family: 'qsc';
text-align:left;
padding-top:0px;
color:#000000;
}
#no-textdecoration{
text-decoration:none!important;
color:#000000;
}
#no-textdecoration:hover{
text-decoration:none!important;
color:#1982d1;
}
EDIT Num2
That didn't work as well, because the link is changed to the second one, so it's redirect for "#"... :/
Make sure you target the a tag for the text-decoration, rather than applying it to the div
.my-div-class a { text-decoration: none; }
I don't know what you did wrong, as you haven't posted any code.
But this is the correct way of removing text-decoration on links.
HTML:
Link with text decoration
<a id="no-textdecoration" href="#">Link without text decoration</a>
CSS:
#no-textdecoration {
text-decoration:none;
}
Output: (In image format)
JSFiddle demo: Removing text-decoration from a link
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.
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 custom cursor for an image map with a lot of hotspots. My cursor works fine in Firefox and Internet Explorer, but Safari returns the default one.
I used code found on other websites. My directory structure is:
index.php > css/main.css > css/images/pencil.cur
Here is my implementation (please note I need the same custom cursor for both normal and a, a:hover and a:visited states:
#gameScreen area, #gameScreen .wrapper, #gameScreen .wrapper a:hover, #gameScreen .wrapper a:visited {
cursor: url("images/rcspencil.cur"),url("css/images/rcspencil.cur"),default;
}
Any ideas?
Here's the most browser-compatible syntax I can think of. There might be a better one with browser hacks but I'd ignore it.
cursor: url(cursor.cur),url(cursor/cursor.cur),default;
I wouldn't think the quotations would prevent it from working, but try it without them. The only other thing I can think of is that your selectors are wrong, like the selectors you've got listed don't include the thing you're hovering over.