Rounded Corners Not Working (re-visited)

**DoubleDee** · Nov 27, 2011 22:47

One of the main reasons I broke down and built a "Test Website" was because my original "live" website had become to complex and too hard to debug certain issues.

So after stripping things down to bare-bones, I am having the same issue?!

So much for simplicity?!

I have created "boxes" on my website and in most of them, at the top I have styled a heading (e.g. <h2>) with a reversed background and bold, white font.

These new "boxes" look and work great, except for the fact that FireFox is giving a slightly different radius to my outside "box" and the inside <h2>...

Here is a link to my test website:
http://www.doubledee.byethost2.com/

If you zoom in as far as you can in FireFox, you should see what I do on my MacBook.

If I change the radius to 32px then it disappears - probably because of rounding errors - but clearly this is a BUG that needs a fix.

Also, attached are two enlarged screenshots...
Attachment 58302 Attachment 58303

If my nifty nested <h2> in my "box" won't work with round-corners I'm gonna scream!!!

Please help!!

Thanks,

Debbie

P.S. For this particular "box", my heading is actually using a <div>, but that is immaterial!

**dresden_phoenix** · Nov 28, 2011 01:08

DD,
there are easier ways to achieve what you are trying to do, but you are fighting AGAINST HTML/CSS rather than with it. I mentioned this earlier.... just something to keep in mind.

However, sticking with your MO....

The error is mathematical rather than rounding. Think of what you learned from the BOX MODEL now add to that that a circumference = 2 * 3.1415... * radius. Consequently since you have already applied a radius to the parent element ( and because of the box model) , any element's actual CALCULATED size will fail to take into account the border radius/ border width/ padding (ALL must be used in the calcs) of the parent element.

in short, your child element's rounded corners are NOT being calculated an a value EQUAL to the parent element, but the parent- (the parent radius+ parent padding). I offset the child's border-radius value and than d this usually fixes things.

