Even though I have set text-decoration to none, an underline is still showing on the h1 element. If you want to see the full css, go here. I am new to css, and this is just an adapted version of some code I found on the internet, sorry if the problem is obvious. If the problem isn't with the bellow code (which is where I think it probably is) then I will add in other relevant code.
You can see the page this is working on here
#pagetop h1 , a:visited
{
display:block;
float:left;
line-height:90px;
color:#FFFFFF;
text-align:left;
font-size:27px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
float:left;
margin-left:23px;
text-decoration:none;
}
There is text decoration in your link in the h1 tag.
Add this style:
h1 a
{
text-decoration:none;
}
Your CSS selector #pagetop h1 , a:visited states that you would like to apply those styles to an h1 and also an a in its visited state.
The comma in your code represents a list of separate selectors rather than a combined selector. In your case you don't need to separately specify the same styles for both the h1 and the a.
What you want to select is an a that is a descendant of an h1 within #pagetop (so that it isn't applied to all h1s):
#pagetop h1 a { text-decoration: none; }
Related
i want to ask
How to remove uppercase text first word
i have tried like this :
text-transform: none !important;
text-decoration : none !important;
not work
i'm using blogspot theme leading coral theme:
this my example web : https://blogkubagus123.blogspot.com/2020/02/testing-post.html
example like this screenshoot :
i want to change normal text (if i created bold they bold, if i created h1 they text h1,etc)
how to remove sir?
Inspecting your page I found following style for body.item-view .Blog .post-body::first-letter
float:left;
font-size:80px;
font-weight:600;
line-height:1;
margin-right:16px;
So for cancel that you will need:
float:none;
font-size:inherit;
font-weight:inherit;
line-height:1;
margin-right:0;
All of those for the selector body.item-view .Blog .post-body::first-letter (less specific will not override the template style unless !important is used)
Hope this help you.
body.item-view .Blog .post-body::first-letter{font-size:16px;}
Here are two examples based on this HTML.
<a href="#">
<div class="foo">
hello
<span class="bar">world</span>
</div>
</a>
In the first one, I make the link not underline on hover, then make a sub-portion of the link underline, and that works fine:
a {
text-decoration:none;
}
a:hover {
text-decoration: none;
}
a:hover .bar {
text-decoration: underline;
}
http://jsfiddle.net/3qPyX/1/
In the second, I now reverse the selectors so that the second word should be un-underlined. However, now something strange happens. The entire link remains underlined even though the selectors seem like they should remove underline from the second word. <-- (this is the question. why does this happen?)
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
text-decoration: none;
}
http://jsfiddle.net/EAmwt/
Can someone explain what's going wrong in the second example? Inspecting with Chrome shows the span.bar has a computed style of text-decoration:none.
Update: a few answers explaining how to get around the problem, which is great except that's not really my question. What I want to know is why is this behavior different than, say, bold? For instance, if I try the 2nd example with bold, I get the expected results: http://jsfiddle.net/3qPyX/4/
Explanation:
The problem is that some properties (like text-decoration) get drawn to the whole parent inline element, whereas others - like font styling (that get inherited) - get overriden by the children properties.
Just for illustration: simmilarly, if you set a background color to a parent element it will paint the background of the parent ... and you would have to set another color to a child to lay it over (default - transparent - will still show the parent style through), but if you set font-weight at a child it will apply to the text inside the child element and override the parent settings.
You can find more detailed stuff on the text-decoration property in the CSS Level 2 and Level 3 Specifications.
A simple solution
withot changing the markup, you could just display .bar as inline-block.
Like so:
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
display:inline-block;
}
And the inline-block breaks out of the inline/text styling of the parent anchor element =) And you can then style it independently:
DEMO
When you do the text-decoration it is applied to the entire line at once. So the a:hover .bar doesn't cause any effect, because the underline is not being applied in the .bar but on the a.
Here is the specification: http://www.w3.org/TR/CSS21/text.html#lining-striking-props
UPDATE! (As #Cam suggested) :
You need the add in separate elements the parts of your text: http://jsfiddle.net/3qPyX/5/
The CSS:
.foo, a:hover .bar, a {
text-decoration:none;
}
a:hover .foo {
text-decoration: underline;
}
I'm currently using CSS to change the hyperlink colors in my left navigation but there seems to be some inconsistency. Some links will take the correct properties I have declared, whereas, other links won't accept them. I have declared the same class nav to all the links. There isn't any overwriting that I know of for these links since it's isolated.
Below is the left navigation code snippet
This works:
var context='<%=request.getContextPath()%>';
<%-- var sOrg = '<%=sOrg%>'; --%>
document.write("<div id=\"leftNav\">");
document.write("<div id=\"leftNavtext\"><a href=\"home.htm?sOrg="+'<%=sOrg%>'+"\" class=\"nav\" id=\"phome\" style=\"text-decoration:none\" >Home</a></div>");
Then this doesn't work:
<% if(roles.contains("PEIMSDataCompleter")) { %>
document.write("<div id=\"leftNavtext\" >Data Submissions</div>");
Then this works:
document.write("<div style=\" padding-left: 20px;padding-top:5px;\">Monitor Data Loads</div>");
Here is my CSS:
#leftNav {
width:180px;
height:687px;
background-color:#E0F0F2;
margin-bottom:15px;
padding-left:10px;
text-decoration:none;
text-color: #0083cc;
}
#leftNavtext {
font-family: Arial, Helvetica, sans-serif; font-weight:800;
font-size:95%;
color:#0083cc;
width:auto;
padding: 20px 10px 3px 0px;
}
#noteBody{
font-family: Arial, Helvetica, sans-serif; font-weight:800;
font-size:95%;
width:960px;
margin:auto;
}
// Below is the code for getting the hyperlink text to be formatted correctly (ie link colors)
a.nav:link {color: #0083cc; text-decoration: none; }
a.nav:visited {color: #0083cc; text-decoration: none; }
a.nav:hover {color: orange; text-decoration: underline; }
a.nav:active {color: #0083cc; }
As far as I can see, there are no differences between these two links. These are just a few of the many links I have in the left navigation and this happens randomly. I'm currently using IE 9 and this browser is my requirement.
Any help would be greatly appreciated! Thanks!
Did you formated all :pseudo stated of your anchors ?
a, a:link, a:visited {some.css}
a:hover, a:visited:hover, a:active, a:focus {some-other.css}
Perhaps you are looking at a browser specific styling.
First of all,
text-color property doesn't exists ; use color instead.
If you're using ASP (it seems to), please add the appropriate tag to your question
Next, the problem isn't due to your CSS ; see this tiny JSFiddle here : http://jsfiddle.net/j8ruV/2/
The fact is you're dynamically adding objects to your page with the document.write() method, but this method adds your divs weirdly to the DOM, and so they're not considered by the CSS (except for the inline one). By simply testing with the .innerHTML property, this seems to work (see the fiddle).
I ended up having to place inline code for the links:
document.write("<div id=\"leftNavtext\" >Data Submissions</div>");
Why is it that the links on this page (and all others but best to demo) sharing the link style accross all pages. To demo this click on Portfolio then go back, you will see the link text turns white, even though this should only be for the "message" element (blue with rounder corners) at the bottom of the page?
This is my CSS
.message {
background-color:#54a0d9;
border:1px solid #54a0d9;
color:#fff;
}
.message h2 {
font-size:22px;
color:#fff;
}
.message a:link, a:visited, a:hover, a:active {
color:#fff; }
and HTML is a normal link inside an element (which is not a child of the message element.
Surely that should only apply to the Message elements?
I've done some research on whats causing this but so far nout...
Separating selectors by commas means to consider them completely separately. So here:
.message a:link, a:visited
Means to apply this style to a:links inside of elements with a class of "message", and also to a:visiteds. Note that the latter does not have to be inside of an element of class message. Simply put .message in front of each comma-separated term to fix it.
I understand how to change the description of an active <li> element
li:active {
...declarations...
}
But how can I change all the other elements that are NOT active?
For example, all my elements are in bold, but when I select one of them, all the others are changed back to normal.
Thanks!
I'd imagine li:not(:active) should at least theoretically work.
Apply a rule to ALL of them, then apply a different rule to the active.
li {
color: blue;
}
li:active {
color: red;
}
Result: the un-active ones are blue.
After rereading your question, I think the real answer is that you can't use CSS alone to control how the elements behave on user interaction.
I realize that this won't work because the styles are applied immediately, and elements in the DOM are typically not :active by default:
li {
font-weight: bold;
}
li:not(:active) {
font-weight: normal;
}
Plus, :not() is a CSS3 pseudo-class, so support for it is rather poor right now if you have to account for older browsers.
Maybe you can do this with JavaScript (I use jQuery here)...
$('li').click(function() {
$(this).siblings().css('font-weight', 'normal');
});
If I understand correctly this should do it,
li{ font-weight:bold; }
:active li{ font-weight: normal; }
:active li:active{ font-weight: bold; }
So basically you want an active state on the parent which switches everything to normal and then override that for the li that is also active.
To expand Brad's answer based on your example:
You want all <li>'s to be bold, until one is clicked, right? Start off with:
li {
font-weight: bold;
}
Then, if a list item is clicked keep that one bold but make the others regular:
li:active ~ li {
font-weight: normal;
}
The ~ selects all elements that are siblings of the active li, without selecting the active one itself.