Jump to content

Problem with rounded corners


Alexancho
 Share

Recommended Posts

I created two examples with rounded corners:http://puregoldwebsites.com/examples/rcorners/rcorners1.htmlhttp://puregoldwebsites.com/examples/rcorners/rcorners2.htmlWhen you reduce size of a page using Ctrl+mouse wheel you can see some unpleasant changes like this (In FF, Safari, Chrome):ce9c26b23fa9.jpgor even worst:e533cb18a2d9.jpg3b2246b6b900.jpgWhat's wrong? How can i solve this problem?The code of rcorners1.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  <title> new document </title><style type="text/css">*{	padding:0;	margin:0; }#left_navi_box_left {	margin:30px auto;	width:308px;	height:320px;}.top {	background:#ffffff url("images1/r2.png") right top no-repeat;	width:308px;	height:12px;}div#left_top  {	background:transparent url("images1/r1.png") left top no-repeat;	float:left;	width:12px;	height:12px;}.middle {	background:#ffffff;	border-top:2px solid #662210;	float:left;	width:286px;	height:10px;}.corner2 {	background:transparent url("images1/corners1_btm.png") left top no-repeat;	width:308px;	height:12px;}#left_navi_box_main {	background:#ffffff;	border-left:2px solid #662210;	border-right:2px solid #662210;	width:304px;	height:296px;}#left_navi_box_main img {	margin:9px 12px;}</style> </head> <body>	<div id="left_navi_box_left"> <!-- left_navi_box_left -->									<div class="top">						<div id="left_top"></div><div class="middle">													</div>					</div>					<div id="left_navi_box_main"></div>					<div class="corner2"></div>									</div> <!-- end left_navi_box_left --> </body></html>

The code of rcorners2.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  <title> new document </title><style type="text/css">*{	padding:0;	margin:0; }body {	background:#CC6600;}#lower_main_box {	margin:30px auto;	width:1080px;}.lmb_corner_1a {	background:transparent url("images1/rcorn1_1.png") left top no-repeat;	float:left;	width:12px;	height:12px;	}.lmb_corner_1_top_middle {	float:left;	background:#FFF7F3;	border-top:2px solid #662210;	width:1056px;	height:10px;	}div.border {	border-right:2px dashed #BCC8D3;	height:10px;	width:678px;}.lmb_corner_1b {	float:left;	background:transparent url("images1/rcorn1_2.png") left top no-repeat;	width:12px;	height:12px;	}.lmb_middle {	clear:both;	background:#FFF7F3;	border-left:2px solid #662210;	border-right:2px solid #662210;	width:1076px;}#lmb_middle_left {	border-right:2px dashed #BCC8D3;	float:left;	width:688px;	min-height:400px;}#lmb_middle_right {	float:left;	width:386px;	height:400px;}.lmb_corner_1c {	background:transparent url("images1/rcorn1_3.png") left top no-repeat;	float:left;	width:12px;	height:12px;}.lmb_corner_1_btm_middle {	float:left;	background:#FFF7F3;	border-bottom:2px solid #662210;	width:1056px;	height:10px;	}.lmb_corner_1d {	float:left;	background:transparent url("images1/rcorn1_4.png") left top no-repeat;	width:12px;	height:12px;	}.clear {	clear:both;	height:1px;}</style> </head> <body>		<div id="lower_main_box"> <!-- lower_main_box -->							<div class="lmb_corner_1a"></div>				<div class="lmb_corner_1_top_middle">					<div class="border"></div>				</div>				<div class="lmb_corner_1b"></div>								<div class="lmb_middle"> <!-- lmb_middle -->					<div id="lmb_middle_left">						<div id="first_link">							</div>					</div>					<div id="lmb_middle_right">					</div>					<p class="clear"></p>				</div>  <!-- end lmb_middle -->								<div class="lmb_corner_1c"></div>				<div class="lmb_corner_1_btm_middle">					<div class="border"></div>				</div>				<div class="lmb_corner_1d"></div>				<p class="clear"></p>											</div> <!-- end lower_main_box --> </body></html>

Edited by Alexancho
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...