Link to home
Create AccountLog in
Avatar of doRodrigo
doRodrigoFlag for New Zealand

asked on

Rounded Corner

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

Avatar of itkadmin
itkadmin
Flag of Canada image

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
Avatar of Marbleman
Marbleman

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...)
Avatar of doRodrigo

ASKER

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...
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
you could also take a look at http://www.spiffycorners.com/index.php
Thanks for the points!