www.webdeveloper.com
Results 1 to 8 of 8

Thread: Button borders (how to remove)

  1. #1
    Join Date
    Jun 2006
    Posts
    5

    Button borders (how to remove)

    I am using IE and button objects like:

    <BUTTON name="prev" value="prev" type="button" style="background-color: #333333; border-style: none; border-width: 0px 0px
    0px 0px" onclick="submitFunc(this,this.form);" onmousedown="changeImage('prev','images/btn_prev_down.jpg');"
    onmouseup="changeImage('prev','images/btn_prev_up.jpg');"><IMG name="prev" src="images/btn_prev_up.jpg" alt="Prev"></BUTTON>

    The images look fine but there is around a 30 pixel border of the background color on either size of the image. I want to reduce this padding to zero. I have tried to use the <input type="image" tag but the button action is not what I want.

    I have tried to track down where that padding is coming from and how to get rid of it without success. I am using IE 6.0 the same is true on Netscape 8.0

    Thanks

    --John Putnam

  2. #2
    Join Date
    Jun 2006
    Posts
    263

    this should work

    The following is one style that I use on my website. You should be able to either change the border color to the page background or set it to 0px and obviously change any other values to whatever.

    .button2
    {
    font-size: 9px;
    text-decoration: none;
    color: cc0000;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    border: 1px #cc0000 solid;
    background-color: #ffcc00;
    cursor: hand;
    }

  3. #3
    Join Date
    Jun 2006
    Posts
    5
    Thanks. That doesn't seem to effect the area around the buttton. I am trying to get 6 buttons across the page in a table but cant fit them with that extra border. It apparently is not really a border but maybe something that has to do with an aspect ratio that the browser is trying to maintain.

    I replaced my style but get the same space around the image padding the button size by about 60 pixels.

    --John Putnam

  4. #4
    Join Date
    Jun 2006
    Posts
    263
    Are these buttons in a table? If so you need to give the table 2 attributes.

    cellpadding="0" cellspacing="0"

    If you don't list these as "0" I think the default is 2.
    Let me know if this works out. Also do you have this online to look at real quick? Or at least post your code in your next reply.

  5. #5
    Join Date
    Jun 2006
    Posts
    5
    Yes in a table and even with cell padding and spacing zero I get the borders.

    <table cellspacing="0" cellpadding="0" border="0" align="left">
    <tr>
    <td align="center" >


    <BUTTON name="prev" value="prev" type="button" style=" font-size: 9px;
    text-decoration: none;
    color: ffffff;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    border: 1px #cc0000 solid;
    background-color: #ffcc00;
    cursor: hand;
    " onclick="submitFunc(this,this.form);" onmousedown="changeImage('prev','images/btn_prev_down.jpg');"

    onmouseup="changeImage('prev','images/btn_prev_up.jpg');"><IMG name="prev" src="images/btn_prev_up.jpg" alt="Prev"></BUTTON>

    </td></tr>
    </table>

    I get the same result. If I use an <input type="image" I get no border.

    --John Putnam

  6. #6
    Join Date
    Jun 2006
    Posts
    263

    this may work

    instead of <button...></button> replace with <input.... />
    since you already have the type="button" doing this seems to make a change but I don't have your pic so try it out.


    <table cellspacing="0" cellpadding="0" border="0" align="left">
    <tr>
    <td align="center" >


    <input name="prev" value="prev" type="button" style=" font-size: 9px;
    text-decoration: none;
    color: ffffff;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    border: 1px #cc0000 solid;
    background-color: #ffcc00;
    cursor: hand;
    " onclick="submitFunc(this,this.form);" onmousedown="changeImage('prev','images/btn_prev_down.jpg');"

    onmouseup="changeImage('prev','images/btn_prev_up.jpg');"><IMG name="prev" src="images/btn_prev_up.jpg" alt="Prev" />

    </td></tr>
    </table>

  7. #7
    Join Date
    Jun 2006
    Posts
    5
    Thanks,

    I get a strange effect when I use a table and a row of buttons where all the images in the row repaint with a jitter of all the buttons when I use the <input type=button . When I use the <button tag then only the button in question reacts to the button push. I dont think the client will like the effect with the <input.

    ---John Putnam

  8. #8
    Join Date
    Jun 2006
    Posts
    5

    Found it.

    I found if you use the width style parameter you can get rid of that extra padding.

    <BUTTON name="erase" value="erase" type="button" style="background-color: #333333; border-style: none; width: 141; height: 75;" onclick="submitFunc(this,this.form);" onmousedown="changeImage('erase','images/btn_erase_down.jpg');" onmouseup="changeImage('erase','images/btn_erase_up.jpg');"><IMG name="erase" src="images/btn_erase_up.jpg" alt="Erase"></BUTTON>

    I had to set each buttons width to the width of the image. And each of the various button image's width should be the same size to prevent extra browser work to scale the images.

    Here is a great example of very little practical information out there on some pretty important and basic issues with an html feature.

    ---John Putnam

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