Log in

View Full Version : Problem with rounded corners


Alexancho
07 Sep 2010, 08:51 AM
I created two examples with rounded corners:
http://puregoldwebsites.com/examples/rcorners/rcorners1.html
http://puregoldwebsites.com/examples/rcorners/rcorners2.html

When you reduce size of a page using Ctrl+mouse wheel you can see some
unpleasant changes like this (In FF, Safari, Chrome):
http://s41.radikal.ru/i094/1009/e6/ce9c26b23fa9.jpg (http://www.radikal.ru)

or even worst:
http://s61.radikal.ru/i172/1009/2c/e533cb18a2d9.jpg (http://www.radikal.ru)

http://s45.radikal.ru/i108/1009/38/3b2246b6b900.jpg (http://www.radikal.ru)

What'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>
Wickham
07 Sep 2010, 01:48 PM
I didn't notice any difference when changing the window size but I did see the difference using zoom.

I expect browsers are making slightly different calculations for the images and the borders.

You might find it better if you use images all round instead of borders or use CSS3 border-radius http://www.css3.info/preview/rounded-border/ (but IE doesn't process this) or using javascript http://www.curvycorners.net/ .