?
Solved

Rounded Corner

Posted on 2010-09-09
7
Medium Priority
?
456 Views
Last Modified: 2012-05-10
Hi folks, I'm in need to find a way to create a rounded corner that will work in both IE and Firefox, I'm trying but I'm completely drawing a blank in regard to this... I finished part of it only to find out that it doesn't work at all in IE!!! Any help would be appreciated...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Atitude Cidadã</title>
<style type="text/css">
<!--
	body {
	background-image: url(image/fundo2.gif);
	}
	.espaco{
		width: 800px;
		height: 70PX;
		padding: 15px;
		color: white;
		font-family: arial;
		position: relative; 
		top: 15px; 
		margin-left: auto;
		margin-right: auto;
	}
	.headerMain{
		background-color: black;
		width: 800px;
		height: 30PX;
		padding: 15px;
		color: white;
		font-family: arial;
		position: relative; 

		margin-left: auto;
		margin-right: auto;
	}
	.headerProg{
		background-color: orange;
		width: 800px;
		height: 110PX;
		padding: 15px;
		color: white;
		font-family: arial;
		-moz-border-radius-topright: 30px;
		-moz-border-radius-topleft: 30px;
		position: relative; 

		margin-left: auto;
		margin-right: auto;
	}
	.body{
		background-color: orange;
		width: 800px;
		height: 220PX;
		padding: 15px;
		color: white;
		font-family: arial;
		position: relative; 

		margin-left: auto;
		margin-right: auto;		
	}
	.add{
		background-color: orange;
		width: 800px;
		height: 70PX;
		padding: 15px;
		color: white;
		font-family: arial;
		position: relative; 

		margin-left: auto;
		margin-right: auto;		
	}
	.footer{
		background-color: orange;
		width: 800px;
		height: 50PX;
		padding: 15px;
		color: white;
		font-family: arial;		
		position: relative; 

		margin-left: auto;
		margin-right: auto;	
		-moz-border-radius-bottomright: 30px;
		-moz-border-radius-bottomleft: 30px;
	}
-->
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js" >
</script>


</head>

<body>
<div align="center">
  <table width="100%" border="0">
    <tr>
      <td><div align="center" class="headerMain"></div></td>
    </tr>
    <tr>
      <td><div align="center" class="headerProg"> <img src="Site/Final/AtitudeCidada.png" /> </div>
      <br></td>
    </tr>
    <tr>
      <td><div align="center" class="body"></div></td>
    </tr>
    <tr>
      <td><div align="center" class="add"></div></td>
    </tr>
    <tr>
      <td><hr style="top: inherit; border: 1px solid #FFE500;width:830px;" /></td>
    </tr>
    <tr>
      <td><div align="center" class="footer"></div></td>
    </tr>
    <tr>
      <td><div align="center" class="espaco"></div></td>
    </tr>
  </table>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:doRodrigo
7 Comments
 
LVL 2

Expert Comment

by:itkadmin
ID: 33639051
There may well be a better way than this, but the following worked for me, it uses a lot of nested DIVs, though it dies work back to ie6.
/*CSS*/
/*BELOW ADDED BY TO SET UP CORNERS IN MAIN CONTENT*/
	

#corners_CONTAINER {

max-width: 960px;
background-color: #ffffff;
}
#corners_TL {
	background-image: url(corners/content_corners_TOP.gif);
	background-repeat: no-repeat;
	background-position: left top;
padding-left: 15px;
margin-top: -2px;
	}
#corners_TR{
	background-image: url(corners/content_corners_TOP.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
/*#corners_BL{
	background-image: url(corners/content_corners_BOTTOM.gif);
	background-repeat: no-repeat;
	background-position: bottom left;
	margin-left: -15px;
	padding-left: 15px;

}*/
#corners_BR{
	background-image: url(corners/content_corners_BOTTOM.gif);
	background-repeat: no-repeat;
	background-position: right bottom;


}
#corners_RS{
	background-image: url(corners/content_corners_RIGHT.gif);
 	background-repeat: repeat-y;
	background-position: right;

}

#corners_LS{
	background-image: url(corners/content_corners_LEFT.gif);
	background-repeat: repeat-y;
	background-position: left;

}
#corners_CONTENT {
padding: 20px;
background-image: url(corners/content_corners_BOTTOM.gif);
	background-repeat: no-repeat;
	background-position: bottom left;
margin: 2px 15px 0px -15px;
overflow: auto;

}

<!--HTML-->
<!-- /corners DIVs sets up the rounded corners in main content, uses 5 DIV's -->
        <div id="corners_CONTAINER">
		<div id="corners_LS">
        <div id="corners_RS">
        <div id="corners_TL">
		<div id="corners_TR">
        <div id="corners_BL">
        <div id="corners_BR">
		<div id="corners_CONTENT">
 
	 ALL YOUR CONTENT GOES HERE
	 
      </div></div></div></div></div></div></div></div>

Open in new window

corners.zip
0
 
LVL 3

Expert Comment

by:Marbleman
ID: 33639086
CSS3 can do this but since you want to support older browsers the only solution is to use corner-images:

Add an extra row on top of the table and at the bottom. Limit the height of these rows.
Add extra td left and right to your content Limit the width of this columns.

The result is a fame of cells around your table (set the style="border: 1px solid black;" on the table for visualizing that)

Now you can put set classes like "nwCorner", "neCorner"... to your corner cells and put an image in the background here. If you make the images larger than the limits you can still change the size of the table without getting spaces or backgroud-repeats (which you should disable for the corners anyway...)
0
 

Author Comment

by:doRodrigo
ID: 33639460
Marbleman, I didn't get it right at least not when writing it, could you show me an example? Cheers...

itkadmin, sorry but I couldn't make it work... Could you show me how it would work?

I need to make it work in IE7 and forward also in Firefox, I don't need it to support IE6...
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 83

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 33639474
0
 
LVL 2

Assisted Solution

by:itkadmin
itkadmin earned 1000 total points
ID: 33639781
attached is a sample of how the code I posted earlier works
Unzip the thing and take a look at corners.html

in your css, you'll want to do the following:

body {background-color: #F3F5F0;} --> This is the background colour for the entire page. It's the same as the outside oc the curve in the .GIFs
#corners_CONTAINER {

width: 800px; --> select the width you want
background-color: #ffffff; --> the background colour needs to be set to the same colour as the inside of the corner .GIFs
}

You'll have to build your own GIFs to suite the radius and colours you like. The included samples are in the corners folder. (the css references corners/content_corners_TOP.gif etc.
corner-test.zip
0
 
LVL 2

Expert Comment

by:itkadmin
ID: 33639819
you could also take a look at http://www.spiffycorners.com/index.php
0
 
LVL 83

Expert Comment

by:leakim971
ID: 33653391
Thanks for the points!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question