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
Solved

Rounded Corner

Posted on 2010-09-09
7
446 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

789 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