I'm having problems in Firefox with the background of a div being curved differently than the border, when border-radius is used. Safari/Chrome work fine.
Here's a screenshot: As you can see, the grey of the div is curved a bit differently than the border - allowing the parent div's background colour to show through.
Here's the markup:
Code: Select all
<div id = "header"><!-- this has the green background -->
<a href = "/" id = "header-home-link">
<img src = "images/logo-white.png"/>
</a>
<div id = "name">
<small>
University
</small>
Campus
</div>
<form id = "search" method = "post" action = ""><!-- this has the grey background -->
<div>
<input type = "text" size = "20" /> <input type = "submit" value = "Search" />
</div>
</form>
</div>Code: Select all
#search{
float:right;
top:0;
background-color:#EFEFEF;
padding:5px 5px 7px 7px;
margin:-20px -20px 0 0;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-background-clip:border;
border:1px solid #FFF;
border-width:0 0 1px 1px;
}Any ideas on how to get rid of that sliver of green?