I have a submit button and am styling it using the following css:
.subm
{
background-color:Transparent;
background-image:url(Images/Button_Send.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;}
.subm:hover
{
background-color:Transparent;
background-image:url(Images/Button_Send_Over.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;
}
Here is the html:
<input type="submit" class="subm" value="" />
Nothing surprising. However, what annoys me is that when the submit button is clicked in IE it moves the image up a couple of pixels cutting them off which makes it look, hmm, good word, 'naff.' How can I compensate or stop this?
I have tried expanding the image and leaving a couple of blank pixels at the top but it still does the same thing!
Thanks R.
I had an issue with my buttons moving around when they were clicked in IE after I styled them too. The solution I found was:
1.) Give your button(s) an equal margin
2.) Place the button(s) in a wrapper division that you can position to your liking
.subm {
background-color:Transparent;
background-image:url(Images/Button_Send.png);
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;
margin:10px; //maybe more maybe less
}
<div style="position:...;float:...;">
<input type="submit" class="subm" name="myButton" id="myButton" />
</div>
Although I have to mention that in my particular case I'm styling my buttons by ID and not applying a class so you might have issues with multiple buttons using the .subm class. THIS WORKED FOR ME IN IE THOUGH.
Try replacing the input with the button tag.
<button type="submit"><img src="..." alt="..." /></button>
and see if this doesn't accomplish it. You would need to adjust your hover effects though which might prove to require either just putting text inside the button and using a negative text-indent, or a javascript hover event to change the referenced image.
Another option is using javascript to call the form submit on a normal link, as buttons typically have a click animation.
Just a note, you could probably get more consistent results by adding a background position, and all of this you can shorthand as well
.subm:hover
{
background: transparent url("Images/Button_Send_Over.png") top center no-repeat;
}
Yet another maybe more ideal option, use the input type image instead of submit.
<input type="image" src="..." Value="Submit" />
I am pretty sure this describes the bug and has some solutions for you:
Fixing the IE8 Form Button with Background Image On Click CSS Bug
Related
I created an icon at the side of my page that can be clicked to go back to the top of the page.
I thought this would be fairly simple, like so:
#back_to_top{
position:fixed;
right:0px;
bottom:80px;
padding:10px;
background-color:#fff;
opacity:0.5;
border-radius:10px 0px 0px 10px;
cursor:pointer;
}
#back_to_top img{
width:50px;
height:50px;
}
#content{
height:9999px;
}
<a id="top_of_page"></a>
<div id="content">loads of content</div>
<div id="back_to_top">
<a href="#top_of_page">
<img src="media/top.png">
</a>
</div>
However, when I click the icon it actually moves down the page by the same amount of pixels each time.
I have no other anchors or anything else with a similar ID.
My anchor tag is the first tag in my body.
my 'loads of content' is all generated dynamically from php.
I know its working in the snippet but I can't share a full example, however, any ideas why this might act this way, would be really appreciated.
Adding an a element with href="#" should do the trick.
Here you have an example of it working:
<h1>MOON</h1>
<div style="height: 700px;"><small>scroll down</small></div>
To the moon!
I prefer to use the Javascript window.scrollTo method. Passing in 0,0 will scroll the page to the top left corner instantly.
Syntax: window.scrollTo(x-coord, y-coord)
x-coord - Pixels along horizontal axis
y-coord - Pixels along vertical axis
This method allows you to scroll to any point on the page.
Depending on whether you want to use a link tag <a> or a <button> tag you have two simple approaches.
For a link tag:
<a href='#'>To Top</a>
is all you need.
For a button tag:
<button onclick="window.scrollTo(0,0)>To Top</button>
Both of these work well.
I have a dropdown menu which you can choose your location, then you click on the go button, which will direct you to another page,
This is the buttons code in html:
<input type="button" name="button" class="gobutton" onclick="openDir(this.form);">
and this is the part in CSS
.gobutton{background-color: url (../images/go.jpg); width:150px; height:50px; padding:0; border:0;}
Problem I have is that it is not changing the button to the image, its BLANK.
jsBin demo
background-color is not background-image
also remove the space between url and (
.gobutton{
background: url(../images/go.jpg); /* or use background-image */
width:150px;
height:50px;
padding:0;
border:0;
}
Use this button code instead:
<button name="button" class="gobutton" onclick="openDir(this.form);"><img src="../images/go.jpg"/></button>
Or, you can do it the way you are already doing it with an <input> element. The code should then be using background-image not background-color.
However, I would use the <button> tag over the <input> tag because you can insert direct HTML into it. Just use whatever is easiest for you.
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>
I would like to know how I can create a custom HTML button which has a background Image and I can show a custom text over that image.
For example, I would like to show a submit button for which I have a background image for that button and the text "Submit" comes on top of that Image.
I tried this -
<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">
However, it does not work properly. I just see the test submit and the button but the image does not show up.
I recommend that you use <button> instead of <input type='submit' /> or <input type='button' />. The reason is that you can embed HTML elements (nest elements) into the <button> element. This way, you can make a much more flexible button, which can be customized even more.
<button>
<span class='image'></span>
<span class='text'>Click Me!</span>
</button>
<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">
you have to specify the width and height of the image so it covers your button and yes check the path of the image
this is exactly what I have in one of my css and usually what I do in this situation:
html
<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>
css
.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}
The simplest way is probably to use a button element with a background. Use e.g. padding properties to make the button suitably large. It is a useful precaution to set a background color for the button, for use when the background image is not shown for some reason, using a color that has sufficient contrast with the text (so it should be similar in color usage to the background image). Example:
<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>
Caveat: In old versions of IE, there are several bugs in the implementation of button elements. The bugs bite most seriously if a form has several submit buttons.
The reason for the failure when using an input type=submit element is that they are commonly implemented by browsers using built-in routines that are rather immune to CSS.
Here's how I created buttons with actual pics on them along with text. In CSS I put:
button {
display: inline-block;
height: 200px;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 400px;
}
#alldogs-close-CSS {
background-image: url( All_dogs.jpg );
/*background-size: 100px 130px;*/
height: 150px;
width: 300px;
}
The button controls my height and width and #alldogs-close-CSS is the pic I wanted to show on the button.
In my Index.html page I just put:
<button id="alldogs-close-CSS">All Dogs</button>
Now the text isn't very pretty at the moment, but I haven't played with it yet. It does work, though.
OK here is what I found out, when I assign height to all my form elements, they will not be aligned horizontally, when they actually should.
Chrome rendered this OK, FF pushed the form button too far up.
Is there an elegant solution to this?
<form>
<input class="input_text" type="text" style="height:40px" value="some text">
<select style="height:40px">
<option value="0">0</option>
<option value="1">1</option>
</select>
<input type="submit" value="Search" style="height:40px">
</form>
Make sure the button has no padding/margin:
style="height:40px;margin:0;padding:0"
Each browser does its own thing regarding padding and margin.
Find out more about reset CSS and why/how to use them.
This is vertical align, not horizontal. Looks like this is bug in FF. As the work around add the "vertical-align:top" to the button
you can try to ditch input type button and use <button type="submit">Hello Button</button> then reset your form elements.
by using button tag you will have option to add nested elements. like <button><span>Funky Button!</span></button> for background image tricks and so on.
reset for form elements may look something like this:
/*remove ie side spacing(paddings)*/
button {position:relative; border:0; padding:0; cursor:pointer; overflow:visible;}
/*remove extra padding for firefox*/
button::-moz-focus-inner {border: none;}
button span {position:relative; display:block; white-space:nowrap;}
/*fix for webkit (safari-chrome)*/
#media screen and (-webkit-min-device-pixel-ratio:0) {button span {margin-top: -1px;}}
input {border:0; margin:0; padding:0;}
textarea {border:0; margin:0; padding:0;}
then you can add your borders styles backgrounds as you want and they should look identical in almost every modern browser
I've found this to be a bug in Firefox.
In the past I've fixed it with
1: a firefox specific hack.
2: not setting the height of the button ever. It remains vertically centered in all browsers.