I can not figure out why the below css will not do what it appears to do, if anyone can explain why or help show what I am doing wrong, would greatly appreciate.
<style>
.button-blue a:link{
text-decoration: underline overline; color: red!;
background: #55a4f2!;
padding: 12px 24px!;
-webkit-border-radius: 6px!;
-moz-border-radius: 6px!;
border-radius: 6px!;
color: white!;
font-size: 16px!;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif!;
text-decoration: none!;
vertical-align: middle!;
font-weight:bold!;
}
.button-blue a:hover {
background: #1071d1;
color: #fff;
}
.button-blue a:active {
background: #3e779d;
}
</style>
<div class="button-blue">
Post Comment
</div>
<span class="button-blue">
Post Comment
</span>
http://jsbin.com/etijiz
It doesn't do what you expect it to do because you have syntax errors. You appear to have used ! instead of !important. If you remove the exclamation marks it will look a little more like you expected it to.
Generally it is a bad idea to use !important and if you find yourself using it you probably need to refactor something. It would be a good idea to learn more about how CSS selector specificity works.
Basically it's because you're applying the style to the span/div and not the anchor and a span/div doesn't have an a.hover etc etc.
A quick test by removing the .blue-button from each of the a: style definitions shows it working more correctly.
Here's the fiddle I set up based on your sample.
http://jsfiddle.net/tS9vt/
Added a comment with a new link showing better behaviour without the exclamation marks.
Edit: here's that link http://jsfiddle.net/LuaAv/
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Back to basics, I have neglected my CSS skills thus my CSS is a bit (very) rusty I'm working on a wordpress theme. The style.css themes default H2 style is coded as follows:
h2 {
font-size:1.7em;
background:url(images/heading_bg.gif) repeat top;
color: #fff;
padding:6px;
border-bottom:3px solid #e40001;
text-transform:uppercase;
font-family: 'Oswald', sans-serif;
font-weight:normal;
}
This result in any <h2> tag inserted into a post looking like this:
This provides a nice look in the theme however in certain situations I would just like to have a basic unstyled <h2> tag thus I created the following class:
.normal{
font-size:1.4em;
font-weight:bold;
color="red";
font-family: 'Oswald', sans-serif;
}
MY Problem - What I want to Achieve
I would like to overwrite the default <h2> style of the theme in certain situations however if I add the above class to any <h2> tag the .normal class is ignored and it keeps on displaying the normal h2 rule....why is this? What am I missing? How can I overwrite the default h2 style at certain types?
This the snippet I worked out. Doesn't seems a problem to me. Go through this code carefully.
PS: color="red"; is wrong. Use
when you want to override some element, you gotta look at the rules used in that element. ie, you gotta remove the background if any, change margin, paddings etc.
color:red;
h2 {
font-size: 1.7em;
background: url(http://i.stack.imgur.com/pOVzy.jpg) repeat top;
color: #fff;
padding: 6px;
border-bottom: 3px solid #e40001;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-weight: normal;
}
.normal {
font-size: 1.4em;
font-weight: bold;
color: red;
font-family: 'Oswald', sans-serif;
background: none;
}
<h2>
hello
</h2>
<h2 class="normal">
Hello World
</h2>
You should mention all css properties of h2 in your .normal class, thus it will be something like this:
.normal {
font-size:1.4em;
background:none;
color: #FF0000;
padding:0px;
border-bottom:none;
text-transform:initial;
font-family: 'Oswald', sans-serif;
font-weight: bold;
}
you can use the below code:
h2.normal{
font-size:1.4em;
font-weight:bold;
color="red";
font-family: 'Oswald', sans-serif;
}
which means h2 has a class normal then overwrite the styling
You may do one of these:
use .normal selector after h2 in your css file (assuming they have same specificity)
use !important in your .normal decleration
.normal{ propert: value !important; }
add some specifity to the .normal selector like:
h2.normal{ bla bla ...}
I've added some custom CSS code to a Wordpress.com theme to alter link formatting. (I'm a beginner, but I attempted to research this and found some code that looked reasonable.)
Chrome is getting it about 90% right and FF about 10% right. Is this inevitable and I should revert to theme defaults, or is there something I can do differently to make this change work in common browsers?
To be more specific, "border: none" is working in both browsers, but the custom color for the link is usually missing in FF--which means no one but me can tell it's a link. Even in Chrome it's only usually the right color. And, the color I set for "active" isn't displaying at all. Meanwhile, the block quote change is rendering in both browsers.
All I added was this CSS (added in the edit window they provide which by definition means it's at the end of the total CSS for the page, so that should make it override or inherit, I thought).
div.entry-content a:link {
color: #2C60BA;
text-decoration: none;
border: none;
}
div.entry-content a:active {
color: #3A93BC;
text-decoration: none;
border: none;
}
blockquote {
float: none;
width: 24em;
margin-left: 2em;
}
Thanks for any comments.
Have you tried to remove the :link, and just have:
div.entry-content a {
color: #2C60BA;
text-decoration: none;
border: none;
}
Also, just in case your theme has overrides for visited links, you might also want to include a rule for visited as well to be sure:
div.entry-content a, div.entry-content a:visited{
color: #2C60BA;
text-decoration: none;
border: none;
}
Bryant provided the key insight in his first answer and my problem, after further experimenting, is now fully solved (see commments). I'm new here and not sure how to mark this resolved, but am guessing this is how to do it. Thanks again.
UPDATE
In my style sheet I have a conflict with these snippets. If I keep this one
<style type="text/css">
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
then, the gradient effect of the one below works, but the header banner is displaced towards the right. If I remove that, the header banner positions itself correctly, but the gradient effect of the code below does not work :/
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
a {
UPDATE II
These 3 lines
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
have a huge impact on the rest of the page
They make this code:
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
be effective. If I remove those 3 lines, the gradient effect will not take effect and the font letters will not be of that family but the standard times roman. However, the negative effect is, like I said, that it displaces to the right a banner that I have as header
I have one header page, one controller and one view and the style sheet to which I have a link in the View
Like the others have said the code doesn't affect the positioning of the elements. Only way that it can affect the header would be if that piece of code is not treated as css at all. Check if the code is in the correct style tags.
The moz is for Firefox and as stated already its for styling. Are you using IE? as if so Id suggest trying alternate browser as well as IE has issues with the double colon which is for css3(no suprise there). have a look here
as I used this when I first came across these and it described them well.
That code shouldn't affect what you're doing. It is code that will change the background colour and text colour of text when it is selected by the user using their mouse.
Could you give us an example link of this happening with it commented out, please?
EDIT
What is the center: attribute supposed to be doing? It isn't valid CSS...
Yahoo keeps inserting blue dotted links within our HTML emails on plain text within a <p> tag. It seems to be doing this to locations mostly.
I've tried to override this using inline styles like:
style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt; text-decoration:none; outline: none; -moz-outline-style: none;"
I've done a bit of research on this and it seems like it may not be possible to remove them, but I'm just looking to confirm that.
Have you tried adding the following to the CSS before </head>:
.yshortcuts {border-bottom: none !important; color: #000000 !important}
There is a little bit more info on this over at Exact Target's blog.
This is a problem that I've been having for quite some time now. For some reason, the CSS rules for my links aren't working properly. As far as I can tell, when using Chrome's Inspect Element tools or FireBug, the links appear to be styled correctly, but are displayed improperly. I've added separate classes to make separate styles of links, and even tried separating a:visited, and this fixed the basic issue for each class, but the normal a tag still displays visited links the wrong color. the CSS for my links has been below.
a:link, a:hover, a:active
{
text-decoration: none;
color: #FF8C00;
background-color: transparent;
}
a:visited
{
text-decoration: none;
color: #FF8C00;
background-color: transparent !important;
}
a.search:link, a.search:visited, a.search:hover, a.search:active
{
font-family: helvetica-light;
font-size: 19px;
color: #999;
text-decoration: none;
background-color: transparent;
}
a.nav:link, a.nav:visited, a.nav:active, a.nav:hover
{
text-decoration: none;
color: #E3E3E3;
font-family: helvetica-light;
font-size: 20px;
background-color: transparent;
}
For some reason, even though a:link/etc have "color: #FF8C00" they show up as black or dark gray when visited. Active, link and hover all work normally. All HTML is written as stuff
Have you tried changing;
color: #999;
Into;
color: #999 !important;
This will tell the CSS parser to overwrite the #FF8C00 color to #999.
Changing the order of the CSS blocks could also give you the expected result.
Sometimes getting the look you want might require some trial and error. :)
A couple of things you could try
clear your browser cache
Make sure no other css files are been called
Go to w3c html validation site
I finally found the solution to my own problem. I had initially copied elements of my CSS from an older project I was working on. Somehow, an "a:visted" declaration had ended up inline with an ID declaration and didn't break the CSS, but caused the links to not appear properly.