Solved

Rounded Corner

Posted on 2010-09-09
7
443 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 82

Accepted Solution

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

Assisted Solution

by:itkadmin
itkadmin earned 250 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now