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.
Related
I am trying to modify the link color inside a <span>. (I know that this is not optimal/conforming, but I am stuck in a situation where I don't have access to the header and also cannot play with the <a> tags.) I tried something like this, which doesn't work
<span style="a {color:#C04040} ">
Try to change in a <span>: This link
</span>
I also tried other variations, like:
<span style="a.color:#C04040">
I admit that I don't understand the syntax of <style> as a tag, as opposed to inside the header. Would appreciate any help, or links to complete documentation.
Thanks!
If you want to apply this rule to all your span tags, you can just place this in the content of your html document. Then all tags inside a span tag will get red with blue background.
<style>
span a { color:red; background-color:blue; }
</style>
If you want to apply this only to a specific span tag, just use a named class like
<style>
span.colorlink a { color:red; background-color:blue; }
</style>
And then you can do <span class='colorlink> for the spans you want colored.
I was wondering as to how you could style <a> tags without affecting <button> tags.
a:hover{
text-decoration: underline;
}
<link rel="stylesheet" href="http://mrredblob.com/wordpress/wp-content/themes/homework/style.css">
<button>A link</button>
If you need to use a button like display for an anchor - such that clicking on it should redirect to another page, you could use something like this:
<button onclick="location.href='https://www.google.com'">A link</button>
The onclick event will execute when the user clicks the button, and redirects the user to appropriate page.
You can see it working by pasting the following in a new tab in your browser:
data:text/html;charset=utf-8,<button onclick="location.href='https://www.google.com'">A link</button>
It won't work in the snippets/JS Fiddle due to ~sandbox constraints on snippet's iframe.
Is this what you're looking for?
HTML
<a href="#">
<button>
<span>A link</span>
</button>
</a>`
CSS
span:hover{
text-decoration: underline;
}
The anchor tag's content in your example is a button, and you're trying to set the text decoration of a button, which is not text. The button contains text, but that text is a child of the button, and the button is a child of the anchor. Therefore, the anchor does not have a text value to apply that css property.
Here is an example of what I'm talking about:
HTML
Here is<button>A link</button>Some text
CSS
a:hover{
text-decoration: none;
}
Additionally, you can apply a wrapper class to your anchor to style the child elements:
.wrapper:hover * {
text-decoration: underline;
}
Codepen:
https://codepen.io/foozie3moons/pen/gGRBxZ
Try simply doing this :
<button>A link</button>
This way you can style the text inside of the button however you want.
I found a way of doing it! Here's how:
a:not(button) {
text-decoration: underline
}
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'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/
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;
}