Let's say I have this element for displaying the website logo:
<div id="web-title">
<a href="http://website.com" title="Website" rel="home">
<span>Website Name</span>
</a>
</div>
The #web-title would be styled with background:url(http://website.com/logohere.png), but how to properly hide the text Website Name? As seen here: Hide text using css or here https://stackoverflow.com/a/2705328 , I've seen various methods to hide the text, such as:
#web-title span { text-indent: -9999px; }
or
#web-title span { font-size: -9999px; }
or
#web-title span { position: absolute; top: -9999px; left: -9999px; }
I've also seen some combine those three methods. But actually which one is the best practice to hide text effectively?
Actually, a new technique came out recently. This article will answer your questions: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
It is accessible, an has better performance than -99999px.
Update: As #deathlock mentions in the comment area, the author of the fix above (Scott Kellum), has suggested using a transparent font: http://scottkellum.com/2013/10/25/the-new-kellum-method.html.
you can simply make it transparent
{
width: 20px;
height: 20px;
overflow: hidden;
color:transparent;
}
Can't you use simply display: none; like this
HTML
<div id="web-title">
<a href="http://website.com" title="Website" rel="home">
<span class="webname">Website Name</span>
</a>
</div>
CSS
.webname {
display: none;
}
Or how about playing with visibility if you are concerned to reserve the space
.webname {
visibility: hidden;
}
the way most developers will do is:
<div id="web-title">
<a href="http://website.com" title="Website" rel="home">
<span class="webname">Website Name</span>
</a>
</div>
.webname {
display: none;
}
I used to do it too, until i realized that you are hiding content for devices. aka screen-readers and such.
So by passing:
#web-title span {text-indent: -9000em;}
you ensure that the text still is readable.
Add .hide-text class to your span that has the text
.hide-text{
display:none;
}
or make the text transparent
.hide-text{
color:rgba(0,0,0,0);
}
use according to your use case.
If you're willing to accomodate this in your markup (as you are in your question with the holding the text), I'd go with whatever jQuery UI went with in their CSS helpers:
.ui-helper-hidden-accessible {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}
The image replacement techniques are good if you absolutely refuse to add extra markup for the text to be hidden in the container for the image.
What Google(search bot) needs is same content should be served to bot as it is served to user. Indenting text away (any text) gets bot to think it is a spam or you are serving different content to user and bot.
The best method is to directly use logo as an image inside your anchor tag. Give an 'alt' to your image. This will be perfect for bot to read & also will help in image searching.
This is straight from the horse's mouth: http://www.youtube.com/watch?v=fBLvn_WkDJ4
As of September of 2015, the most common practice is to use the following CSS:
.sr-only{
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}
I do it like this:
.hidden-text {
left: 100%;
display: inline-block;
position: fixed;
}
Another way
position: absolute;
top: 0px;
left: -5000px;
It might work.
.hide-text {
opacity:0;
pointer-events:none;
overflow:hidden;
}
I realize this is an old question, but the Bootstrap framework has a built in class (sr-only) to handle hiding text on everything but screen readers:
<span class="sr-only">Home</span>
Related
Is it possible to hide the alt text using CSS in all the browsers,
I tried with color:transparent, it is working in all browsers except IE.
Is it possible to do it in IE using CSS?. Thanks in advance for any help.
How about using font-size: 0? It works in hiding alt text before image loads or if image src URL is not available.
The kellum method:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Also don't have the performance drawback of -9999px method where browser draw a box with size of 9999px.
Further explanation: replacing-the-9999px-hack-new-image-replacement
You can use text-indent:-9999px
HTML
<img src="images/test.jpg" alt="alternative">
CSS
img{
text-indent:-9999px
}
Demo
Instead of using color:transparent; use display:none;.
But you should not use this technique.
As #Quentin said in the comment:
If the text isn't good enough for humans then it isn't good enough for search engines.
You should not hide the alt text. Google knows this only used for SEO purpose and nothing important and will penalize for such. And you may be blacklisted on Google Search Engine.
So, don't use them just for SEO purpose.
You could also use the onerror callback to set the display property to none:
<img src="images/test.txt" onerror="this.style.display='none';">
Use text-indent: -9999px; and display: none.
fiddle link
HTML
<h1 class="technique-four">
<a href="#">
<img src="images/header-image.jpg" alt="CSS-Tricks" />
</a>
</h1>
CSS:
h1.technique-four {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;
display: none;
}
This worked:
img{
color: rgba(0, 0, 0, 0) !important;
}
transparent didn't work for me too.
This seems to work for me. Just add it to your img styles:
text-indent: -100%;
overflow: hidden;
I think this is a best solution:
img {
text-indent: -100vw;
overflow: hidden;
}
An empty image is centered and alt text is not displayed. Also it does not overflow over other images.
During my random testing I saw a behavior where I put an anchor tag inside another anchor tag. I made a jsfiddle.
<a class="groupPopper">
<a class="name"> content</a>
</a>
But in the developer tool it appears different:
I believe we cannot put an anchor tag inside another anchor tag as clicking on the inner anchor will bubble up the click event to the parent anchor tag which should not be allowed.
Is my assumption correct?
As #j08691 describes, nested a elements are forbidden in HTML syntax. HTML specifications do not say why; they just emphasize the rule.
On the practical side, browsers effectively enforce this restriction in their parsing rules, so unlike in many other issues, violating the specs just won’t work. The parsers effectively treat an <a> start tag inside an open a element as implicitly terminating the open element before starting a new one.
So if you write <a href=foo>foo <a href=bar>bar</a> zap</a>, you won’t get nested elements. Browsers will parse it as <a href=foo>foo</a> <a href=bar>bar</a> zap, i.e. as two consecutive links followed by some plain text.
There is nothing inherently illogical with nested a elements: they could be implemented so that clicking on “foo” or “zap” activates the outer link, clicking on “bar” activates the inner link. But I don’t see a reason to use such a structure, and the designers of HTML probably didn’t see one either, so they decided to forbid it and thereby simplify things.
(If you really wanted to simulate nested links, you could use a normal link as the outer link and a span element with a suitable event handler as the inner “link”. Alternatively, you could duplicate links: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)
Nested links are illegal.
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
I had the same issue as #thinkbonobo and found a way to do it without JavaScript:
.outer {
position: relative;
background-color: red;
}
.outer > a {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.inner {
position: relative;
pointer-events: none;
z-index: 1;
}
.inner a {
pointer-events: all;
}
<div class="outer">
<div class="inner">
You can click on the text of this red box. It also contains a
W3C compliant hyperlink.
</div>
</div>
The trick is to make an anchor covering the whole .outer div, then giving all other anchors in the inner div a positive z-index value. Full credit goes to https://bdwm.be/html5-alternative-nested-anchor-tags/
you can use object tag to solve this problem.
such as
<a><object><a></a></object></a>
I stumbled upon this issue when trying to make a div panel clickable by also have buttons. The workaround that I recommend is to use javascript events.
Here is a codepen example I created....
http://codepen.io/thinkbonobo/pen/gPxJGV
Here's the html portion of it:
Example of link embedded in link....
<div class=panel onclick="alert('We\'ll hi-ii-ii-ide')">
If you say run<br>
<button onclick="app.hitMe(event)">more</button><br>
<br>
And if you say hide...<br>
</div>
Notice how the event for the inner link is captured and stopPropagation() is used. this is critical to make sure the outer trigger doesn't run.
It is invalid HTML.
You can't nest a elements.
So, by definition, the behaviour is undefined.
For nested anchors, to prevent the inner event from bubbling up to the outer event, you want to stop propagation as soon as the inner event is clicked.
OnClick of inner event, use e.stopPropagation();
I know It's an old post, but I want to point out that user9147812 answer worked better than any other of the suggestions.
This is how I stacked the whole thing.
<style>
* {
padding: 0;
margin: 0 border:0;
outline: 0;
}
.outer_anchor {
display: inline-block;
padding: 5px 8px;
margin: 2px;
border: 1px solid #252632;
border-radius: 3px;
background: #1c1d26;
color: #fff;
text-shadow: 0 1px 0 #616161;
box-shadow: 1px 1px 3px #000;
transform: translateY(0);
transition: background 250ms;
}
.inner_anchor {
display: inline-block;
padding: 5px 8px;
margin: 2px;
border: 1px solid #252632;
border-radius: 3px;
background: #1c1d26;
color: #fff;
transform: translate(0px);
}
.inner_anchor:hover {
background: #647915;
}
</style>
ItemX<object><a class="elim_btn" href="#" title='Eliminate'>×</object></a>
Don't do it like that. I was facing the same issue in my app.
You can simply add <div> tag in top and <a> tags at child level.
something like:
<div id="myDiv">
</div>
make sure you add click event for myDiv in your script file as well.
window.location.href = "#dashboardDetails";
You cannot nest 'a' tags. Instead set outer container as 'position:relative' and second 'a' as 'position:absolute' and increase its z-index value. You'll get the same effect.
<div style="position:relative">
<img src="image-1.png">
<a style="position:absolute;top:0;z-index:99" href="page1.php"></a>
</div>
.outer {
position: relative;
background-color: red;
}
.outer > a {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.inner {
position: relative;
pointer-events: none;
z-index: 1;
}
.inner a {
pointer-events: all;
}
<div class="outer">
<div class="inner">
You can click on the text of this red box. It also contains a
W3C compliant hyperlink.
</div>
</div>
This is a bad way of coding but you can try this -
aaaa <table><tr><td><a href="2">bbbb </td></tr></table> </a>
Just like the Title says, "How to use text as a background instead of an image?"
I'm making a little application, that I personally think is cool but will probably be a waste of peoples time, and am altering the button in the drop down button to an upside down triangle using this html code ▼ . I'm not talking about setting the z-index or anything just simply placing a character for the little arrow. I thought about leaving it blank but I don't think users would understand that they are supposed to use the menu if I did so. Therefore I'm going to use the upside down triangle.
My CSS for the drop-down list is set up like this
select {
border: none;
overflow: hidden;
background: no-repeat right #ffffff;
-moz-appearance: none;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Put the text inside an HTML tag with class .text-background, set CSS styles to
.text-background {
position: absolute;
z-index: 1;
}
and set z-index to the elements you want to be on top of the text with z-index higher than 1.
edit:
If you know what the size of the select element is, you probably want to position that text over the dropdown. This however will block the button.
JSFiddle
If you want better looks and functionality you can use a 3rd party libraries such as this or this.
edit 2:
I just found this CSS only solution given by Danield that's probably going to suite your needs better.
https://stackoverflow.com/a/13968900/1419575
Try This, as suggested by Paulo Bergantino:
JS Fiddle
Click Here
HTML
<div id="container">
<div id="background">
Text to have as background
</div>
Normal contents
</div>
CSS
#container{
position: relative;
}
#background{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
How to add title='mandatory' from css to the following
<label class='mandatory'>Name</label>
.mandatory
{
background-image:url(/media/img/required.gif);
background-position:top right;
background-repeat:no-repeat;
padding-right:10px;
font-weight:bold;
}
Well, although it's not actually possible to change the title attribute, it is possible to show a tooltip completely from CSS.
You can check a working version out at http://jsfiddle.net/HzH3Z/5/.
What you can do is style the label:after selector and give it display:none, and set its content from CSS. You can then change the display attribute to display:block on label:hover:after, and it will show.
Like this:
label::after {
content: "my tooltip";
padding: 2px;
display: none;
position: relative;
top: -20px;
right: -30px;
width: 150px;
text-align: center;
background-color: #fef4c5;
border: 1px solid #d4b943;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
}
label:hover::after {
display: block;
}
You can't. CSS is a presentation language. It isn't designed to add content (except for the very trivial with :before and :after).
Quentin is correct, it can't be done with CSS. If you want to add a title attribute, you can do it with JavaScript. Here's an example using jQuery:
$('label').attr('title','mandatory');
As Quentin and other suggested this cannot totally be done with css(partially done with content attribute of css). Instead you should use javascript/jQuery to achieve this,
JS:
document.getElementsByClassName("mandatory")[0].title = "mandatory";
or using jQuery:
$('.mandatory').attr('title','mandatory');
document.getElementsByClassName('mandatory')[0].setAttribute('title', 'mandatory');
$('.jmandatory').attr('title', 'jmandatory');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Place the Mouse Over the following elements to see the title,
<br/><br/>
<b><label class="mandatory">->Javascript Mandatory</label></b>
<br/><br/>
<b><label class="jmandatory">->jQuery Mandatory</label></b>
It is possible to imitate this with HTML & CSS
If you really really want dynamically applied tooltips to work, this (not so performance and architecture friendly) solution can allow you to use browser rendered tooltips without resorting to JS. I can imagine situations where this would be better than JS.
If you have a fixed subset of title attribute values, then you can generate additional elements server-side and let the browser read title from another element positioned above the original one using CSS.
Example:
div{
position: relative;
}
div > span{
display: none;
}
.pick-tooltip-1 > .tooltip-1, .pick-tooltip-2 > .tooltip-2{
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div class="pick-tooltip-1">
Hover to see first tooltip
<span class="tooltip-1" title="Tooltip 1"></span>
<span class="tooltip-2" title="Tooltip 2"></span>
</div>
<div class="pick-tooltip-2">
Hover to see second tooltip
<span class="tooltip-1" title="Tooltip 1"></span>
<span class="tooltip-2" title="Tooltip 2"></span>
</div>
Note: It's not recommended for large scale applications because of unnecessary HTML, possible content repetitions and the fact that your extra elements for tooltip would steal mouse events (text selection, etc)
Can do, with jQuery:
$(document).ready(function() {
$('.mandatory').each(function() {
$(this).attr('title', $(this).attr('class'));
});
});
While currently not possible with CSS, there is a proposal to enable this functionality called Cascading Attribute Sheets.
On the one hand, the title is helpful as a tooltip when moving the mouse over the element. This could be solved with CSS-> element::after.
But it is much more important as an aid for visually impaired people (topic handicap-free website). And for this it MUST be included as an attribute in the HTML element. Everything else is junk, botch, idiot stuff ...!
We have buttons of many sizes and colors that use background images. There is a label on the background image itself, but we need to keep the button's text in the HTML for usability/accessibility. How do I make the text disappear in all browsers?
Modern browsers are easy, I just used -
color: transparent;
It's Internet Explorer 7 that I can't get to comply. I've tried these CSS properties, and none of them can remove the text completely without destroying my site's layout in the process.
font-size: 0px;
line-height: 0;
text-indent: -1000em;
display: block;
padding-left: 1000px;
I would very much appreciate any help.
Personally, I go for the all CSS approach:
{ display: block;
text-indent: -9999em;
text-transform: uppercase; }
For whatever reason, text-transform: uppercase; does the trick for IE7. Of course, you'll probably have your own CSS along with that for additional styling (if needed).
Additional to your
color: transparent;
You can use something like
padding-left: 3000px;
overflow: hidden;
Regards
In some cases you can use the propery "content" to change what is contained in the element, personally though I would use javascript to do it.
Just write blank text into the element.
If the button is an input submit button, use the image
<input type="image" src="/images/some_image.png" />
You can style this with CSS
input[type="image"] {
border: 1px solid red;
width: 150px;
height: 35px;
}
If they are links, Dave provided the answer.
How do I make the text disappear in
all browsers?
I suppoose you want the altarnative text to disappear if the image is loaded.
For this puprpose you can use this:
<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />
You can apply additional styles if needed, but this minimum will do the job for you.
If I understand the question correctly, this might work (I don't have IE7 to test on at the moment, so not 100% sure)
For markup like this:
<a href="javascript:return false;" class="button" id="buttonOK"><span
class="icon">Ok</span></a>
Use this css:
span.icon {
/*visibility: hidden;*/
display:block;
margin-left:-1000;
width:100px;
}
or this might work depending on your requirements for usability/accessibility:
span.icon {
visibility: hidden;
}
I don't know what users / programs the labels need to be in the HTML for, but if it's for text browsers and such, maybe you could insert a JavaScript that removes the labels onLoad?
JQuery or Prototype would make that very easy.