Results 1 to 2 of 2

Thread: Problem with rounded corners

  1. #1
    Join Date
    Aug 2009
    Posts
    42

    Problem with rounded corners

    I created two examples with rounded corners:
    http://puregoldwebsites.com/examples...rcorners1.html
    http://puregoldwebsites.com/examples...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):


    or even worst:




    What's wrong? How can i solve this problem?

    The code of rcorners1.html:
    Code:
    <!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:
    Code:
    <!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>

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    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/ .
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Similar Threads

  1. rounded corners with css
    By rich in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 08 Feb 2010, 04:40 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •