CODEWITHSUNDEEP
htmlcss
Juliver Galleto
Juliver Galleto

Reputation: 9037

firefox border white line

im having a the borders and radius style (border-radius) problems on certain elements in my website and I want to get rid of them coz it looks not good at all. Please see the image below :

screenshot of my website which having a problem on the border part

as you can see on the header part, it has set to be on curve border using css3 but a nasty white line is messing up my beautiful header so im wondering if there is a way to get rid of it, or keep it like a clean border (without the white mess on the bottom left side of the header curve) same on the right header bottom border curve/radius.

heres the html structure of my header:

<header id="header" role="banner">
    <span class="extend clear">

    </span>
</header>

and the css of it.

#header{
    background: #575656;
    overflow: auto;
    border: 1px solid #454545;
    background-color: #575656;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#575656));
    background-image: -webkit-linear-gradient(top, #333333, #575656);
    background-image: -moz-linear-gradient(top, #333333, #575656);
    background-image: -ms-linear-gradient(top, #333333, #575656);
    background-image: -o-linear-gradient(top, #333333, #575656);
    background-image: linear-gradient(top, #333333, #575656);
    -pie-background: linear-gradient(to bottom, #333333, #575656); /*ie 6-9 via PIE*/

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333, endColorstr=#575656);

    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;

    behavior: url(PIE.htc);
}
#header span{
    padding: 20px 15px;
    border-bottom: 1px solid #838181;
    overflow: auto;
    display: block;
}

and that pie thing there is for ie display, heres the link of it http://css3pie.com/

Thank you, Im open for any ideas, recommendations and suggestions.

Upvotes: 0

Views: 1130

Answers (3)

Vikas Gautam
Vikas Gautam

Reputation: 978

border-bottom-right-radius

border-bottom-top-radius

border-bottom-bottom-radius

border-bottom-left-radius

try to use these

Upvotes: 0

loxxy
loxxy

Reputation: 13151

This is invalid:

-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;

Besides, It works fine for me in firefox : fiddle

The following should be applied in firefox as well:

 border-bottom-right-radius: 8px;
 border-bottom-left-radius: 8px;

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

The syntax is invalid for Firefox. Change your code to:

-moz-border-bottom-right-radius: 8px;
-moz-border-bottom-left-radius: 8px;

Upvotes: 0

Related Questions