Alexancho Posted September 5, 2010 Share Posted September 5, 2010 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):or even worst: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> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.