PDA

View Full Version : CSS Rounded Corner Help

jdcfsu
2008-04-14, 21:11
I'm working on a simple design following the CSS idea found here (http://www.schillmania.com/projects/dialog2/).
Everything was working great until I started to apply the div to a more traditional blog layout.
It still displays correctly except for the bottom right corner, which somehow gets removed.
Looking at the CSS it seems the problem is with the b class, but I can't seem to figure it out.
So, all you CSS guru's out there, any suggestions?

<html>
<head>
<title>Test Site</title>
<style type="text/css">
body { background: url(images/background.png) repeat; margin: 0; }

#header { text-align: center; color: #000; background: #fff; height: 108px; margin: 5px 0 12px 0; padding: 0; }
#container { width: 95%; margin: 0 auto; text-align: left; }
#sidebar { float: right; width: 15em; padding: 0; }
#mainContent { color: #000; margin: 0 16em 0 10px; text-align: justify; }
#footer { text-align: right; color: #000; background: #fff; height: 28px; margin: 0; padding: 0 10px; }

.bubble {
position: relative; margin: 0px auto; min-width: 8em; max-width: 1500px; color: #000; z-index: 1; margin-left: 12px; margin-bottom: 0.5em;
}

.bubble .content,
.bubble .t,
.bubble .b,
.bubble .b div {
background: transparent url(images/dialog-box.png) no-repeat top right;
}

.bubble .content {
position: relative; zoom: 1; _overflow-y: hidden; padding: 0px 12px 0px 0px;
}

.bubble .t {
position: absolute; left: 0px; top: 0px; width: 12px; margin-left: -12px; height: 100%; _height: 1600px; background-position: top left;
}

.bubble .b {
position: relative; width: 100%;
}

.bubble .b,
.bubble .b div {
height: 30px; font-size: 1px;
}

.bubble .b {
background-position: bottom right;
}

.bubble .b div {
position: relative; width: 12px; margin-left: -12px; background-position: bottom left;
}

.bubble .hd,
.bubble .bd,
.bubble .ft {
position: relative;
}

.bubble .wrapper {
position: static; max-height: 1000px; overflow: auto;
}

.bubble h1,
.bubble p {
margin: 0px; padding: 0.5em 0px 0.5em 0px;
}

.bubble h1 {
padding-bottom: 0px;
}
</style>
</head>
<body>
<div id="header">
Header
</div>

<div id="container">
<div id="sidebar">
<div class="bubble">
<div class="content">
<div class="t"></div>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="b"></div>
</div>

</div>

<div id="mainContent">

<div id="post-id1" class="bubble">
<div class="content">
<div class="t"></div>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="b"></div>
</div>

<div id="post-id2" class="bubble">
<div class="content">
<div class="t"></div>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="b"></div>
</div>

<div id="post-id3" class="bubble">
<div class="content">
<div class="t"></div>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="b"></div>
</div>


</div>
<br class="clearfloat" />
</div>

<div id="footer">footer</div>
</body>
</html>
Brad
2008-04-14, 21:21
Nested divs? Pfft.

http://www.the-art-of-web.com/css/border-radius/

;)
jdcfsu
2008-04-14, 21:28
That's nice, but I don't see how I'd be able to use the swanky 85% opacity with drop shadows on my rounded design.

EDIT: I seemed to figure out the fix... but it really doesn't make any sense to me. I'm still curious as to how this works. Here's the correct, working code:

<div id="post-id1" class="bubble">
<div class="content">
<div class="t"></div>
<h1>Even <em>More</em> Rounded Corners With CSS</h1>
<p>Here is a very simple example dialog.</p>
<p>Note that if gradients are used, you will need a "min-height" (or fixed height) rule on the body of the dialog. If these examples appear funny at the bottom, it is because they do not enforce the min-height rule.</p>
</div>
<div class="b"><div></div>
</div>
</div>

Unless I'm mistaken, it seems there are too many div's closing after class b. The code validates, and appears correctly in both Safari and Firefox 3... maybe I'm too tired but it just doesn't seem to compute.
Kraetos
2008-04-16, 16:17
Nested divs? Pfft.

http://www.the-art-of-web.com/css/border-radius/

;)

Yeah, Fuck IE!

;)
Kraetos
2008-08-04, 14:11
*bump*

What's the easiest way to generate round corners in IE6? I don't need any fancy transparency, or anything, just a simple 10px radius rounded corner and with a 4px maroon border. I'll nest a div or two if I have to, but mostly, I just am looking for the cleanest, most straightforward way to do this, since I have to hand off this project to someone else in the near future.
MagSafe
2008-08-04, 16:48
The easiest way to do that is to create a fixed width column (say 900px), then create an image that's got a height of 10 pixels (for example), and a width of 900px. That image will be your curve, and you would simply place that as the first object in the column (and then the last object for a bottom curve).

This way users would be able to highlight the image, and even download it if they wanted, which wouldn't be very professional. To avoid this, you could create a DIV the same size as the image, make the image the background of the DIV, and place the DIV (with no content) as the first object in your column.

That's how I usually do it, as it appears to work on most modern browsers (including IE6). If you want to do it the nicer (and better, IMO) way that Brad suggested, you'll have to accept that it won't work properly in IE7 and will throw up some CSS errors in browsers that don't support it (i.e Firefox not supporting Safari's implementation of border radius, and vice versa).

Anyway, good luck with what your doing :)