Page 1 of 1

[solved] Firefox border radius background colour

Posted: Wed Dec 08, 2010 2:35 pm
by pickle
Hi all,

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:
Untitled-1.png
Untitled-1.png (411 Bytes) Viewed 2478 times
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>
Here's the CSS:

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;
}
As you can see, I've tried playing with the background-clip property, but to no avail. The problem lessens when I have a thicker border, but doesn't go away.

Any ideas on how to get rid of that sliver of green?

Re: Firefox border radius background colour

Posted: Wed Dec 08, 2010 5:21 pm
by social_experiment
Remove the border?

Code: Select all

border:1px solid #FFF;

Re: Firefox border radius background colour

Posted: Wed Dec 08, 2010 5:29 pm
by pickle
But then I don't have the border I want. If nothing else works that's what I'll do, but I'd rather have my cake & eat it too.

Re: Firefox border radius background colour

Posted: Thu Dec 09, 2010 1:11 am
by social_experiment

Code: Select all

padding:6px 6px 8px 8px;
Ok. Incase you don't like the cake, try adding 1px padding, that gives the illusion of a bigger area (kindoff the same thing the border is doing IMO)

Re: Firefox border radius background colour

Posted: Thu Dec 09, 2010 9:39 am
by pickle
I'm not sure what adding 1px of padding would do - that'll just make the box bigger and both the background and the borders would just appear in a different place.

In any case, the problem has been resolved - and not by fiddling with CSS or markup, or anything else on the page.

I turned on sub-pixel rendering to make my fonts appear smoother - and that seems to have fixed the problem.