PDA

Click to See Complete Forum and Search --> : Rounded corners 1px off

rickl
10-14-2007, 08:39 PM
Hi everyone,
I have this problem. You can see what it looks like in this image (http://www.filepanda.com/get/b28ieul8). The corners are 1px off, preventing the corners from covering the border of the containing div.

For the corners, I'm using a Yahoo-style single-image split circle (http://www.filepanda.com/get/4phcszqm/).

This is what my CSS looks like:

* {
margin: 0pt;
padding: 0pt;
}
body {
font-family: Verdana, Helvetia, Arial, sans-serif;
font-size: 62.5%;
}
DIV#container {
margin: 50px;
background-color: #fff;
color: #000;
width: 450px;
}
DIV.tandb {/* top and bottom */
height: 18px;
}
DIV#content {
padding: 0pt 1em;
line-height: 1.6em;
border-left: 1px solid blue;
border-right: 1px solid blue;
}
DIV#top {
border-top: 1px solid blue;
}
DIV#bottom {
border-bottom: 1px solid blue;
}
DIV.corner {
width: 18px;
height: 18px;
background: url(cr_blast_flat.gif) no-repeat;
}
DIV.leftcorner {
float: left;
}
DIV.rightcorner {
float: right;
}
DIV#tl {
background-position: 0px -36px;
}
DIV#tr {
background-position: top right;
}
DIV#bl {
background-position: bottom left;
}
DIV#br {
background-position: 0px -18px;
}

And here is the markup:

<body>
<div id="container">
<div id="top" class="tandb">
<div id="tl" class="corner leftcorner">
</div><!-- #tl -->
<div id="tr" class="corner rightcorner">
</div><!-- #tr -->
</div><!-- top -->
<div id="content">
<p>Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae...
</p>
</div><!-- #content -->
<div id="bottom" class="tandb">
<div id="bl" class="corner leftcorner">
</div><!-- #bl -->
<div id="br" class="corner rightcorner">
</div><!-- #br -->
</div><!-- #bottom -->
</div><!-- #container -->
</body>


I would greatly appreciate any suggestions.

Thanks.
Rick
Centauri
10-14-2007, 09:02 PM
A div within another with borders will normally be positioned within those borders. Using a negative 1px top margin on the top corner divs should "pull" them over the border, and the same technique should work on the bottom ones.
rickl
10-14-2007, 09:19 PM
A div within another with borders will normally be positioned within those borders. Using a negative 1px top margin on the top corner divs should "pull" them over the border, and the same technique should work on the bottom ones.

Thank you Centauri, that does pull them over the border as you described, but it creates this issue (image (http://www.filepanda.com/get/3wxlhj99/)), where a 1px gap is created in the left and right border, top and bottom.

Not sure how I can deal with this. Do you have a suggestion?

-Rick
Centauri
10-14-2007, 09:55 PM
Actually, I would be more inclined to put the complete border on the container and absolutely position the corners, thereby eliminating a heap of divs :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Helvetia, Arial, sans-serif;
font-size: 62.5%;
}
.container {
margin: 50px;
background-color: #fff;
color: #000;
width: 450px;
padding: 18px 1em;
border: 1px solid blue;
position: relative;
}
b.corner {
width: 18px;
height: 18px;
background: url(cr_blast_flat.gif) no-repeat;
display: block;
position: absolute;
}
b.tl {
background-position: 0px -36px;
left: -1px;
top: -1px;
}
b.tr {
background-position: top right;
right: -1px;
top: -1px;
}
b.bl {
background-position: bottom left;
left: -1px;
bottom: -1px;
}
b.br {
background-position: 0px -18px;
right: -1px;
bottom: -1px;
}
-->
</style>
</head>

<body>
<div class="container">
<b class="tl corner"></b>
<b class="tr corner"></b>
<b class="bl corner"></b>
<b class="br corner"></b>
<p>Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae...</p>
</div>
</body>
</html>
rickl
10-15-2007, 02:15 PM
Thanks, Centauri. That does look cleaner. I'll try that.

The other solution was this for CSS (putting the border on the container):

* {
margin: 0pt;
padding: 0pt;
}
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 62.5%;
}
DIV#container {
margin: 50px;
background-color: #fff;
color: #000;
width: 450px;
border-left: 1px solid blue;
border-right: 1px solid blue;
}
DIV.tandb {/* top and bottom */
height: 18px;
}
DIV#content {
padding: 0pt 1em;
line-height: 1.6em;

}
DIV#top {
border-top: 1px solid blue;
}
DIV#top .corner {
margin-top: -1px;
}
DIV#bottom {
border-bottom: 1px solid blue;
}
DIV#bottom .corner {
margin-top: 1px;
}
DIV.corner {
width: 18px;
height: 18px;
background: url(cr_blast_flat.gif) no-repeat;
}
DIV.leftcorner {
float: left;
margin-left: -1px;
}
DIV.rightcorner {
float: right;
margin-right: -1px;
}
DIV#tl {
background-position: 0px -36px;
}
DIV#tr {
background-position: top right;
}
DIV#bl {
background-position: bottom left;
}
DIV#br {
background-position: 0px -18px;
}


With the markup remaining unchanged:

<body>
<div id="container">
<div id="top" class="tandb">
<div id="tl" class="corner leftcorner">
</div><!-- #tl -->
<div id="tr" class="corner rightcorner">
</div><!-- #tr -->
</div><!-- top -->
<div id="content">
<p>Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae...
</p>
</div><!-- #content -->
<div id="bottom" class="tandb">
<div id="bl" class="corner leftcorner">
</div><!-- #bl -->
<div id="br" class="corner rightcorner">
</div><!-- #br -->
</div><!-- #bottom -->
</div><!-- #container -->
</body>
rickl
11-02-2007, 01:41 AM
Hi Centauri (and anyone else who can help!),
I found that this technique works really well in Firefox and IE7, but it doesn't work in IE6. In IE6, it looks like this (http://www.mediafire.com/imageview.php?quickkey=fyzgp0152zz&thumb=4).

(the image for the corners is this one (http://www.mediafire.com/imageview.php?quickkey=eyygyjf1rkn&thumb=4))

Do you have any suggestions?

Here is the markup I have:

<div class="container">
<b class="tl corner"></b>
<b class="tr corner"></b>
<b class="bl corner"></b>
<b class="br corner"></b>
<p>Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae...</p>
</div><!-- .container -->


And the CSS:

div.container {
margin: 50px;
background-color: #f4ffe5;
color: #000;
width: 450px;
padding: 18px 1em;
border: 1px solid #b6e59e;
position: relative;
}
b.corner {
width: 8px;
height: 8px;
background: url(cr_lg_green.gif) no-repeat;
display: block;
position: absolute;
}
b.tl {
background-position: 0px -16px;
left: -1px;
top: -1px;
}
b.tr {
background-position: top right;
right: -1px;
top: -1px;
}
b.bl {
background-position: bottom left;
left: -1px;
bottom: -1px;
}
b.br {
background-position: 0px -8px;
right: -1px;
bottom: -1px;
}
Centauri
11-02-2007, 02:02 AM
This is because IE will not allow a container's height to be less than required to fit the current sized text into (even when there isn't text). The fix is to specify a tiny font size:b.corner {
width: 8px;
height: 8px;
background: url(cr_lg_green.gif) no-repeat;
display: block;
position: absolute;
font-size: 1px;
}
rickl
11-02-2007, 03:19 PM
This is because IE will not allow a container's height to be less than required to fit the current sized text into (even when there isn't text). The fix is to specify a tiny font size:

You're a genius, Centauri. Thank you!