I'm displaying some text and a blue line is appearing underneath it
http://jsfiddle.net/mungbeans/CmVsJ/
Same as this question
Text being displayed with a blue underlining, where is it coming from?
The answer to that and to others say it is invalid for html4 but valid for html5. Why does this problem occur with the fiddle in that case? Whats the solution?
Thanks
Here is your code
<ul>
<a href="http://whatever">
<li id = "header_list">
<div id = "main_title">title</div>
<img id = "logo" src="logo.png"/>
</li>
</a>
</ul>
The div id="main_title" is within the anchor tag, meaning it is a link. By default, link styles have the blue underline. You could add the css style to remove the blue underline:
#main_title {text-decoration: none; color: #000;}
Also, you should put the li tags directly after ul, since it needs to be a direct child:
<ul>
<li id = "header_list">
<a href="http://whatever">
<div id = "main_title">title</div>
<img id = "logo" src="logo.png"/>
</a>
</li>
</ul>
It's coming from your <a> - because everything is wrapped in it. To remove it simply apply:
a {
text-decoration: none
}
DEMO
You just need to change the style for your links (all the text is within your <a> tags):
a{text-decoration:none;}
It is inside an <a> tag which will be rendered with an underline by default. Change the default behavior by setting text-decoration: none for links and it should work.
`
Anchor tags a have an text-decoration definition of underline by default.
You can fix this by simply adding the text-decoration: none; attribute to your CSS definition.
I should also point out that your markup isn't entirely correct. Your anchor should be within the list-item li, and it's generally not a good idea to have block elements div inside of inline-block elements a.
Here is an updated version of your jsfiddle to demonstrate what I mean: http://jsfiddle.net/CmVsJ/2/
Related
just add color: inherit to link tag. As a result, link tag inherits black color. But can't understand from where? Can't find answer in devtools. Do somebody know? Thanks
a {
color: inherit;
}
<body>
<nav>
<ul class="nav-list">
<li>
Home
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</nav>
by default, css gives a black color to the text.
Since <a> is being used within the body, it inherits the features of the parent tag <body>
if you change the attributes of any element/s between <body> and <a> (for instance <li> <ul> etc.), then <a> will inherit the properties of the first direct parent.
inherit keyword inherits the property of the parent element.
By default the text, body, ul, li, nav has color property as black
color: black
so by giving
a{
color:inherit;
}
it inherits the property of its immediate parent. As in your code, its immediate parent is
<li>
so if the list has the color, tag will inherit its color. else it will inherit the property of the main parent i.e the
<body>
Have a look changing the color of body and li here. You will understand It better Test it live here
and This link shows that by default body has black color Follow the comments given in codepen you will understand it better here
I have some text where the inline styling is as follows:
<a style="margin-left:87px;color:white;">3mm</a>
For some reason, it's being underlined on hover. It looks like this:
The containing div is:
<div class="next-slide-container">
Poke ID<br>
Choose your Pokemon<br>
Details<br>
Size<br>
</div>
<div class="next-slide-container" style="margin-top:-7px">
<a style="margin-left:87px;color:white;">3mm</a>
<img class="texture-icon" role="button" src="Resources/Cutups/Texture_Icons/Pikachu.png">
</div>
I tried recreating it with a JSFiddle but I cannot get the text to underline is JSFiddle, even though the css for the container is not different than my own source code. Additionally, the text inside the first div class next-slide-container, like "Choose your Pokemon", does not highlight in my code. It's only just "3mm"; so it would seem that the inline styling is the problem? Thanks.
By default, most browsers set anchor tags <a> to have the css text-decoration: underline; If you want to remove any browser default underlining you need to add text-decoration: none; the the css for anchor tags.
Basically... add this to your CSS file or area.
a { text-decoration: none; }
Some browsers also add a default outline or pseudo "glow" to anchor tags (Mozilla).
If you want that to also go away, you would add this to your css for anchor tags:
a { text-decoration: none; outline: none; }
Valid HTML would mean you need to add either an href= value or a name= value to the anchor tag. Without one of these, the a tag is invalid.
In your fiddle, this invalid anchor tag may be the reason you aren't seeing the same thing as in your browser. Add href="#" to the anchor tag in your fiddle and you'll see the same issue. jsFiddle isn't as forgiving with improper markup the way browsers can be. That's kind of the purpose of jsFiddle. Browsers will guess at what is meant sometimes, jsFiddle really doesn't.
If you merely want to style the text, you can use <p>, <span>, <div>, <h1>, etc. tags. You don't need an anchor tag simply to style text.
I ran into a situation where I have a link that is set as a display:block. I'm trying to fill the background-color property with a color, but only behind the text; instead, it's filling the entire background of that row, which is logical, but not what I want. How can I fill only the background of the text without being an inline element? Or is this not possible?
HTML:
mylink
CSS:
a {
display:block;
background-color:blue;
}
If you need to keep the link as a block, you can wrap the text in a <span> and apply the background colour to that.
Simple code would be something like this:
<a href="#" style="display: block">
Hello<span style="background: blue; color: white">blue</span>link
</a>
You can then add padding and other style to the span tag.
You can add a ID tag to the span if its a special once off thing for specific styling.
I am using the html below
<a href=""><div class="logo"><span class="whologo">hyperlinked text </span>
</div></a>
the problem i am having is that the only way to remove underline from the span text is using a:link{text-decoration:none;} but this removes underlines from ALL links from the whole page
I have tried
a.logo:link{text-decoration:none;}
but it doesnt remove the hyperlink from the span element.
You have a wrong hierarchy there and bad element selection. In your case, the most accurate CSS would be:
a div.logo span.whologo {text-decoration:none;}
But I suggest this approach:
<div class="logo"><span class="whologo">hyperlinked text </span>
And CSS:
div.logo a {text-decoration:none;}
Or include the span if needed (but only if the span element has underlines, like Hans pointed out in the comment):
div.logo a span.whologo {text-decoration:none;}
Child items cannot influence their parents using CSS. You need to put an ID or class name on your A tag, or find something unique up the tree that you can specify for this element.
Check this out
<style type="text/css">
.linkTst{text-decoration:none;}
</style>
<div class="logo"><a href="" class="linkTst"><span class="whologo">hyperlinked text </span>
</a> </div>
Put a class on your a tag where you don't want the underline
like this : http://jsfiddle.net/UL8SW/
First of all: This is not valid html... And you should give your a a class or id, otherwise this isnt possible with remote css. It is possible with inline css...
Give anchor tag a class.
HTML:
<a href="" class='no-underline'><div class="logo"><span class="whologo">hyperlinked text</span>
CSS:
.no-underline {text-decoration: none;}
It appears some browsers (Chrome at least) put a partial underline under images that are nested inside of an anchor tag, like this:
<img src="/foo.jpg" />
So I'm looking for a way to add text-decoration: none; to any anchor tags that contain an img tag. My first thought was this:
a img {
text-decoration: none;
}
Of course that doesn't work, because the style gets applied to the img tag, and not the anchor. So is there a selector I can use to apply the text-decoration style to any anchor tag with a img child?
EDIT:
My HTML typically looks like this:
<a href="#">
<img src="/foo.jpg" />
</a>
The way I space and tab the elements is adding extra whitespace between the anchor tag, and image tag. It's that white space that's being underlined.
If you're against adding a class to this <a> tag (which is the simple solution), your next best CSS solution would be to remove text-decoration on the <a> tag, and wrap the text you want to have underlined in an inline element. See below:
For images:
<a href="#">
<img src="/foo.jpg" alt="etc" />
</a>
For text:
<a href="#">
<span>Text that you probably want underlined</span>
</a>
Combined:
<a href="#">
<img src="/foo.jpg" alt="etc" /> <span>Text that you probably want underlined</span>
</a>
CSS:
a { text-decoration: none; }
a:hover span { text-decoration: underline; }
Unfortunately there is no way currently of selecting the parent of an element using just CSS.
You would need to resort to javascript or jQuery.
Personally I would do something in jQuery like
$('a>img').parent().addClass('noTextDecoration');
then in css have the following:
a.noTextDecoration {test-decoration:none;}
I just use
img {
border:none;
}
So far as I can tell, there is no way to select an element's parent in CSS. You could try applying some class, i.e. imagelink to A elements that contain IMG elements, though.
If the href attribute of these anchors always points to images, and no anchors point to images besides the one with actually an img tag inside, then you can use:
a[href$=".gif"],
a[href$=".png"],
... ,
a[href$=".jpg"] {
text-decoration: none;
}