for example:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
div {width:255px; border:2px solid pink; -moz-border-radius:10px;-webkit-border-radius:10px;}
h2 {text-align: center; color:#fff; background: #000; margin: 0; -webkit-border-radius:8px   8px 0 0 ;-moz-border-radius:8px   8px 0 0 }
		</style>
	</head>
	<body>
			<div>
				<h2>Ed, Edd and Eddie</h2>
			<p> text here</p>
			</div>
	</body>
</html>

That's one way.

If you want to avoid math like the plague

. you could do this:

Code:

div {width:255px; border:2px solid pink; -moz-border-radius:10px; -webkit-border-radius:10px;}
h2 {text-align: center; color:#fff; background: #000; margin: 0; border: 2px solid pink;border-bottom: none; width:100%;  margin-left: -2px; margin-top: -2px;-webkit-border-radius:10px   10px 0 0 ;-moz-border-radius:10px   10px 0 0 ; }

Essentially forcing the child element (h2) to be 100% width; adding the same border width and color as the parent element ,then using negative margin to move it leftward into place. This method, WILL HAVE ISSUES if your child element (h2) has any horizontal padding applied ( see math reasoning above).

I do hope this helps.

PS
I am a Mac person too!!! woot!

**DoubleDee** · Nov 28, 2011 19:09

Originally Posted by dresden_phoenix

DD,
there are easier ways to achieve what you are trying to do, but you are fighting AGAINST HTML/CSS rather than with it. I mentioned this earlier.... just something to keep in mind.

What is the easier way?

Going to the "Dark Side" by REMOVING my <div> and/or <h2> from my "box" and placing either BEFORE the "box"?

for example:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
div {width:255px; border:2px solid pink; -moz-border-radius:10px;-webkit-border-radius:10px;}
h2 {text-align: center; color:#fff; background: #000; margin: 0; -webkit-border-radius:8px   8px 0 0 ;-moz-border-radius:8px   8px 0 0 }
		</style>
	</head>
	<body>
			<div>
				<h2>Ed, Edd and Eddie</h2>
			<p> text here</p>
			</div>
	</body>
</html>

That's one way.

How reliable is that across browsers and versions?

If it is as simple as "eying" things, then that is a crude, but pretty quick fix...

If you want to avoid math like the plague

. you could do this:

Code:

div {width:255px; border:2px solid pink; -moz-border-radius:10px; -webkit-border-radius:10px;}
h2 {text-align: center; color:#fff; background: #000; margin: 0; border: 2px solid pink;border-bottom: none; width:100%;  margin-left: -2px; margin-top: -2px;-webkit-border-radius:10px   10px 0 0 ;-moz-border-radius:10px   10px 0 0 ; }

Essentially forcing the child element (h2) to be 100% width; adding the same border width and color as the parent element ,then using negative margin to move it leftward into place. This method, WILL HAVE ISSUES if your child element (h2) has any horizontal padding applied ( see math reasoning above).

I do hope this helps.

Thanks, but that is a pretty ugly solution.

PS
I am a Mac person too!!! woot!

Ha ha.

The has to be a better to all of this... I wonder what some of the CSS gurus here think??

Debbie

**dresden_phoenix** · Nov 29, 2011 01:11

The easier way, ways actually, doesn't currently fit your coding strategy. And strategy, not code is what you must address for this . Obe Wan says "Let go Luke." This is not the "dak side" it is in fact how HTML is structured.

<h2></h2>
<div class="content">
</div>

Style the CALCULATED WIDTH (border/padding included) to be the same for BOTH elements. Give the h2 corner a round style for the top corners only and the div a rounded style for the bottom.

A more BALLSY ..dare I say it... almost DS60 way... of doing this: Do not use margin for spacing between elements, size everything as above, EXCEPT do it to the P element and not .content, also no rounded corners on Ps ( just left-right borders), use padding to space the content, finally apply a bottom border and bottom corner radius .lastP

<h2></h2>
<p>text</p>
<p>text</p>
<p class="lastP"></p>

( I can only imagine your face about now, but believe me this is ALMOST as smeantic and optimized as it gets.)

Now IF WE THINK FURTHER.. we realize the following:

Pretty much any UA that supports border-radius properties, also supports last-child and adjacent siblings. Meaning if you are going to use ONE CSS3 property , might as well take full advantage of CSS3 (to what ever level you can).. I also seee that you WANT a wrapper around you content, tho it's not necessary.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
.article {width:255px; }
.article h2   { border:2px solid pink; border-bottom:none; -moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0 ; padding:10px; margin:0; color:#fff; background: #000;
 -moz-background-clip: border; /* these are to account for a webkit/ moz rendering bug*/
 -webkit-background-clip: padding-box;
 
}
.article p  { border-right:2px solid pink;  border-left:2px solid pink; margin:0 ; padding: 20px 10px 0 10px}
.article p:last-child  { border-bottom:2px solid pink;   padding-bottom: 20px;
-moz-border-radius:0 0 10px 10px;-webkit-border-radius:0 0 10px 10px  ;
}/*you can still add a class to the last P manually if you want to support IE<8, even tho IE<* doesnt do rounded corners anyway.*/
		</style>
	</head>
	<body>
			<div class="article">
				<h2>Ed, Edd and Eddie</h2>
				<p> text here</p>
				<p> text here</p>
				<p> text here</p>
			</div>
	</body>
</html>

We COULD elaborate the CSS, so that instead of having to wrap each "article" in it's own DIV , we just use one "column" wrapper ( in case we wanted to flat them all together) and let the beginning/ end of each article be defined by an H2 ( which is the most optimized and semantically way to do it). But Let's take this one step at a time.

User Tag List

Thread: Rounded Corners Not Working (re-visited)

Thread Tools

Display

Rounded Corners Not Working (re-visited)

Bookmarks

Bookmarks

Posting Permissions