#1
  1. No Profile Picture
    jasonc310771
    Guest
    Devshed Newbie (0 - 499 posts)

    Border radius fails in one part but not others of safari browser


    I have tried firefox and IE, lastest versions and all works ok, but in Safari the top left and top right of the rounded purple border is not rounded like the other radius borders on the page which show correctly.

    The attached image is what the left and right rounded purple border looks like, but can not figure out why it shows ok in Firefox but not Safari.

    Can anyone see where I might be going wrong in trying to get this to work like other browsers show it ?


    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css"><!--
    body { border: 0em solid #000; background-color: #ddd; height: 100%; }
    div { padding: 0em; margin: 0em; }
    div.bodyContainer, div.header, div.footer { width: 60em; }
    div.header { text-align: center; }
    div.bodyContainer { text-align: center;	margin: 0 auto; }
    div.left, div.right { width: 10em; border-bottom: 0.0625em dashed #CF8DEB;}
    div.middle { width: 40em; margin: 0 auto; padding-left: 0.41em; border-bottom: 0.0625em dashed #CF8DEB;}
    div.footer { text-align: center; }
    div.bodyContainer, div.outer, div.left, div.right { background-color: #56D1AC; /* green */ }
    div.bodyContainer, div.header, div.middle { border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
    div.outer { display: block; }
    div.left, div.middle, div.right { display: table-cell; }
    div.middle { border-top: 0.3em solid purple;	border-right: 0.6em solid purple;	border-left: 0.6em solid purple; }
    div.bodyContainer { /*background-color: pink;*/ }
    div.middle {		background-color: lightblue; }
    div.footer {		background-color: #ddd;  }
    .clearfloat {			clear: both; }
    .menu {	background: #6384DE; margin: 0em; text-align: center; font-size: 0.965em; font-family: Broadway; border: 0em solid #EDB6B6; padding: 0.5em 0em 0.313em 0em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; } /*	3F65CC	*/
    --></style>
    </head>
    <body onload="disableUpdateSubmit();">
    
    <div class="bodyContainer">
    	<div class="header">
    		<!-- menu start -->
    		<div class="menu"></div>
    		<div class="clearfloat"></div>
    		<!-- menu end -->
    	</div>
    
    			<div class="outer">
    
    					<div class="left"><br></div>
    
    					<div class="middle"><br>middle</div>
    					<!-- middle end -->
    
    					<div class="right">
    						<!-- start of specials -->
    						<div class="specials">SPECIAL OFFERS</div>
    						<!-- end of specials -->
    					<br class="clearfloat">
    					</div>
    
    			</div>
    
    	<div class="footer"></div>
    
    </div>
    
    </body>
    </html>
    Attached Images
    Last edited by jasonc310771; May 17th, 2012 at 08:16 AM.

IMN logo majestic logo threadwatch logo seochat tools logo