I have a form on my website where the submit button is not working. This is only occurring on IE though. It works properly on all other browsers. Do you know what may be the issue? Here is the embedded HTML that is being used for the form. Thank you for any help you could give!
<html>
<head>
<style>
.textbox {
background: #F1F1F1 url(http://html-generator.weebly.com/files/theme/input-text-40.png) no-repeat;
background-position: 5px -7px !important;
padding: 10px 10px 10px 21px;
width: 150px;
border: 1px solid #CCC;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
color:#666;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #CCC;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #CCC;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #CCC;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #CCC;s
}
.textbox:focus {
background-color: #FFF;
border-color: #E8C291;
outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #E8C291 inset;
box-shadow: 0 0 0 1px #E8C291 inset;
}
.myButton {
-moz-box-shadow:inset 0px 0px 0px 0px #cf866c;
-webkit-box-shadow:inset 0px 0px 0px 0px #cf866c;
box-shadow:inset 0px 0px 0px 0px #cf866c;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #781400));
background:-moz-linear-gradient(top, #d0451b 5%, #781400 100%);
background:-webkit-linear-gradient(top, #d0451b 5%, #781400 100%);
background:-o-linear-gradient(top, #d0451b 5%, #781400 100%);
background:-ms-linear-gradient(top, #d0451b 5%, #781400 100%);
background:linear-gradient(to bottom, #d0451b 5%, #781400 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#781400',GradientType=0);
background-color:#d0451b;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:14px;
padding:8px 12px;
text-decoration:none;
text-shadow:0px 0px 0px #854629;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #781400), color-stop(1, #d0451b));
background:-moz-linear-gradient(top, #781400 5%, #d0451b 100%);
background:-webkit-linear-gradient(top, #781400 5%, #d0451b 100%);
background:-o-linear-gradient(top, #781400 5%, #d0451b 100%);
background:-ms-linear-gradient(top, #781400 5%, #d0451b 100%);
background:linear-gradient(to bottom, #781400 5%, #d0451b 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#781400', endColorstr='#d0451b',GradientType=0);
background-color:#781400;
}
.myButton:active {
position:relative;
top:1px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form id="Logon" name="Logon" action=" https://secure1.ufsdata.com/PBI_PBI1961/pbi1961.ashx?WCI=RemoteLogin&RT=075902308&LogonBy=Connect3" method="post" target onsubmit="return subcount();" autocomplete="off">
<input class="textbox"type="text" id="AccessID" name="AccessID" placeholder="Online Banking ID">
<button class="myButton">Submit</button>
</form>
<br><br>
<br><br>
</body>
</html>
You need to use Javascript's onclick Event.
Change the button to this:
<button type="submit" class="myButton">Submit</button>
Related
I want my buttons to be equally spaced out within that box. I tried using the align left. center, right but it's not actually moving anywhere. If I give it a padding, it won't look well on mobile.
body {
background-color: #9FDFF0;
}
#mine {
width: 550px;
margin: auto auto auto auto;
padding: 10px 10px;
background-color: white;
min-height: 100px;
border: 2px solid #73c0d8;
border-radius: 6px;
height: auto;
max-width: 100%;
}
img {
max-width: 100%;
height: auto;
width: auto\9;
/* ie8 */
}
p {
font-size: 30px;
}
.OrangeBtn {
-moz-box-shadow: inset 0px 1px 0px 0px #f9eca0;
-webkit-box-shadow: inset 0px 1px 0px 0px #f9eca0;
box-shadow: inset 0px 1px 0px 0px #f9eca0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f2ab1e));
background: -moz-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
background: -webkit-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
background: -o-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
background: -ms-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
background: linear-gradient(to bottom, #f0c911 5%, #f2ab1e 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e', GradientType=0);
background-color: #f0c911;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #e65f44;
display: inline-block;
cursor: pointer;
color: #c92200;
font-family: Verdana;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ded17c;
}
.OrangeBtn:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f2ab1e), color-stop(1, #f0c911));
background: -moz-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background: -webkit-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background: -o-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background: -ms-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background: linear-gradient(to bottom, #f2ab1e 5%, #f0c911 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2ab1e', endColorstr='#f0c911', GradientType=0);
background-color: #f2ab1e;
}
.OrangeBtn:active {
position: relative;
top: 1px;
}
<body>
<div id="mine">
<h1>
<center>Logo Goes Here</center>
</h1>
<a class="OrangeBtn" href="#">My Button 1</a>
<a class="OrangeBtn" href="#">My Button 2</a>
<a class="OrangeBtn" href="#">My Button 3</a>
<hr>
<p>
The server is online
</p>
</div>
</body>
Use flexbox with justify-content: space-evenly;:
.button-container {
display: flex;
/*Next line does the magic*/
justify-content: space-evenly;
}
body {
background-color: #9FDFF0;
}
#mine {
width: 550px;
margin: auto auto auto auto;
padding: 10px 10px;
background-color: white;
min-height: 100px;
border: 2px solid #73c0d8;
border-radius: 6px;
height: auto;
max-width: 100%;
}
img {
max-width: 100%;
height: auto;
width: auto\9;
/* ie8 */
}
p {
font-size: 30px;
}
.OrangeBtn {
-moz-box-shadow: inset 0px 1px 0px 0px #f9eca0;
-webkit-box-shadow: inset 0px 1px 0px 0px #f9eca0;
box-shadow: inset 0px 1px 0px 0px #f9eca0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f2ab1e));
background: -moz-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
background: -webkit-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
background: -o-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
background: -ms-linear-gradient(top, #f0c911 5%, #f2ab1e 100%);
background: linear-gradient(to bottom, #f0c911 5%, #f2ab1e 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e', GradientType=0);
background-color: #f0c911;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #e65f44;
display: inline-block;
cursor: pointer;
color: #c92200;
font-family: Verdana;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ded17c;
}
.OrangeBtn:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f2ab1e), color-stop(1, #f0c911));
background: -moz-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background: -webkit-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background: -o-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background: -ms-linear-gradient(top, #f2ab1e 5%, #f0c911 100%);
background: linear-gradient(to bottom, #f2ab1e 5%, #f0c911 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2ab1e', endColorstr='#f0c911', GradientType=0);
background-color: #f2ab1e;
}
.OrangeBtn:active {
position: relative;
top: 1px;
}
<div id="mine">
<h1>
<center>Logo Goes Here</center>
</h1>
<div class="button-container">
<a class="OrangeBtn" href="#">My Button 1</a>
<a class="OrangeBtn" href="#">My Button 2</a>
<a class="OrangeBtn" href="#">My Button 3</a>
</div>
<hr>
<p>
The server is online
</p>
</div>
How can I put my button at the center of my page?
My button is in a div. I wanted to change the background of the div and put everything at the center of the page, like a login page.
My code:
.serverPW{
font: 18px Arial;
font-color: black;
}
.serverPwClass {
-moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
box-shadow:inset 0px 1px 3px 0px #91b8b3;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #44b395), color-stop(1, #6c7c7c));
background:-moz-linear-gradient(top, #44b395 5%, #6c7c7c 100%);
background:-webkit-linear-gradient(top, #44b395 5%, #6c7c7c 100%);
background:-o-linear-gradient(top, #44b395 5%, #6c7c7c 100%);
background:-ms-linear-gradient(top, #44b395 5%, #6c7c7c 100%);
background:linear-gradient(to bottom, #44b395 5%, #6c7c7c 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#44b395', endColorstr='#6c7c7c',GradientType=0);
background-color:#44b395;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:11px 23px;
text-decoration:none;
text-shadow:0px -1px 0px #2b8a7c;
top: 50%;
left: 50%;
}
.serverPwClass:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #44b395));
background:-moz-linear-gradient(top, #6c7c7c 5%, #44b395 100%);
background:-webkit-linear-gradient(top, #6c7c7c 5%, #44b395 100%);
background:-o-linear-gradient(top, #6c7c7c 5%, #44b395 100%);
background:-ms-linear-gradient(top, #6c7c7c 5%, #44b395 100%);
background:linear-gradient(to bottom, #6c7c7c 5%, #44b395 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#44b395',GradientType=0);
background-color:#6c7c7c;
}
.serverPwClass:active {
position:relative;
top:1px;
}
<div class="serverPW">
<label>Server password</label>
<form id ServerLogin>
<input id= "serverPassword" type="password" class= "serverPwClass" placeholder="Password">
</form>
</div>
JSFiddle
Simple way to do it:
.button {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: 400px;
}
This will horizontally and vertically align your button.
In the CSS put:
margin: 0 auto;
.center {
text-align: center;
}
<div class="center">
<button>click me!</button>
</div>
For future reference, please put JSFiddle in answer, but here you go:
.serverPW{
position: absolute;
height: 100%;
font: 18px Arial;
font-color: black;
text-align: center;
}
That should work.
Well... you could just use the 'center' tag in your HTML but then, it'd mess up the page, at least that's what happened in my experience.
Use the following code in CSS for the button.
.button{
position: absolute;
height: 100%;
font-size: 18px;
color: black;
text-align: center;
}
I'm trying to put a link to another website but it applies the whole CSS style for the button to the link, I just want it to be a plain text anchor link..
The CSS is below, sorry that it's alot of code, used a button generator to get it.. I'm new to this!
a.nav {
width: 80%;
display: inline-block;
list-style-type: none;
margin-bottom: 10px;
}
nav ul {
padding: 0;
margin-bottom: 10px;
display: inline-block;
}
a:hover {
color: #900;
background: #fff;
}
a {
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9', GradientType=0);
background-color: #f9f9f9;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: #666666;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}
.a:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
background: -moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9', GradientType=0);
background-color: #e9e9e9;
}
.myButton:active {
position: relative;
top: 1px;
}
see the updated answer, you can change the styles for the ".ext_link" as per your need
Fiddle Sample
Since you have styled the anchor link with your button style, all <a></a> tags with look like a button. To simply fix this, presuming you only want the button style applied to your nav, append a nav selector like so:
nav a {
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9', GradientType=0);
background-color: #f9f9f9;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: #666666;
font-family: arial;
font-size: 15px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}
This way you only style the anchor tags that are within your nav.
JSFiddle updated
It seems that I can't get the hang of this, and ugh it's pretty frustrating.
This is a similar question to my previous question here.
http://jsfiddle.net/bm33e/
How would I get the red dot in vertically middle relative to the text? I've tried solutions and slight variations but couldn't get it working.
CSS
body { padding: 50px; background-color: #222; }
.led {
display: table-cell;
width: 16px;
height: 16px;
border-radius: 50%;
float: left;
}
.led-red {
background-color: #ED3029;
box-shadow: #000 0 -1px 6px 1px, inset #920 0 -1px 8px, #ED3029 0 3px 11px;
}
.led-green {
background-color: #00A448;
box-shadow: #000 0 -1px 6px 1px, inset #490 0 -1px 8px, #00A448 0 3px 11px;
}
.hi {
max-width: 40%;
-moz-box-shadow:inset 0px 0px 0px 0px #646464;
-webkit-box-shadow:inset 0px 0px 0px 0px #646464;
box-shadow:inset 0px 0px 0px 0px #646464;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #707070), color-stop(1, #646464));
background:-moz-linear-gradient(top, #707070 5%, #646464 100%);
background:-webkit-linear-gradient(top, #707070 5%, #646464 100%);
background:-o-linear-gradient(top, #707070 5%, #646464 100%);
background:-ms-linear-gradient(top, #707070 5%, #646464 100%);
background:linear-gradient(to bottom, #707070 5%, #646464 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#707070', endColorstr='#646464',GradientType=0);
background-color:#707070;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
cursor:pointer;
color:#ffffff;
font-size:40px;
font-weight:bold;
padding:14px 20px;
text-align: right;
height: auto;
}
HTML
<div class="hi">
<div class="led led-red" vertical-align="middle">
</div>
Deluxe
</div>
Thanks again stackoverflow helpers :)
Since your div.hi has relative position and your .led height is constant, you can absolutely position .led and use calc() to center it:
.led{
position: absolute;
top: calc(50% - 8px);
}
JSFiddle
Note: this is a css3 solution is not compatible in really old browsers
if you don't mind unloading some of that css.
I would use the inline-block property on that div. I think its more aptly done that way.
.led {display:inline-block;}
http://jsfiddle.net/bm33e/4/
In IE8 one of my buttons background's is overflowing it's border. Here is an image that highlights the problem:
A live example can be seen here: http://rcnhca.org.uk/sites/first_steps/
The markup for the button is:
<a class="button alpha bold" href="#">
<img alt="rcn icon" src="http://rcnhca.org.uk/sites/first_steps/wp-content/themes/megaamazing/library/images/rcn-icon.png">
</a>
And the css (I use filters to draw a gradient instead of an image):
a.button.alpha, a.button.alpha:focus {
margin-left: 0px;
}
a.button.omega, a.button.omega:focus {
margin-right: 0px;
}
a.button{
display: block;
position: relative;
float: left;
margin: 10px 5px;
right: 0px;
height: 2.438em;
line-height: 2.438em;
padding: 0 0.938em;
border: #3a90a7 2px solid;
font-size: 0.938em;
text-decoration: none;
color: #202d32;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.oldie a.button{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
a.button:hover {
border: #202d32 solid 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
}
a.button:active{
padding-top: 0.125em;
padding-left: 1.063em;
padding-right: 0.813em;
height: 2.313em;
background: #e5e5e5; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: #cccccc;
background: -moz-linear-gradient(top, #cccccc 0%, #cccccc 3%, #e5e5e5 5%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(3%,#cccccc), color-stop(5%,#e5e5e5), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: -o-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: -ms-linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
background: linear-gradient(top, #cccccc 0%,#cccccc 3%,#e5e5e5 5%,#ffffff 100%);
-moz-box-shadow: 0 1px 2px #AAAAAA inset;
box-shadow: 0 1px 2px #AAAAAA inset;
}
.oldie a.button:active {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
}
a.button img {
position: relative;
margin-right: 15px;
vertical-align: middle;
}
Does anyone know what's going on? Thanks.
I can't explain why, but when you remove the horizontal margins on the anchor it fixes the problem (both left and right)
My best guess is that the IE filter is doing something unpredictable.
If you wrap the element then apply a margin to that instead, it should solve it.
there is no way to do this for IE8 because its not support css3 BTW its work in IE9.
for more details about IE & CSS compatibility check this
http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx