Solved

Rounded Corner

Posted on 2010-09-09
7
449 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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 
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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

729 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