3

this is my first question asked here a stack overflow.

I have a problem that has been bugging me for a bit now.

When I have a page loaded with multiple buttons on the page the first button in the HTML Markup seems to get this think border around the button.

I'm sorry if this has been asked before but I've read many forums that are related to this issue but so far have been unsuccessful with combating this issue with suggestions that address this issue. I am guessing it has something to do with the focus of the button on page load, for usability when pressing a keyboard button.

I was hoping that there is a way to style this button when is focus mode for IE 7 and above either through javascript or in this code behind. I am using VB.net but would greatly appreciate C# example's if the code behind is the way to go.

Any help would be greatly appreciated.

Thanks Jake

jake.cook1
  • 51
  • 2
  • 5
  • Not directly a solution for your problem but you can specify which button shall get the focus by setting the defaultbutton attribute in your form to the desired button control id. – Filburt Feb 13 '10 at 23:42
  • 1
    Can you put a screenshot or a sample page somewhere? How thick is "thick"? Do you have any CSS rules for the buttons? – Pointy Feb 14 '10 at 03:33

4 Answers4

1

Try applying a CSS style for the button with the :focus pseudo class, which may allow to change the style of the button. Don't know if that's supported in all major browsers.

http://www.w3schools.com/CSS/pr_pseudo_focus.asp

Brian Mains
  • 50,520
  • 35
  • 148
  • 257
  • Hey I think I need more reputation to add images basically the button is a styled flat button with a 1px black border and the back ground and text of the button has been changed. the first button gets a 2-3px border when the page is loaded. But I think Filburt has the right answer to this question I think with IE you are just stuck with the problem. It not to bad now as I have discussed this with my project manager and he is fine with the buttons displaying how they are as he said its a usability thing so the user will no which button is in focus for a keyboard click. – jake.cook1 Feb 14 '10 at 21:43
  • But if anybody does have a solution to this problem would be really interested in a answer as i have tried so many ways to combat this issue but none have been successful. Thanks all for your help. – jake.cook1 Feb 14 '10 at 21:44
  • Also brain thanks for your answer, as far as I no it is correct for other browsers but no for IE (IE always has to be different). – jake.cook1 Feb 14 '10 at 21:48
1

You could try wrapping the button in a span, giving the span the border and removing it from the button?

Style:

<style type="text/css">
    .span-button INPUT { background-color: transparent; border-width: 0px; }
    .span-button { background: Silver; border: 1px solid red; }
</style>

Html:

<span class="span-button"><input type="button" value="wrapped button" /></span>
Knoxy
  • 31
  • 3
1

If you mean by thick border: the default highlighting performed by IE for the first submit button found on the form, then check this : Stopping IE from highlighting the first submit-button in a form

Community
  • 1
  • 1
MK.
  • 5,139
  • 1
  • 22
  • 36
1

Use either of these CSS Styles

a:active, a:focus,input, input:active, input:focus{     outline: 0;     outline-style:none;     outline-width:0; }  
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner 
{     border: none; }

OR

:focus {outline:none;} ::-moz-focus-inner {border:0;}

Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
      </customHeaders>
    </httpProtocol>

  </system.webServer>
VIP
  • 281
  • 1
  • 3
  • 2