1

Ok so I've been through answers like "background-clip: padding-box;" and while it makes the end product look a little better, it still doesn't completely solve the problem of the background color bleeding outside of the border. Does anyone have a real solution to this issue?

Here's a screenshot of the issue:

alt text

CSS Used For Buttons

#footer #pager li a {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display: block;
    float: left;
    color: #444 !important;
    text-decoration: none !important;
    background-clip: padding-box !important;
    padding: 8px 12px;
    background-color: #ccc;
    border: 1px solid #000;
}
Daniel Situnayake
  • 2,874
  • 2
  • 30
  • 38
thisisrobv
  • 189
  • 2
  • 11

2 Answers2

7

It's not what you're waiting for, I know, but I have to say this: use an image. This is not only due to the possibility to eliminate the bleed on all browsers. Your bleed problem on Firefox is nothing compared to how Chrome mercilessly slaughters the look of your buttons... Check it and start crying :(.

In case you're wondering what's wrong: Chrome is utterly helpless when you use border-radius and box-shadow:inset on the same element. It's a known bug and you can't eliminate it until they fix it in the browser (and judging by how "fast" they are to respond to some bug reports - some have been reported two years ago and still are unsolved, even when the users offer a ready solution - I think we shouldn't expect Chrome to work properly in the near future).

[EDIT]

Also, note this:

  • Firefox produces the bleed effect
  • Opera doesn't render CSS3 gradients
  • IE doesn't render box shadow
  • Chrome fails in the worst manner possible

So... there isn't a single browser which renders your button correctly. Does it make sense to keep using CSS3 in this case?

mingos
  • 23,778
  • 12
  • 70
  • 107
  • Very good points - web development is such a minefield with support for CSS in browsers. Such a pain :-( – Bojangles Dec 09 '10 at 18:32
  • Thanks for taking the time to respond. I've updated the question because my implementation of certain CSS3 properties seems to be taking away from the actual issue. Even when I remove gradients and box shadows the background color bleeds outside of the corners. So are you suggesting just not using border-radius at all? – thisisrobv Dec 09 '10 at 19:28
  • You can take advantage of IE9 and Opera's support for SVG to achieve gradients. Check out this demo by Robert Biggs: http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/ – David Lantner Jan 04 '11 at 22:24
  • Only a few years later and this is complete false, shows how fast our industry is constantly changing. – John Magnolia Feb 14 '13 at 22:58
1

The solution would be to use an image instead of the background for the link, with overflow: hidden:

.button{
    margin: 45px 0;
    width: 222px;
    height: 40px;
    display: block;
    border: 1px solid #ebebeb;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden !important;
}

.button img {
    width: 222px;
    height: 40px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff799), to(#fdc689));
    background: -webkit-linear-gradient(top, #fff799, #fdc689);
    background: -moz-linear-gradient(top, #fff799, #fdc689);
    background: -o-linear-gradient(top, #fff799, #fdc689);
    background: -ms-linear-gradient(top, #fff799, #fdc689);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff799', EndColorStr='#fdc689');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff799', EndColorStr='#fdc689', GradientType=0)";
}
Ricardo Souza
  • 16,030
  • 6
  • 37
  • 69
Carol
  • 11
  • 1