Can you style a <abbr> tag using css? In firefox, it is displayed with dots underneath the words like in the picture below:
Is this a browser by browser thing? can you remove the dots or do you just use the title="title here" option?
thanks
Firefox 40 has a small change:
https://developer.mozilla.org/en-US/Firefox/Releases/40/Site_Compatibility#CSS
To remove default underline in Firefox, you now need to set CSS:
text-decoration: none;
Can you style a tag using css?
Yes, you can.
In firefox, it is displayed with dots underneath the words
Yes. Firefox default style is
abbr[title], acronym[title] {
border-bottom: 1px dotted;
}
Is this a browser by browser thing?
Yes, this behaviour is determined by the default stylesheet of each browser. Then, different browsers may display it different by default.
Can you remove the dots?
Yes, just override the default syle:
abbr[title], acronym[title] {
border-bottom: none;
}
It is possible to style the tag with CSS for modern browsers. However, a fallback for older browsers with JavaScript may be used. (But who wants to support IE 8?)
abbr {
position: relative;
}
abbr:hover::after {
position: absolute;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: yellow;
content: attr(title);
}
This will add an absolutely positioned pseudo element top right of the tag using the attribute content within the title when the tag is hovered over.
Mr. Bunnyman.
Seems like your experiencing a cross browser issue.
Yes, you can style <abbr> tag. Example below.
abbr { border: 2px dashed red; }
If your experiencing an underline on a certain browser, try:
abbr { border-bottom: 0px !important; }
Can you style a <abbr> tag using css?
Yes, but you cannot style the title attribute—though you can fake it unreliably.
Is this a browser by browser thing?
Yes, default styles are set in the user agent stylesheet.
Can you remove the dots?
Absolutely. To remove them unset the text-decoration property in your stylesheet:
abbr[title] {
text-decoration: unset;
}
Inclusive design approaches are also possible.
You can style any HTML element with any CSS you want, the problem is, for some HTML elements it will have no effect.
In other words, you can add the CSS to whatever the heck you want, but the browser may not support your changes.
i.e. Styling the <head> element is possible, but it is pointless.
Related
I have a div wrapped in a <a> tag like this...
<a href='/'><span>Quiz</span>
and then my css stylesheet looks like this...
a:visited {
color: green;
}
But when the link is visited, it looks like this...
I have tried defining the border settings in the a css selector in various ways with no luck. Any ideas on how to fix this?
This is not an outline, probably there is already a border on, either your span or your a. Now, if the border doesn't have a specific color set, e.g.
border: 1px solid;
instead of
border: 1px solid black;
then it's color is defined by the color property. Which means that what is happening is normal.
Now, you have two options, either you find where is this border defined and remove it or add a color to it. Or you override it in some way like:
a:visited {
color: green;
border-color:transparent;
}
you may need !important on the border-color rule but that depends.
Use outline instead of border to fix this.
Thanks
i think it will be better if you look into the style section of the safari inspection. There are certain browser default styles which behave in a similar way. If you find any outline or border declaration, try to neutralize that declaration by declaring from your end border: 0; outline: none;
It will be of real help if you could share with us the code over fiddle or codepen.
Note: I was unable to recreate the scenario as you specified.
It seems IE doesn't care for text-decoration: none; defined for a:before pseudo element (or pseudo class).
Here is a JS Fiddle: http://jsfiddle.net/9N35f/
I'd expect the ">" to lose the underline. It does in FF, Chrome and Safari, but not in IE. Tested with IE10 and IE9.
The question:
Any workarounds that I could try to make the :before element lose the underline? Ideally in IE9+
Is there a bug report for this somewhere? Or is it actually by the standards?
I'm aware this is a rather elderly thread, but having just been up against this problem in IE 11, and unable to find much help, I decided to experiment. Aided by a significantly improved dev tools than in the earlier versions I managed to figure it out - for what I'm working on at any rate. Chances are it'll work for others as well, although you might need to tweak. YMMV.
The HTML:
<li>Whatever</li>
The CSS (edited after #frnhr pointed out that the initial version I posted didn't actually work):
a {
display: block;
position: relative;
padding-left: 15px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:before {
position: absolute;
left: 0;
top: 0;
height: calc(100% - 2px);
overflow: hidden;
content: ">";
}
The secret sauce is setting the height and the overflow: hidden; line; it means that the underline is still there but outside the viewport provided by pseudo element, and so never gets seen on screen. It also works across other browsers (tested on Chrome and Firefox as well). Depending on your existing styling you'll probably want to tweak the pixel value in the calc() value.
See http://jsbin.com/biwomewebo/1/edit?html,css,output
IE seems to be in error here, since display: block in your code should remove the underlining. According to clause 16.3 Decoration in the CSS 2.1 spec, “User agents must not render these text decorations on content that is not text. For example, images and inline blocks must not be underlined.”
There does not seem to a bug a report on this at the IE Feedback Home.
In this case, a suitable workaround might be to use an image as the generated content:
a:before {
content: url(arrow.png);
}
where arrow.png refers to a suitable small icon. The use of url(...) in content is described in CSS3 Generated and Replaced Content Module, which is a seriously outdated draft (the last version is from 2003), but this part has been widely implemented in browsers. Not in IE 7, however. So if you wish to cover IE 7 as well, consider the approach in #EugeneXA’s answer, possibly generating the extra markup dynamically with JavaScript.
If the background is white you may use the bottom border:
a {
text-decoration: none;
border-bottom:1px solid blue;
}
a:before {
content: "> ";
border-bottom:1px solid white;
}
Not sure what standards say, but IE behavior seems to be more logical. Think of :before as an element inside of <a> tag, not outside of it. Child's text-decoration property should have nothing to do with its parent's.
This workaround will work
http://jsfiddle.net/9N35f/4/
<span>a link</span>
a {
text-decoration: underline;
}
span:before {
content: ">";
}
Another solution is to set a small line-height (heightdoes work too) and set overflow: hidden so the underline disappears.
I know this is not the best solution, because the line-height value depends on the character you use. In this case 0.6 is a good value but maybe not for another character.
In my case it was a good solution because I had the problem with only one certain character with a fixed font-size.
a {
text-decoration: underline;
}
a:before {
content: ">";
display: inline-block;
text-decoration: underline; /* simulate IE behavior */
line-height: 0.6; /* line-height must be smaller than font-size */
overflow: hidden;
}
JSFiddle Demo
This works for me:
html:
<span>a link</span>
css:
a {
text-decoration: none;
}
a span {
text-decoration: underline;
}
a:before {
content: ">";
}
In this the before tag is still part of the anchor.
I'm aware that the :empty pseudo-class will select all elements with no children, but I want to only select elements with text-nodes as children.
I have a bottom-border on my hyperlinks that're a different color than the text, but this is a problem because the hyperlinked images are also getting this underline.
I've tried a *:not(*){ border-bottom-width: 0; } in an attempt to fix this, but it didn't work. Is there a way to select a tags with only text-nodes for children?
If I understand your problem correctly, you are trying to keep your hyperlinked images from being underlined. If so, why not do something like: a img { text-decoration:none }?
Edit: If its the links on img tags you don't want underlined, apply a class to those links with text-decoration:none
NEW ANSWER:
If you want a border under the image, but not the text do this:
a img { border-bottom: 1px solid #000; }
a:emtpy { border: none; }
If you want the opposite (border under the text but not the image) do this:
a:empty { border-bottom: 1px solid #000; }
a img { border: none; }
OLD ANSWER:
If it's just a problem with images that are wrapped in a tags, try:
a img { border-bottom: none; }
Instead of a crazy selector, why not hide the border with a negative margin:
a img {
margin-bottom: -6px;
}
Demo
When the ONLY CHILD of <a> is not an img ...
a:only-child:not(img)
{
border-bottom-width: 1;
}
This cannot be accomplished because of the way border property is applied and rendered outside the top-most box of your anchor - effectively the only way to achieve such an effect with a border would be to negate the property. Sometimes it coult be visually acceptable to use a bottom border in a background colour to overlay over that of of your anchor's - an unreliable practice to be frowned upon. Maybe the effect could be simulated with filters, but I wouldn't count on it being sufficiently well-supported cross-browser.
What I propose is going back to the text-decoration property *while still maintaining a different, independent underline colour` - a neat approach overall, but not without the overhead of an additional element:
<style>
.fancy-underline { color:blue; text-decoration:underline; }
.fancy-underline a { color:black; text-decoration:none; }
</style>
<span class="fancy-underline"><a href="#">I am a fancy link
<img src="//placekitten.com/30/30/" /> with an image in the middle of it
</a></span>
http://jsfiddle.net/ovfiddle/TwmmF/3/
I ended up just using jQuery. I don't believe it's possible with just CSS right now.
jQuery('document').ready(function(){
jQuery("a").each(function(){
if(this.children.length !== 0)
this.style.borderBottomWidth='0';
});
});
I see lot of times attempts to hide text with CSS, for instance:
<a class="back">back</a>
a.back { text-indent: -9999px; display:block; width: 100px; height: 50px; background: url(/images/back.png); }
I always wonder why not to use:
a.back { color: transparent; display:block; width: 100px; height: 50px; background: url(/images/back.png); }
It seems to me semantically correct, and in addition, when I tried the text-indent approach, it caused a bug in iPad display: The text was displayed 99999px left to the anchor tag and caused a strange unnecessary horizontal scroll.
Is there a common known problem with the second code or it's OK to use?
font-size: 0px; should do the trick.
If you want to make the button smaller than the text, you'll also need to add line-height: 1em; or something similar.
Using the display property allows you to edit the state of an element in C#.
Here are 4 main display elements people use:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page
But if you want to learn more about them you can go to this site: https://www.w3schools.com/cssref/pr_class_display.asp
w3schools explains a lot of languages in a simple and understandable way.
Don't hide content and depend on a background image at all.
HTML provides a way to include images which have meaning (the <img> element) with text content for situations where the image can't be displayed (the alt attribute). There is no need to fake it with the stylesheet.
<a class="back"><img alt="back" src="/images/back.png"></a>
Icons are content and deserve to be treated as such. All efforts to use text and background images are ultimately hacks with limitations. The <img> element was designed for this use case.
I want to make all text links at my website have a bottom border. I use:
a
{
border-bottom: 1px dotted #333;
}
... but it adds a border to image links too and I don't want that.
How do I make it work for text links only?
a { border-bottom:1px dotted #333; }
a img { border:0; }
Just override the inherited rule, the native css way.
Edit: Wow, I'm really not paying attention. Can you just throw a class to anchors that include images?
a.contains-image { border:0; }
This would be the only non-scripting solution without relying on CSS3's not selector.
Add this:
img {
border: none;
}
That will get rid of borders on images.
Adding a border on links and removing it if it contains some img isn't possible in CSS, with or without :not()
You can't select an element depending on its descendants (CSS isn't XPath) and you can't affect parents styling.
I'd use jQuery selectors (Sizzle to be precise) and add a class depending on the presence of an image:
<style type="text/css">
.underline { border: 4px dotted #333; }
a img { border:0; /* remove the default blue border from images within links */}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a:not(:has(img))').addClass('underline');
});
If you've not only 100% text and a>img:only-child links but also text+img mixed in links, you could also target img:only-child or wrap text in links (except img) in span elements to style mixed links in a certain way, if you've these edge cases in your page.