I got one strange problem which I never got before. Please see this code:
The css:
#btn{
margin-left:150px;
padding:10px;
display:block;
}
#btn a{
padding:5px 20px;
background:green;
color:#FFF;
text-decoration:none;
outline:none;
}
#btn a:hover{
background:#933;
}
#btn a:focus, #btn a:active{
background:#CF0;
color:#000;
}
Here the HTML
<div id="btn">
Click here
</div>
The focus and active css working well in firefox, but not in the chrome and safari.
Yeah seems like little problem with focus in webkit. Not really a bug. Easily fixable in html. Just use tabindex.
[hide]
[show]
ta da ...
This is also the case for Webkit based 'focus' events, it doesn't take. The fix is to put a tabindex="0" attribute on the A and then it receives the focus event. You might also want to have at least a "#" as the href just in case.
It's fixable, some additional code needed though...
<div id="btn">
Click here
</div>
jsfiddle
I know it's ridiculous... You can read more here
Hope this helps
The solution posted by user1040252 did the trick for me.
I have a div with images that sets an image in a span tag to visible on a click.
Firefox ignores the classname:focus in my CSS file.
<div class="thumbnail_frame">
<img src="pictures\\figures\\thumbs\\image_1.JPG"/>
<span>
<img src="pictures\\figures\\image_1.JPG"/>
</span>
</div>
My CSS (part of it):
.thumbnail_frame:focus span{visibility: visible;}
//...
.thumbnail_frame span
{
visibility: hidden;
position: fixed;
top: 20px;
left: 20px
}
But this only worked in Internet Exporer 9. Firefox 12 kept ignoring the focus also in other simple examples like found here:
explanation:
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm
try it:
http://de.selfhtml.org/css/eigenschaften/anzeige/pseudo_links.htm
But adding tabindex="0", as in
<div tabindex="0" class="thumbnail_frame">
<img src="pictures\\figures\\thumbs\\image_1.JPG"/>
<span>
<img src="pictures\\figures\\image_1.JPG"/>
</span>
</div>
works like a charm. One click opens the hidden span, and the second one closes it very neatly.
Use tabindex="0" to make an element focusable if it is not already. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex for more information about tabindex.
Setting tabindex to -1 makes it unfocusable. Setting tabindex to a positive integer is not recommended unless you're trying to explicitly set the tab order, as it can create accessibility issues.
For more information about tabindex and accessibility, see https://webaim.org/techniques/keyboard/tabindex.
You should know that the pseudo class :focus doesn't go with A. The A tag has 4 pseudo classes : :link, :hover, :active, :visited
Related
What's the simplest markup to display text upon clicking an image?
No toggling, CSS or Javascript. I have a series of thumbs that I would like put a caption to when clicked. I've been searching for hours for what seems to be so simple and I just don't get it.
The following approach is rather simple, but it makes the image caption text visible only until something else is clicked on in the page so that a link is followed. (It’s not quite clear from the question whether this is OK.)
Make the image caption text initially invisible, using CSS. Make the image a link to its caption, and use the :target pseudo-class to turn the caption to visible when the link is clicked on. Demo: jsfiddle.
<style>
a img { border: none; }
.caption { visibility: hidden; }
.caption:target { visibility: visible; }
</style>
<a href=#capt1><img src=test1.png alt=foo></a>
<div class=caption id=capt1>Image caption text</div>
<a href=#capt2><img src=test2.png alt=foo></a>
<div class=caption id=capt2>Image caption text 2</div>
As a side effect, the page may move down a bit, due to clicking on a link. If this is a problem, you could use “self-pointing” links instead:
<a href=#capt1 id=capt1><img src=test1.png alt=foo><br>
<span class=caption>Image caption text</span></a>
and then you would modify the selector in the essential CSS rule:
:target .caption { visibility: visible; }
This works across browsers except IE 8 and older. They can be covered using polyfill, i.e. JavaScript code that emulates support to the pseudo-element in browsers without native support. See Polyfill for css :target, not(), and [tilde] sibling selectors?
this will work
<label for="toggle">
<img src="your image path" />
</label>
<input type="checkbox" id="toggle" />
<span>your text here</span>
for the CSS
#toggle{
position: absolute;
top: -9999px;
left: -9999px;
}
span{
display: none;
}
#toggle:checked + span{
display: block;
}
img{
cursor: pointer;
}
But by doing this, against semantic rule of HTML.
Here the result.
Use a jQuery on() for each of the images, then use those click events to .toggleClass('visible') on the captions.
You might be able to get it to work with something like:
<img src="myimage.png" tabindex="1" /><div class="caption">Some text!</div>
CSS:
img~.caption{display:none}
img:active~.caption{display:block}
However, this is hacky at best. Something like this should really be done in JavaScript.
Is there a way? Yes! Is there a cross-browser way? No!
If you're not worried about it being cross browser or valid HTML, then this could work:
http://jsfiddle.net/charlescarver/XRBCF/
HTML:
<input hidden/>
CSS:
input{
-webkit-appearance:none;
-o-apperance:none;
-moz-appearance:none;
-ms-appearance:none;
padding:0;
border:0;
background-image:url(http://placedog.com/400/300);
height:300px;
width:400px;
display:block;
cursor:default;
}
input:focus{
outline: none;
}
input:focus:after{
content:"TEST";
background-color:red;
height:30px;
width:100%;
display:block;
position:relative;
top:270px;
}
Lets say this markup:
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
What i want is only to be visible the first letter of the text (in this case, just a T)
(Actually I won't end up using it but I am curious about this; sure can be helpfull later)
So this was my a attempt:
#socialMedia .Twitter{
display:none;
}
#socialMedia .Twitter:first-letter {
display: block !important;
}
I was able to check that it won't achieve it. Question is why? and is there some work-around this?
-EDIT-
We are looking for IE=+7/8 version capable solutions..
Salut
Try something like this:
.Twitter {
font-size: 0;
}
.Twitter:first-letter {
font-size: 12px;
}
<div class="Twitter">Twitter</div>
Maybe this is not the best solution, but it works.
Edit: Disclaimer: this does not work according to comments. Please don't use as-is without checking it fits your needs.
If you check the specification for the :first-letter pseudo-element, you'll notice the following:
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
The important word here is "block."
You are trying to use the pseudo-element on an <a/> tag with class of Twitter. By default, anchor tags are inline elements (not block level elements).
For your given markup, one solution to your problem would be to style the anchor this way:
.Twitter {
display:block;
visibility:hidden;
}
.Twitter:first-letter {
visibility:visible;
}
I'm not sure exactly what you are going for, but that is good enough for experimental purposes. Check out a demo here: http://jsfiddle.net/H7jhF/.
Another way is to use color: transparent
.twitter{
display: block;
color: transparent;
}
.twitter:first-letter{
color: #000;
}
<div id="socialMedia">
<a class="twitter">Twitter</a>
</div>
JSFiddle
However, this won't work for lte IE8.
References:
IE7 IE8 IE9 color:transparent property
color: transparent is not working in Internet Explorer
What you're doing is like hiding a parent element and trying to show one of its children, it won't work because the parent's style overrides it. The parent element also has to be a block level element for it to work. Like a div or p tag, or display: block; on the a tag.
Here's something using color:
HTML
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
CSS
body {
background-color:#FFF;
}
.Twitter{
display: block;
color:#FFF;
}
.Twitter:first-letter {
color:#000;
}
shoot the content off the page and show the letter using dynamic content:
.twitter{
text-indent:-9999px;
display:block;
position:relative;
}
.twitter:before,.twitter::before{
content:"T";
position:absolute;
width:10px;
height:15px;
z-index:100;
text-indent:9999px;
}
at play in this fiddle:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/
Why not just use JavaScript and split the string into an array and use the first item in the array. Or charAt()
The pure-CSS answers use visibility and color tricks to hide the remaining letters, but they are still present and affecting layout. It could cause layout issues, e.g. if you wish to float the element and put something beside it.
I found a funny way to do this without hidden elements. The trick is to shrink the entire word down to almost nothing and then blow up just the first letter. It's a bit like OP was trying to do, but it works because it's operating on a continuous spectrum rather than display: none which just shuts down anything inside it. (Kind of an analogue > digital situation.)
Demo
HTML:
<div>Ding Dong</div> and other stuff
CSS:
div {
font-size: 0.0000016px;
float: left;
}
div::first-letter {
color: red;
font-size: 10000000em;
}
Result:
Here's what I do:
.Twitter{
display:block;
width:1ch;
overflow:hidden;
white-space: nowrap;
}
I am using following CSS:
#userinfo_box a:link,a:visited
{
text-decoration:none;
}
#userinfo_box a:hover
{
text-decoration:underline;
}
The HTML is
<div id="userinfo_box">Hello World</div>
In IE6, Hello World is not being underlined. How to do it in IE6?
The only reason why IE6 might not be working in this instance is because the href is blank. Sometimes IE6 doesn't recognize a link properly if that property is blank. Try setting it as href="#" and it should work.
At the very least put a # in the href. Nothing in the href means it's not a link...so that might be your problem right there. If that doesn't fix the problem, let me know, and I'll install Multiple IE on my VM to test IE6.
<div id="userinfo_box">Hello World</div>
note that the selectors in your first ruleset should probably be corrected to:
#userinfo_box a:link, #userinfo_box a:visited {}
currently i'm having 2 issues. first of all, in chrome and safari there is a gray border around an image link. the border isn't there in firefox. here's the code:
Link title <img class="leaving" />
and css:
.leaving {
background-image: url("images/leaving.png");
height:10px; width:10px;
display:inline-block;
background-repeat:no-repeat;
border:none;
}
how do i get rid of the border?
also, certain heading links are being underlined in chrome and safari even though i set text-decoration to none. i would like to know how to get rid of the underline and also how to change it's color.
<a href="link">
<h3>Title</h3>
</a>
a h2,h3{
color:#00264B;
text-decoration:none;
}
"a" is set to underline in other places, but shouldn't "a h3" override anything else? what's going on here?
thanks.
you have a possible bug in your code :)
Here's what you have so far:
a h2,h3{
color:#00264B;
text-decoration:none;
}
The code above say's all H2's which are contained with "a" tags, and all h3's (which are NOT contained within "a" tags)
Firstly if you want all H3's which are contained inside "a" tags, then you need to do this:
a h2, a h3{
color:#00264B;
text-decoration:none;
}
Notice that I've added another "a" to the CSS
Secondly, and perhaps more importantly, I think it's better form to enclose "a" tags inside "h" tags as opposed to the way you are doing it:
h2 a, h3 a{
color:#00264B;
text-decoration:none;
}
But that might not work with your existing code:
Hope this helps
It is famous cross browser issue across Firefox and Safari. How ever the workaround for this problem is replace the img tag with span tag and every thing works as expected. I have changed the code as below
<body>
Link title <span class="leaving"/>
</body>
</html>
or if you want to continue with the img tag itself you need to remove width attribute from css definition. Please find the modified css below
.leaving {
background-image: url("images/leaving.png");
height:10px;
display:inline-block;
background-repeat:no-repeat;
border:none;
}
I want to style the :active state of a button that is represented by an <a> tag. The <a> tag has an inner <span> (beacuse I want to add an icon to this button).
I notice the :active state is triggered properly in everything but Internet Explorer 8. In IE 8, it appears that the area around the <span> (the <a>’s padding) triggers the :active state, but when clicking directly on the text within the <span>, the :active state is not triggered.
Is there a way to fix this without resorting to Javascript?
HTML
<a class="button" href="#">
<span>Add a link</span>
</a>
CSS
a.button { some styles }
a.button:active { some other styles }
Right, terribly over-complicated solution (and still imperfect), but: if you don’t wrap the link text in the <span>, and instead just use the <span> as a place to put your background image and position it absolutely within the <a>, then the <span> (mostly) stops blocking the :active state.
Test page: http://www.pauldwaite.co.uk/test-pages/2769392/3/
HTML
<a class="button" href="#">
<span></span>Link
</a>
CSS
<style type="text/css">
a.button {
position: relative;
padding: 10px;
color: #c00;
}
a.button:active {
color: #009;
font-weight: bold;
}
a.button span {
position: absolute;
top: 50%;
left: 3px;
margin-top: -2px;
border: solid 2px #000;
}
</style>
Of course, the area that the <span> covers still traps the click event, so when the user clicks on there, they won’t see the :active state. It is a slight improvement on the previous situation.
Tricky: IE 8 doesn’t seem to register the <a> tag as active when the <span> is clicked. (IE 6 and 7 are both fine. You found a regression!)
It does, however, register the <span> tag as active. If you can apply all the styles you want to change for the :active state to the <span>, then IE 8 will play along, e.g.
a.button:active,
a.button span:active/* This selector is for IE 8 only */ {
color: #009;
font-weight: bold;
}
Test page: http://www.pauldwaite.co.uk/test-pages/2769392/
Any styles that only apply to the link won’t change in IE 8 though. In the example above, the text changes colour when clicked, but the underline does not, as the underline style is attached only to the link (via the browser’s default styles), not the <span>.
I had the same issue, and FINALLY figured it out:
You need a target in the <a> tag, i.e. add the "href" attribute in the <a> tag:
<a id="logonButton" class="button submit" href="#Url.Action("Index", "Home")"><span>Log On</span></a>
Works like a charm in all IE versions. :)
Maybe:
a.button span { ...
a.button span:hover { ...
would work?
Alternatively, you could put the <span> outside the <a> instead. That seems to work.
HTML
<span><a class="button" href="#">
Add a link
</a></span>
Test page: http://www.pauldwaite.co.uk/test-pages/2769392/2/
Had exactly same problem today.
Try setting
z-index: -1; position: relative;
on the span.
This is what i came up with after reading this post.
I actualle wrote a long answer, with example code etc etc etc.. but while indent'ing css code, IE had a choke and crashed..
I came up with a solution that fixes the ie8 bug using jquery. Its an unreasonable use of resources for such a minor bug, but the app I was working on a the time was using a lot of jQuery already so it didn't matter.
HTML
<span>Button</span>
CSS
a.btn:active,
a.btn.ie8:hover { /* <-ie8 hack */
/* mouse down state a.btn style */
}
a.btn:active span,
a.btn.ie8:hover span { /* <-ie8 hack */
/* mouse down state a.btn span style */
}
Jquery
$(document).ready(function() {
var isIE8 = ($.browser.msie == true && $.browser.version == "8.0") ? true : false;
if (isIE8 === true) {
$("a.btn").bind({
mousedown: function() {
$(this).addClass('ie8');
},
mouseleave: function() {
$(this).removeClass('ie8');
}
});
}
});
You can fix it using this:
$('.yourspan').mousedown(function(){
$(this).parents('.youranchor:first').css("background-position","bottom");
});
$('.yourspan').mouseup(function(){
$(this).parents('.youranchor:first').css("background-position","top");
});