SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 button borders

    Hello!

    I need some help with styling the <button> element for IE6. I'm trying to create a button with a background color/image, thick right border, and no other borders. It seems like it ought to work like this:

    Code CSS:
    button {
        border:none;
        background-color:#0066FF;
        border-right:10px solid blue;
    }

    Unfortunately, IE6 does not render this correctly; the content area of the button (with the lighter blue background) appears to be just a touch too small on the top and the bottom when compared with the thicker right-hand border.

    Has anyone here experienced and/or fixed this problem?

    Thanks for your help!

  2. #2
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is normal.
    Try the following demonstration:
    Code:
    .button {
    	width:50px; /* added */
    	height:100px; /* added */
        border:none;
        background-color:#0066FF;
        border-right:30px solid blue;
    	border-top:5px solid red; /* added */
    }
    You will see that the corners are actually mitred. This is why your code makes the border on the right slightly taller than the rest of the button.

    I don't know a quick solution to this other than messy CSS so I will leave to the experts.
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  3. #3
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Although with 0px border you would think that this effect shouldn't happen...
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  4. #4
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try making the borders -1px. You will need to check with other browsers.

    Like this:

    Code:
    .button {
    width:50px;
    height:100px;
    border:-1px;
    background-color:#0066FF;
    border-right:30px solid blue;
    }
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the border: none; declaration and just zero out the sides you don't want. If this doesn't work, then set the display to inline-block (IIRC that's what it is anyway, but I could be wrong - I hardly ever use buttons for this purpose since it appears that some major mobile device vendors aren't supporting it).

  6. #6
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan's got the correct solution...
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Remove the border: none; declaration and just zero out the sides you don't want. If this doesn't work, then set the display to inline-block (IIRC that's what it is anyway, but I could be wrong - I hardly ever use buttons for this purpose since it appears that some major mobile device vendors aren't supporting it).
    I'm not sure I understand. I tried the following, but to no avail:

    Code CSS:
    button {
        border-left:0;
        border-top:0;
        border-bottom:0;
        background-color:#0066FF;
        border-right:10px solid blue;
    }

    I also tried adding a display:inline-block property to the above code, and also adding an explicit width and/or height. None of these combinations seemed to affect the mitre effect IE is adding.

  8. #8
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about border:-1px;? Remember to test in all browsers
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd have to see the code for your entire page then. Something tells me you've got code that could be conflicting with the proper (as IE sees it) behavior of the button element.

  10. #10
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I can't see anything wrong in IE6 using your code.
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    easy Peasy
    Code:
    button {
        border:none;
        background-color:#0066ff;
        border:1px solid #0066ff;
        border-right:10px solid blue;
    }

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rob
    What about border:-1px;? Remember to test in all browsers
    Negative values aren't allowed for borders

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    easy Peasy
    Code:
    button {
        border:none;
        background-color:#0066ff;
        border:1px solid #0066ff;
        border-right:10px solid blue;
    }
    Paul, you've re-declared the border property in your example. Note that the original poster has border: none; declared at the very top of the style rule.

  14. #14
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Best to see the code in context...
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  15. #15
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Negative values aren't allowed for borders
    Naughty me...
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Paul, you've re-declared the border property in your example. Note that the original poster has border: none; declared at the very top of the style rule.
    Yes I left it in place to show what I was doing

    The code I gave works perfectly and of course border:none can be removed.

    The problem is simply that IE does mitred borders and unless you join the borders up you get a mitred effect. I simply filled in the gaps with a border in the background color of the element.

    Some times the easiest solution is often overlooked

  17. #17
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    easy Peasy
    Code:
    button {
        border:none;
        background-color:#0066ff;
        border:1px solid #0066ff;
        border-right:10px solid blue;
    }
    Thanks; that works perfectly. I feel kind of silly for not having tried it in the first place


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
  •