[SOLVED] Rounded corner divs bleading

[heavyEddie]

I've been playing with this a few days, and figure it is time for some help.  So, here a screen shot is attached of what is happening.  To summarize, I have a large set of divs that create a rounded corner effect.  Unfortunatly, it isn't liquid so it isn't adjusting the height as I had hoped it would.

 

Any help greatly appreciated.

 

CSS Below

#content_t {
	background: url(/home/ed/Desktop/x/images/content_t.png) 0 0 repeat-x; 
	width: 720px;
	margin-top: 23px;
	margin-left: 20px;
	float: left;
}

#content_b {
	background: url(/home/ed/Desktop/x/images/content_b.png) 0 100% repeat-x;
}

#content_l {
background: url(/home/ed/Desktop/x/images/content_l.png) 0 0 repeat-y;
}

#content_r {
background: url(/home/ed/Desktop/x/images/content_r.png) 100% 0 repeat-y;
}

#content_bl {
background: url(/home/ed/Desktop/x/images/content_bl.png) 0 100% no-repeat;
}

#content_br {
background: url(/home/ed/Desktop/x/images/content_br.png) 100% 100% no-repeat;
}

#content_tl {
background: url(/home/ed/Desktop/x/images/content_tl.png) 0 0 no-repeat;
}

#content_tr {
background: url(/home/ed/Desktop/x/images/content_tr.png) 100% 0 no-repeat;
padding: 60px 15px 50px 15px;
height: 100%;
}

#content_left {
width: 200px;
background-color: #cccccc;
float: left;
}

#content_right {
width: 300px;
background-color: red;
float: left;
}

 

HTML below

	<div id="content_t">
	<div id="content_b">
		<div id="content_l">
			<div id="content_r">
				<div id="content_bl">
					<div id="content_br">
						<div id="content_tl">
							<div id="content_tr">
								<div style="posistion:absolute;">
									<div id="content_left">
											dudeaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaa a a aaaaaaaaaaa a a aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
											dude<br>
											dude<br>
											dude<br>
											dude<br>
											dude<br>
											dude<br>
											dude<br>
											dude<br>
											dude<br>
											dude<br>
									</div>
									<div id="content_right">
											right<br>
											right<br>
											right<br>
											right<br>
											right<br>
											right<br>
											right<br>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

 

[attachment deleted by admin]

[ToonMariner]

have you tried putting a clear after the contents of the div?

<div id="content_left">
											dudeaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaa a a aaaaaaaaaaa a a aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
											dude<br>
											dude<br>
											dude<br>
											dude<br>
											dude<br>
											dude<br>
											dude<br>
											dude<br>
											dude<br>
											dude<br>
									</div>
									<div id="content_right">
											right<br>
											right<br>
											right<br>
											right<br>
											right<br>
											right<br>
											right<br>
									</div>
									<div style="clear: both;"></div>

 

I personally would give it a class and do teh clear in the css so you can use it over and over again...

 

 

[bronzemonkey]

You haven't cleared your floats properly and the position:absolute is preventing the content from actually being contained within all the rounded-corner divs. Can't really see what else is going wrong without access to the site and its images, but hopefully this will help.

 

Remove

<div style="position:absolute">

 

Replace it with

<div id="container">

 

And then add this to your css

#container:after {content:"."; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
/*affects IE6 only*/ * html #container {height:1%;}
/*affects IE7 only*/ *:first-child+html #container {min-height:1px;}

[heavyEddie]

That did the trick... the server should be online this weekend and I will be able to start putting the design up for a more detailed look.  I can handle most of the PHP/MySQL issues, but the design aspect is new to me.

 

Thank you very much!  I think I will go learn up on the :before and :after.

[dbrimlow]

You know, you can create rounded corners in css without using graphics. With proper border sizing and coloring, it could pretty much replicate what you have now only making your page load much leaner.

[heavyEddie]

I'm going for two things with this method.  One is attractive rounded corners and the 2nd is that the corners are not printed with the page.  Will the leaner keep all the corners as background images?

 

If so, I'm always interested in a leaner, faster loading page.

[dbrimlow]

Here is an example of the technique. The corners are NOT images at all. It is a series of ascending or descending margins in the css  like this;

 

b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #800000}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

 

In the markup, it is displayed like this:

 

<body>
<div id="container">
<b class="rtop"> 
    <b class="r1"></b>
        <b class="r2"></b>
           <b class="r3"></b> 
              <b class="r3"></b>
                 <b class="r4"></b>
</b>
<b class="r4"></b>
  <!-- end top rounded corner styles -->
  <div id="pageHeader">Name of Web Site</div>

 

The pageHeader id uses a very simple small graphic which is tiled and has the same color for the top as the b class background color - .

 

Here is how it looks in action:

 

http://www.regisresidential.com/home.php

 

Of course, you can change the thickness of the curve by adding more "b classes".

[heavyEddie]

Thanks for the technique!  I'm not sure I will use it in this particular case, but in my library for sure.