[solved] Firefox border radius background colour

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

[solved] Firefox border radius background colour

Post 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 2477 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?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Firefox border radius background colour

Post by social_experiment »

Remove the border?

Code: Select all

border:1px solid #FFF;
Attachments
Sans border.
Sans border.
Untitled-2.png (28.59 KiB) Viewed 2472 times
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Firefox border radius background colour

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Firefox border radius background colour

Post 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)
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Firefox border radius background colour

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply