Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Rounded Corner

Posted on 2010-09-09
7
Medium Priority
?
454 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 82

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 82

Expert Comment

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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

618 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