SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Removing an extra border from a submit button

    I posted a similar question a few months ago but never got the problem resolved so here goes again.

    I want to have a permanent 2px border on my CSS Submit buttons. I have no problems in Mozilla, but whenever i'm working within a form in IE, an extra 1 px border is added. Here are some screenshots to show what i mean:


    And the basic XP styled buttons in IE:


    How do i get rid of the extra border so that I only have the 2px border at all times?

    Thanks for any advice anyone can give.
    -Gibb

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way I style my buttons are:
    INPUT.Button{border:2px solid}
    <input type="Submit" class="Button" name="bla">

    I think if I am understanding your screen capture correctly, the buttons with the thicker border are actually the buttons that will activate if a person hits the enter key.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i guess it could be the Enter key accessibility, but still, is there anyway to get rid of that. The button turns yellow on hover and active, so i dont need the enter key accessibility.

  4. #4
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are assuming everyone has a mouse. Don't. For many different reasons from disabilities to personal desire to functionality of hardware (e.g. a handheld), people don't have a mouse. You should make sure your site is completely functional using the keyboard alone; if for no other reason, because many users prefer to use a keyboard rather than a mouse. Don't let page styling overide usability.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  5. #5
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not attempting to override the ENTER key functionality, I'm just trying to get the button to look the same at all times. Firefox does not add this extra 1 px border to buttons, but the Enter key still works as it should.

  6. #6
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Having the button look different if isn't necessarily bad. Actually it can help expierenced users observe what button will be affected by the hitting the enter key. Regarless of the theory, I don't know that there is a solution to what you want. I to have irritations with the way MSIE handles the styling of buttons.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  7. #7
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah it's not earth shattering by any means. It would be nice if i could make its appearance static tho, seeing as i have CSS links that look the same, but i guess this'll work for now. Thanks for the help.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Well if you're desperate then you can fiddle it like this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    input.sub {border:none;background:yellow}
    form span {border:1px solid blue;position:relative;background:yellow;margin:0 3px}
    </style>
    </head>
    <body>
    <form name="form1" id="form1" method="post" action="">
      <span><input class="sub" type="submit" name="Submit" value="Submit" /></span> 
      <input type="text" name="textfield" />
    </form>
    </body>
    </html>
    opera doesn't like it though

    Paul


Bookmarks

Posting Permissions

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