What are these pesky form button up to now?

**Gitman** · 03-30-2006 12:50 AM

Hello,

Why is it in IE that whenever you click in the form the input button's border changes? This doesn't happen in FF. The border gets thicker by a pixel or two in IE, and it's ugly as heck. How do I stop this from happening? Here is some code for the form:

Code:


<head>
<style>
input.btn{
   color:#000000;
   font-family:'trebuchet ms',helvetica,sans-serif;
   font-size:84%;
   font-weight:bold;
   background-color:#ffffff;
   border:1px solid;
   border-top-color:#000000;
   border-left-color:#000000;
   border-right-color:#000000;
   border-bottom-color:#000000;
   filter:progid:DXImageTransform.Microsoft.Gradient
      (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffffff');
}


input.btnhov{
   color:#0D0D0D;
   font-family:'trebuchet ms',helvetica,sans-serif;
   font-size:84%;
   font-weight:bold;
   border-top-color:#FD2600;
   border-left-color:#FD2600;
   border-right-color:#FD2600;
   border-bottom-color:#FD2600;
}
</style>

<form name="frmCustomCustomerLogin" method="POST" action="#" onsubmit="return StartCustomLogin();">


</head>

<table>


<tr>





<td width="100%">


<table border="0" width="75%" cellpadding="0" align="center">


	<tr>


		<td width="134" colspan="2">Username:</td>


	</tr>


	<tr>


		<td width="134" colspan="2"><input type="text" name="txtUsername" size="17" maxlength="30" style="font-size:7pt; width: 105px; height: 17px; border-top: solid 1px #666666; border-right: solid 1px #cccccc; border-bottom: solid 1px #cccccc; border-left: solid 1px #666666;"></td>


	</tr>


	<tr>


		<td width="134" colspan="2">Password:</td>





	</tr>


	<tr>


		<td width="134" colspan="2"><input type="password" name="txtPassword" size="17" maxlength="30" style="font-size:7pt; width: 105px; height: 17px; border-top: solid 1px #666666; border-right: solid 1px #cccccc; border-bottom: solid 1px #cccccc; border-left: solid 1px #666666;"></td>





	</tr>

	<tr>


		<td width="44">


		<input type="submit" value="Login" name="btnLogin" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" style="font-size:7pt; padding-bottom: 2px; width: 46px; height: 19px;">


				


</td>


		<td width="90">


				


		<input type="button" value="Register" name="btnRegister" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" style="font-size:7pt; padding-bottom: 2px; width: 60px; height: 19px;" onclick="window.location.href='#';"> 


		


</td>


	</tr>


    <tr>


		<td width="134" colspan="2">


        <a class="link3" href="#">Forgot
        Password?</a> 


		


</td>


    </tr>


</table>





</td>

</form>

Thanks for reading.

**Fang** · 03-30-2006 01:13 AM

Code:

 onclick="window.location.href='#';this.blur();"

**Gitman** · 03-30-2006 02:25 PM

That doesn't work.

**Fang** · 03-31-2006 12:16 AM

It solves the problem for the code given.
If it's not working then there's some other code not given that's affecting the buttons.

**Gitman** · 03-31-2006 09:35 AM

hey,

it's the login button that has the extra border around it, not the register button. I added that code right where you specified, and if you just use the code above to create an html file, the black border is still there.

**Fang** · 03-31-2006 10:33 AM

The border only appears onmousedown event. THe border returns to normal after the button has been clicked.

**Gitman** · 03-31-2006 02:24 PM

Hey Fang,

Can you please create a small .html file with the fixed code, and lemme see if it works for me.

Thanks

**Fang** · 04-01-2006 04:28 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>buttons</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
input.btn{
   color:#000000;
   font-family:'trebuchet ms',helvetica,sans-serif;
   font-size:84%;
   font-weight:bold;
   background-color:#ffffff;
   border:1px solid;
   border-top-color:#000000;
   border-left-color:#000000;
   border-right-color:#000000;
   border-bottom-color:#000000;
   filter:progid:DXImageTransform.Microsoft.Gradient
      (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffffff');
}

input.btnhov{
   color:#0D0D0D;
   font-family:'trebuchet ms',helvetica,sans-serif;
   font-size:84%;
   font-weight:bold;
   border-top-color:#FD2600;
   border-left-color:#FD2600;
   border-right-color:#FD2600;
   border-bottom-color:#FD2600;
}
</style>

</head>
<body>
<form name="frmCustomCustomerLogin" method="POST" action="#" onsubmit="return StartCustomLogin();">

<table border="0" width="75%" cellpadding="0" align="center">
<tbody>
    <tr>
        <td width="134" colspan="2">Username:</td>
    </tr>
    <tr>
	    <td width="134" colspan="2"><input type="text" name="txtUsername" size="17" maxlength="30" style="font-size:7pt; width: 105px; height: 17px; border-top: solid 1px #666666; border-right: solid 1px #cccccc; border-bottom: solid 1px #cccccc; border-left: solid 1px #666666;"></td>
    </tr>
    <tr>
        <td width="134" colspan="2">Password:</td>
    </tr>
    <tr>
        <td width="134" colspan="2"><input type="password" name="txtPassword" size="17" maxlength="30" style="font-size:7pt; width: 105px; height: 17px; border-top: solid 1px #666666; border-right: solid 1px #cccccc; border-bottom: solid 1px #cccccc; border-left: solid 1px #666666;"></td>
    </tr>
    <tr>
        <td width="44"><input type="submit" value="Login" name="btnLogin" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" style="font-size:7pt; padding-bottom: 2px; width: 46px; height: 19px;"></td>
		<td width="90"><input type="button" value="Register" name="btnRegister" class="btn" onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" style="font-size:7pt; padding-bottom: 2px; width: 60px; height: 19px;" onclick="window.location.href='#';this.blur();"></td>
    </tr>
    <tr>
    	<td width="134" colspan="2"><a class="link3" href="#">Forgot Password?</a></td>
    </tr>
</tbody>
</table>
</form>
</body>
</html>

**Gitman** · 04-01-2006 02:37 PM

Hey Fang,

Thanks for taking the time to write. I made teh html file, and opened it in IE, and it does the exact same thing as before. If you click your mouse in the username or password field, look how the login button changes in IE. It doesn't do that in FF. In IE the login button gets a wider black border whenever you click in one of those text fields. Your code didn't fix this problem.

Thanks.

**Fang** · 04-02-2006 12:44 AM

That's only onmousedown, once the button is released it returns to 'normal'.
You could see if one of the Microsoft events would change this effect, or fake the button with a div or anchor.

**Gitman** · 04-02-2006 04:01 PM

I'm not sure what you are referring to, but just to note, your code did absolutely nothing to my code. It has the exact same problem, so I'm not real sure what your whole point is or was etc.

Thanks.

Thread: What are these pesky form button up to now?

Thread Tools

Display

What are these pesky form button up to now?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions