'Text-decoration: none' not working in Bootstrap - html

On hover, my text links have underlines. This is the default in Bootstrap.
I want to keep this, unless the link is within a certain div.
The code I have tried (and several variations) doesn't work.
The HTML:
<div class="wall-entry span5">
<a href="">
<img src="http://www.placehold.it/290x163" />
<div class="wall-address">
<p>Burgundy Street</p>
<p>New Orleans, LA</p>
<p>USA</p>
</div>
</a>
</div>
My CSS:
.wall-entry {
background-color: #black;
position: relative;
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div {
position: absolute;
left: 10px;
bottom: 10px;
p {
line-height: 18px;
margin: 0;
font-family: Neuzit Heavy;
font-size: 18px;
color: white;
text-decoration: none;
}
}
}
div.wall-entry:hover img {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
a div.wall-entry {text-decoration: none;}
A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.

put the font-family in quotes for fonts that involve multiple words, first of all:
font-family: "Neuzit Heavy", sans-serif;
then beneath a put .wall-entry a:hover { text-decoration: none; }
You have the order switched around. The item you're targeting should be to the right. For example,
.wrapper .header a in english means "Target all anchor links that are inside of .header, that are inside of .wrapper"

The problem is actually a caused by Twitter Bootstrap's CSS file, not your code.
Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue.
In my project, I specifically assigned my own colors to the text that was inside anchor tags, and the browser rendered their colors correctly, just as I assigned them, however, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my styled text.
My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this:
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
or this:
a, a:visited {
text-decoration: underline;
}
you should go ahead and remove the color and text-decoration rules.
That solved my problem.

This won't work
a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry
but this will work.
div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'
because an a tag has text-decoration.

If your link is inside div tags, then you can select your link this way:
div > a:hover {
text-decoration:none;
}
It works fine, even with boostrap used.

Related

Bootstrap "jumbotron-narrow" example. how does the style change?

I'm going over the bootstrap site example http://getbootstrap.com/examples/jumbotron-narrow/#
and when I hover my mouse over the "About" or "Contact" links a grey rounded box appears around the text. When the mouse leaves the element, the grey rounded box disappears.
This is driving me crazy! I have inspected these elements and gone through the styles applied to them and have gone through every single one of them, all the inherited ones, the whole lot. Can someone go through the css and tell me exactly how this is happening? I expected to find some sort of :hover or :focus css but none exists. Furthermore it is not javascript that is changing the background as I have tested the site with javascript enabled.
Please help and I will love you forever.
The code you are looking for:
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #EEE;
}
Super simple, fix:
<link bootstrap />
<link custom /> <-- Overwrite CSS by placing external file after in HTML
Or:
<link bootstrap />
<style></style> <-- Overwrites bootstrap's external CSS
CSS to change is simple:
.nav > li > a:hover, .nav > li > a:focus {
background-color: none;
}
Why does Bootstrap make it so if you hover, it turns grey?
It is because it tells the visitors, that they are on something clickable: a link. And making it more user-friendly and improves a website's UX.
There are an CSS applied when you hovered these elements -
.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
background-color: #eee;
}
Please see highlighted in red -
Demo
html
<ul class="nav">
<li> About
</li>
</ul>
css
.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
background-color: #eee;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
border-radius: 4px;
text-decoration:none;
width:50px;
text-align:center;
}
.nav {
list-style: none;
}
The buttons background turns grey because of the following css in the bootstrap.min.css file:
nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#eee}
You can run a find on the code mentioned before to find it in the bootstrap.min.css file.

HTML/CSS: no text change when hovering over a link

I want to create a hyperlink that doesn't change the text when I hover over it.
I've created a special style for that type of link as follows:
a.blank:hover{
text-decoration:none;}
and the link itself:
<a class="blank" id="asdf">asdf</a>
I also have a general hyperlink style:
a:hover, a:active {
text-decoration: none;
color: #321dd3; }
I know I could get around it by defining the text colour as being the same, but is there an umbrella method to force the hyperlink not to change anything?
There are libraries such as reset.css (And more like it) that will remove these styles, but that may affect other parts of your page. It's best to use
a:hover, a:active {
text-decoration: none;
color: inherit;
}
You will also need to add a{text-decoration: none;} and define the color property (That's what's inherited) for its parent element.
Fiddle: http://jsfiddle.net/VhCf8/

Keep underline on anchor text but not on font awesome icon in anchor

I have the following markup:
<a href="#" title="Feedback" id="feedbacktogglenav">
Feedback
<i class="icon-comment"></i>
</a>
On hover, I would like the text to be underlined but not the font-awesome icon. I know you can do "text-decoration:none" on the icon (which works) but when you hover on the text part it still adds the underline to the icon. Any ideas?
http://jsfiddle.net/ZZEQd/
I've discovered a way of doing this without needing an extra span tag, it works in every browser I've tried it in (FF/Chrome/Safari/Opera)... except IE8 (I haven't tested in IE 9 or 10 either).
Just declare the icon as display:inline-block, no more underline on hover.
Example: http://jsfiddle.net/J432G/
HTML:
<a href="#" title="Feedback" id="feedbacktogglenav">
Feedback<i class="icon-comment"></i>
</a>
CSS:
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
i:after{
content: '{icon}';
display: inline-block;
padding-left: 1em;
}
...but when you hover on the text part it still adds the underline to the icon. Any ideas?
To get this to work you'd need to contain the link text within a separate element (a span, ideally):
<a href="#">
<span>Feedback</span>
<i class="icon-comment"></i>
</a>
Now you can remove the text-decoration from the link completely and assign it only to the span (on hover):
a {
text-decoration:none;
}
a:hover span {
text-decoration:underline;
}
JSFiddle demo.
The only way to do this reliably is to assign text-decoration:none to the first parent element i.e the initial a tag.
If you cannot add a span element (let's assume you just have acccess to CSS), it should work withfloat:left or right on your icon element.
See: CSS linked images are being underlined ("a" display is set to block)
Someone just responded but deleted their response. The solution was:
#utilitynav a i {text-decoration:none;}
Thank you mystery person!
http://jsfiddle.net/ZZEQd/2/
Just add a span tag in your HTML and you should fine.
HTML:
<a href="#" title="Feedback" id="feedbacktogglenav">
<span class="linkHover">Feedback</span>
<i class="icon-comment"></i>
</a>
CSS
a {
text-decoration:none;
}
.linkHover:hover{
text-decoration: underline;
}
#utilitynav .icon-comment {
font-size: 12px;
margin-left: 3px;
position: absolute;
top: 2px;
}
#utilitynav .icon-comment:hover {
text-decoration:none;
}
#utilitynav #feedbacktogglenav {
margin-right: 12px;
}
I added a class to your span for it wouldn't effect future span tags
If you have a situation where you can't use :before or :after (because the specific icon is set by the content, not by the global style, for example) and you also don't want to have to go in and put <span> around the link text everywhere... one other option is to put padding on the link, and absolutely position the icon over the padding.
HTML
Feedback <i class="icon-comment fas fa-link"></i>
CSS
a {
position: relative;
text-decoration:none;
padding-left: 20px;
}
a:hover {
text-decoration:underline;
}
a i {
position: absolute;
left: 0;
}
JSFiddle: http://jsfiddle.net/w6bL5m8k/1/
I'm sure there are probably all kinds of special conditions under which this isn't going to work out... but for simple situations it should be fine.

text decoration not working

I have a website with a contacts page.
on this page I have my email address which is linked in a mailto anchor. The email displays in the usual unvisited blue with an underline.
trying to remove this is where the problem starts
My code for this link is:
<li>
<div class="icon email">Email:</div>
<div class="email_info" style="text-decoration:none">kevin#kh.co.uk</div>
</li>
I have tried adding text-decoration:none to the ul and li in my CSS code but none of them seem to work. Where am I going wrong?
Apply text-decoration: none; to the a element not the container div.
Inline styles (defining CSS via the style attribute on individual elements) is also generally bad practice - you should put it in an external stylesheet, or at least in your head like so:
<style>
.email_info a {
text-decoration: none;
}
</style>
You can try following...
ul li a {
text-decoration: none;
}
Add the following CSS
.email_info a {
text-decoration: none;
}
Try:
ul li a {
text-decoration: none;
}
if that doesn't work:
Link
and just put it in the link itself

Selectively stopping text-decoration: underline on children of a link tag

Does anybody know if it's possible to prevent underlining on the child of an tag, while underlining the rest of the tag's contents?
Here's an example - you can see this working on JSFiddle. I've tried everything I can think of, but the text underlining continues to be applied to all the text inside the link. I'm viewing on Chrome, but I'm sure this applies to all browsers.
a {
font-size: 32px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a div {
color: pink;
}
a:hover div,
a:active div,
a:focus div {
text-decoration: none !important;
}​
<a href="http://news.bbc.co.uk">
<div class="inner">I don't want this bit underlined on hover. What's the big deal?</div>
This bit should be underlined on hover. Underlining here is fine. I have no objections to underlinining in this bit.
</a>​
Read this similar answer and its links for more information: Remove :hover on :after elemets
http://jsfiddle.net/thirtydot/ygXy6/4/
CSS:
a {
font-size: 32px;
text-decoration: none;
}
a:hover span {
text-decoration: underline;
}
HTML:
<a href="http://news.bbc.co.uk">
<div class="inner">I don't want this bit underlined on hover. What's the big deal?</div>
<span>This bit should be underlined on hover. Underlining here is fine. I have no objections to underlinining in this bit.</span>
</a>​