Ok so here's my problem, i have 3 buttons that work on both pc and mobile phones, but 1 major difference, on mobile devices the button shrinks by 50% and magically gets round corners. (ignore the fact that the top image has a check and the bottom has a plus sign, they do the same exact thing)
<button type="button" onClick="parent.location='../index.php'" title="Back to Main Menu">
<img src="../../css/images/back_25.png" />
</button>
<button type="reset" title="Reset">
<img src="../../css/images/restart_25.png" />
</button>
<button type="submit" title="Done">
<img src="../../css/images/plus_25.png" />
</button>
<input type="hidden" value="submit" name="submit" />
is there a quick fix to this problem? Once again both sets of buttons work properly, just look different.
As requested: i've also tried this code.
<button type="reset" style="width:49px; height:33px;">
<img src="../../css/images/restart_25.png" width="25" height="25" />
</button>
it's the same thing. i've also tried to set to style="width:50px; height:50px, and the button becomes a full circle.
Well, i really don't see anyone going to have an answer to my problem, so i just started messing with the height and width on the buttons a little more and got kinda of lucky to land on a middle ground on both browsers.
<button type="reset" title='Reset' style='height:33px; width:50px'>
<img src="../../css/images/restart_25.png" />
</button>
This seemed to be the sweet spot for my specific situation. because the pc broswer side was not effected and the iphone/safari side is acceptable to see the icons.
Related
I have the following code to display text on a generic button: https://jsfiddle.net/6ogo4bqr/
<input id="Button1" type="button" value="Log In" class="btn1" />
<br />
<input id="Button2" type="button" value="Log In" class="btn2" />
<br />
<div id="Button3" class="btn3">Log In</div>
It works fine on Firefox but on an iPad the button text appears more towards the top of the button (though it's OK when it uses Helvetica or Arial):
How can I get the text to align vertically on iOS (BTW I couldn't get JSFiddle to use #font-face)?
Try and remove the top and bottom padding of the text and adding a line-height instead.
#selector{
/*set both top and bottom padding with same values */
padding-top: 20px;
padding-bottom: 20px;
}
I eventually found that the particular font file I used was corrupt. It all worked ok when I replaced the file.
I've been reading on how to implement a button. There are a lot of answers.
None go into why a specific version is preferred over the other. What is the standard good practice way of today?
The button I am specifically looking for is an image (no text), uses href and has to submit.
I've come up with the following but it is not working:
<button class="btn-googleplus" href="/auth/google" type="submit"></button>
<input type="submit" class="btn-googleplus" />
button .btn-googleplus {
background-image: url("img/googleplus.png") no-repeat center center;
}
I've seen variants like this (I dislike as it seems complicated to have an img inside the button tag):
<button href="/auth/google" type="submit">
<img id="img" src="img/googleplus.png" />
</button>
Adding href to a button won't work. You need to put the button in a form wherein you specify your href value (the url) in the action attribute.
<form action="/auth/google">
<button href="/auth/google" type="submit">
<img id="img" src="img/googleplus.png" />
</button>
</form>
Ive been trying to style a submit button using an image. I would use CSS but the button is too complex design wise. I have tried adding a background image to a button but the image was badly positioned. I have also tried using
<input type="image" src="myimage.png">
But alas this is not a submit button so It doesn't work. I have looked and tried everything I believe possible but can't find a solution to making the button submit the form. Thanks.
if <input type="image"> doesn't work as expected just try instead
<button type="submit"><img src="myimage.png"></button>
but as I wrote in the comment above your code should work fine too
You have different possibilities for a submit button:
<input type="image">
<input type="submit">
<button></button> <!-- no type needed, since submit is the default type -->
These are all submit buttons. Pick the one, which suits you best.
Now you can choose to put an image between the button or use background-images and position them properly.
Example for button with background-image:
button {
background:url(data:image/gif;base64,R0lGODlhEgASAPYAAAAA/2NFB4tsE7KKCtCiDbWMCpFwDotwGdCgAe65FvjFKvjGLffDJNuqC5V1EaqJGPjHMPbKPvfOTLuRCo5yG+q3F/bEKG1SFdGjBvrcbeGuD2NFCY5wFfG+JPfNRpp1CLSOEfnJNPbOS/rPRsCSBmdJC8+mGvnLOv3ni/3nj/zkgPrUU9uqDWNCA9GoHfjSVfvie/rXW96tEmVHCreQFPnLP/fTXfrbdPzihf3qlP3mhsSYD5VzEPXEOffSWvrbcfzigP3rkqJ8DXFWFd2tFPrQSfnYYvvfdQAAAO7CNGVHDJh3DfLCK/nSUPraZ/zjfv3qkvzlhfvecqiCD2pNEL6TC/fGLvrSTfrbav3pjv3ojPzlgv3TT82kIWpOEZ55C+OyFfnMPvzdb/zda/3XWe/FOqiDEGpKAWZJDXNWEZt2B8KXDt6vHd+yIcifHKN+EXRTAmtQFmlMD2JCBWdIBmdIAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQF+gAAACwAAAAAEgASAAYH/4AAgoN1dHNzcnGDi4Rwb25tbGtqaWiMgmdmZWRjYmNkYWBfXoxnXVxiW1pZWltYV1ZVVIRTXFJRWVC6WU9OTUxLSoJwSWO4SEi6yEdGRURDAHRCV0+5yFBByEA/Pj08SnQ7ZDrWSDlQyDg3NjU0M3MyMTrK5lnIMFgvNS4tLSwrKqCcS4FiC5AnUoxcOWGiRQkSI6ToQKFjy5OLR7DEEBECxBwvH6zEQALjIgwYGUd66MBhA4A0Gkb4QJIhgxQsTkaKOIHhgiAlXyyIaIKsKBIPNSpQmDPIy4QOYUSIkCDCQwQIFR7MYCTHQQMGC6woYJAAwYGtl2ZcMFCAAIEBAg0utLi0aMOGfgHmMgoEACH5BAkFAAAALAYABQAGAAMABgcMgFCCg1BBhodBgoaBACH5BAkKAAAALAYABQAGAAMABgcOgEhIUFCCgkFBhoOFSIEAIfkEAQUAAAAsBgAFAAYAAwAGBwyAUIKDUEGGh0GChoEAOw==) no-repeat 5px center;
padding:5px 5px 5px 27px;
}
<button type='submit'>Submit</button>
(Or as a fiddle)
Use a button element and style it with css. Don't omit the text, you form should be accessible without images or css.
<button type='submit'>Informative submit text</button>
button {
background-image:url('myimage.png');
}
In case someone needs a newer html5 good answer:
<button id='' name='' value='' ><img src='img.jpg' /></button>
<input type="image" src="myimage.png">
or
<input type="submit" style="background:url(myimage.png)">
I've been wondering if there is any technique to use HTML/CSS like Flex/MXML. I mean, in MXML the HBox, VBox and Spacer are globally used, and their behavior is predictable. But in HTML/CSS we use a lot of float and it always have some 'hidden surprises'.
With Flex/MXML I would do:
<hbox width="100%">
<button label="Button A" />
<spacer width="100%" />
<button label="Button B" />
<button label="Button C" />
</hbox>
If you don't know flex I explain this code: the HBox places every element inside it side by side, and the Spacer is an invisible element; the spacer with 100% does not have the same width as the parent (HBox) but it fills the remaining space; this means that A will be aligned to the left, and the two other to the right.
Now in HTML/CSS I would make buttons B and C float to the right. I also would have to reverse the order of the buttons to the final result be the same. Besides, I probably would put some blank tag with "clear:both" to ensure that nothing below will be messed up.
So, is there any technique to obtain the same functionality in HTML/CSS? That would be fantastic if we could make .HBox .VBox .Spacer CSS classes and without javascript.
thanks in advance.
I do something similar to this using the following kind of markup
<div class="formline"><!-- kind of like your hbox -->
<div class="buttongroup" id="group1">
<button label="Button A"> <!-- of course, that's usually input type="submit" or something. -->
</div>
<div class="buttongroup" id="group2">
<button label="Button B">
<button label="Button C">
</div>
</div>
Then use CSS to style it.
I'd float group1 to the left, float group2 to the right. The enclosing formline contains the floating within it. The buttons appear in the correct order, I don't have to reverse them.
This is all logical/structural markup and can be styled different ways; it's not there just for presentation.
I use sensible names depending on what I'm doing, not things like "group1", "group2".
You could give your top level div a class named hbox and target its sub items. Example: http://jsfiddle.net/soparrissays/WJ2Lk/4/
html:
<div class="hbox">
<input type="button" value="Button A" class="left-button" />
<input type="button" value="Button C" />
<input type="button" value="Button B" />
<div class="clear"></div>
</div>
style:
.hbox {
margin-top:45px;
}
.hbox input {
float: right;
}
.hbox .left-button{
float:left;
}
.clear{
clear:both;
}
Is this what you are looking for?
I am currently working on a university project, using HTML5.
I have been writing all my code using the button tag throughout.
I have been testing the site using chrome, however, have just noticed that although the buttons appear in IE and Firefox, they do not function.
Is there a way to get around this? Or does the button tag just not work in these browsers?
This is the code which works perfectly well in chrome, but not other browsers.
<div class="option" id="question1" style="display:none">
<p> Which way do you think the criminals have fled?</p>
<p>Up the Stairs <button class="arrow" id="stairs"><img src="images/arrow.png" width="15" height="15"/></button></p>
<p>Down the Alley <button class="arrow" id="alley"><img src="images/arrow.png" width="15" height="15"/></button></p>
</div>
The button element cannot have interactive descendants. Ergo, you cannot have an a tag as a child of the button element. Simply remove the a tag from the button, and change your code as necessary.
For more information, read up on the button Element in the HTML Specification.
Example
<div class="option" id="question1" style="display:none;">
<p>Which way do you think the criminals have fled?</p>
<p>Up the Stairs <button class="arrow" id="stairs"><img src="images/arrow.png" width="15" height="15"></button></p>
<p>Down the Alley <button class="arrow" id="alley"><img src="images/arrow.png" width="15" height="15"></button></p>
</div>