Rounded corners prrove elusive :-(

HTML & CSS
1

http://www.pauserefreshment.co.uk/3_column_tutorial.html
On the above page (its not infected all i frames are removed. View in IE)
I followed a tutorial onh rounded corners in Sitepoints book “The Art & Science of CSS” but ive hit a snag :frowning:

I just cant get the bottom rounded corner to appear. So my specific question is…
“How do I get the far right column to get rounded jpg to appear at the bottom of the column please”

Here is the offending code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" value="noindex, nofollow" />
<link rel="stylesheet" type="text/css" href="css/tutorial.css" />
<title>3 column layout tutorial</title>
</head>
<body id="tutorial" onload="alert('This is my 3 column css tutorial');">
<div id="wrapper3column">
<div id="header3">
Header
</div>
<div id="columnleft3">
<p>TEST column left TEST column left TEST column left TEST column left TEST column left </p>
</div>
<div id="columnmain3">
<p>TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column centralTEST column central TEST column central TEST column central TEST column central</p>
</div>
<div id="columnright3">
<p>TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right.  </p>
</div>
<div id="footer3">
<p>Footer</p>
</div>
</div>
</body>
</html>

/////////////////////////////

@charset "utf-8";
/* CSS Document */

/* 1 column css*/
#container
{
	margin: 0 30px;
	background: #fff;
}

#header
{
	background: #ccc;
	padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
	float: left;
	width: 100%;
	background: #333;
}

#navigation ul
{
	margin: 0;
	padding: 0;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
}

#navigation li a
{
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content
{
	clear: left;
	padding: 20px;
}

#content h2
{
	color: #000;
	font-size: 160%;
	margin: 0 0 .5em;
}

#footer
{
	background: #ccc;
	text-align: right;
	padding: 20px;
	height: 1%;
}
/* 1 column css ends*/

/* 2 column css starts*/
#wrapper2column {
width:800px;
margin-left:auto;
margin-right:auto;
background:#FFFFFF url(../images/faux_column2.jpg) repeat-y 50% 0;
}

#leftcolumn {
float:left;
width:20%;
border: 3px solid black;
background:#00FF66;
}

#maincontent {
border:5px solid red;
padding-left:160px;
}

body {
background:#000000;
}

#header2column {
border:5px solid green;
}

#footer2column {
border:5px solid yellow;
clear:both;
}

/* 2 column css ends*/

/* 3 column css starts*/
#tutorial {
background:orange;
}

#columnleft3 {
width:267px;
float:left;
background:#CC00CC;
}

#columnleft3 p {
}

#columnmain3 {
width:267px;
float:left;
background:yellow;
}

#columnmain3 p {
}

#columnright3 {
width:267px;
float:left;
background:green url(../images/round_corner_bottom.jpg) no-repeat bottom left;
}

#columnright3 p {
background:green url(../images/round_corner_top.jpg) no-repeat;
}

#wrapper3column {
width:801px;
background:red url(../images/faux_column2.jpg) repeat-y 50% 0;
margin-left:auto;
margin-right:auto;
}

#footer3 {
height:20px;
background:#00CC99;
clear:both;
}
/* 3 column css ends*/
2


Well for me Ive made a stack of progress in adding curves to corners. Heres
where I’m at:
http://www.pauserefreshment.co.uk/3_column_tutorial.html

But Ive hit what I hope is a minor snag…

I wanted the curved column on the far right to appear as it does in IE 8 i ended up adding height to get the effect eg -

#columnright3 {
width:267px;
float:left;
background:#990066;
font-family:monospace;
height:182px;
}

I was about to pop the champagne but I looked at it in firefox, Yikes!!! Not quite the same :frowning:

So my question is please how do I get my curvey column to look as it does in IE and not jinxed as it does in firefox…

Any insights welcome :slight_smile:

3

I fixed it my self! unbelivable :slight_smile: Basically it was a padding balls up now fixed with this css snippet

#columnright3 p{
padding:0px 15px 0px 15px;
margin:0px;
}

4

Hi,

The bottom corners seem to be showing but they won’t show at the bottom of the faux column because the individual columns have only content height - if that’s what you were trying to do.

To do that you would need to cap all three bottom corners with a single image using a div that stretches full width and follows after the three floated columns (like a footer) and place a background image on that to finish the columns off.

Much like this old example that caps the tops of the corners with one image then uses a repeating mid section for the three columns and then caps it all with another image at the bottom.