www.webdeveloper.com
Results 1 to 11 of 11

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

  1. #1
    Join Date
    May 2005
    Posts
    134

    What are these pesky form button up to now?

    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.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
     onclick="window.location.href='#';this.blur();"
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    May 2005
    Posts
    134
    That doesn't work.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    May 2005
    Posts
    134
    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.

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The border only appears onmousedown event. THe border returns to normal after the button has been clicked.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  7. #7
    Join Date
    May 2005
    Posts
    134
    Hey Fang,

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

    Thanks

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  9. #9
    Join Date
    May 2005
    Posts
    134
    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.

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  11. #11
    Join Date
    May 2005
    Posts
    134
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles