Text inside buttons isn't tappable - html

My buttons structure is as stranded as it can be:
<a class="button">click me</a>
They work just fine on click.
But, on touch devices, you can get them to work by tapping at the areas around the text inside the button. When you tab in the center "click me" it just does not work.
It is baffling me and I have not been able to find out why.
You can try it live by going to https://plutio.com from your touch device and try to tab on the Get Started button.
It won't work unless you tab around the button text.
Things I tried:
line height
user-select
box-sizing
appearance
pointer-events to none

I got it please use below code:
.button:after, .button:before{
display:none
}

Related

CSS When tabbing through page

I have this site where some keyboard only people will use. On some certain elements nothing shows when tabbed onto them. the element is as follows
<div id="NBSCustomiseHomepageLink"><div id="NBSCustomiseHomepageButton">Edit your profile</div></div>
I have added an outline to get the correct border I want for when it is tabbed onto it. The problem I face is that I don't know how to make it so it comes on when its tabbed onto any ideas?
css code is
#NBSCustomiseHomepageLink{
outline:black dotted thin;
}
If i am right it :focus and Fiddle is here

How would i make an invisible, clickable and accessible button that can be accessed through tab and enter/space keys?

this is the code for a button that is currently operating
<a class="ng-click" ng-show="hasSuperUserAccess && !siteIsBeingEdited" class="addRowSite" ng-click="addSite()">
{{ 'SiteManager_AddSite'|translate }}
</a>
Add style="font-size:0px;" to the tag. This sets the font size to 0 pixels, rendering the link invisible but still usable via Tab and Enter key.
http://jsfiddle.net/kL0wm6yd/
#link-name {
visibility: hidden;
}
This will hide the element from the page, you cannot click on it, but using tab you'll be able to select it and use enter to 'click' it. It also still occupies space on the page (which is why you can tab/enter).
I used the fiddle to denote first line and last line, so you can see that the link is still taking up space, however it is not visible. (you can't use tab in jsfiddle so just upload that code to your page and it will work. Any more questions just comment here.

HTML input text box scrolls up and down if drag with mouse

I tried to replicate the problem I'm having on my website with the below js fiddle but couldn't.
http://jsfiddle.net/YD6PL/116/
HTML:
<input class="givenLetters" type="text" value="h" disabled>
CSS:
.givenLetters {
width: 40px;
height: 40px;
text-align:center;
font-style:italic;
font-weight:bold;
text-decoration:underline
}
For some reason on the website when the user clicks and holds the mouse button they can scroll the input text up and down. It would be like being able to drag the 'h' in the js fiddle example up and down but still within the textbox.
What could cause this behavior? I would like the website to function as the js fiddle but can't figure out what would be different with the website.
The box-sizing, display or line-height properties come to mind if you're getting scrollable text. Open up a web development console (Firebug in Firefox or CTRL+SHIFT+J in Chrome), use the element selector to choose the element and then start disabling properties until the effect stops. Keep in mind it could be a combination of properties as well.

button element not removed from print in IE9

I have added a print button to my page.
<button type="button" class="printBtn">Print This Page</button>
And now I want to remove the element from the print.
I used:
.printBtn{ display:none;}
This works for all other browsers perfectly but for some reason IE does not entirely remove the button when I print the page. The button does not display in print but it messes up the format of my images
example of the images aligned properly not in print preview:
http://i244.photobucket.com/albums/gg5/robasc/Untitled2.png?t=1323881931
example of the images not aligned in print preview and the button is removed using the above css and html:
http://i244.photobucket.com/albums/gg5/robasc/Untitled.png?t=1323881871
I believe the button still exists and is distorting the rest of the elements in the document.
Does anyone know how to fix this issue?
You could try using 'onbeforeprint' and jQuery to remove the button from the DOM (a little heavy handed).
you can try to use
.printBtn{
visibility:hidden;
}
that hides the butten

IE: Only part of an anchor is clickable

I want to have an anchor with a specific height and width.
There is no text on it since it's meant to be put in front of a certain area of the page.
Here is the code:
It's working fine in everything but IE6 and IE7. If I add a border, I can see that the anchor has the correct size, but if I try to click it, only the top part will be clickable.
I don't know why it's doing this. I tried adding a onclick even with an alert, and the same thing, it's impossible to click on the bottom part of the anchor.
It's really weird, did this happen to anyone before? Anything will help.
another way of handling this issue is a little "hack/workaround", when the block element got a background-color everything is fine, as you aspect it. make use of something like this:
a {
..
background-color: white;
opacity: 0;
filter: alpha(opacity=0);
..
}
In previous versions of IE, its not possible to register the onclick event on block level elements themselves. Instead, IE applies the onclick to the text or inline elements inside the block.
I've found that putting a transparent image inside the anchor that is the same size as the full anchor will register the onclick.
<a href="/" style="width:370px;height:80px;display:block;position:absolute;">
<img src="Transparent.gif" style="width: 370px; height: 80px"/>
</a>
Since this link is absolutely positioned it sounds to me like there is another block partially overlapping it thus hiding half of it from the click event.
Any image placed in the anchor background, and then positioned out of sight will fix your problem for IE6 and IE7. You need not have an image the full size of the anchor as suggested.
This means you can use a sprite or other image that is already being loaded on the page to save another call to your server.
<a style="position:absolute; z-index:2; background:url(/images/your-sprite.gif) -9999px no-repeat;" href="#">Your anchor</a>
it could be that this is a z-index issue with another div/span/etc.