Forums
View unanswered posts | View active topics It is currently Sat Aug 02, 2014 2:36 am



Reply to topic  [ 6 posts ] 
 Losing border radius only on a couple of elements 
Author Message

Joined: Thu Feb 03, 2011 12:49 pm
Posts: 5
Post Losing border radius only on a couple of elements
http://southlakeradiology.com/

For some reason, I can't get a border radius on #header or #main to work? But it's working on #slideshow and #wrapper elements...??

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Southlake Radiology - "Your Partner in Diagnostic Imaging"</title>
<link rel="shortcut icon" href="favicon.ico" />

<style type="text/css" media="screen, print, projection">
   body,
   html {
      margin:0;
      padding:0;
      color:#000;
      background:#a7a09a;
      font-family: Arial, Arial, Helvetica, sans-serif;
   }
   
#wrapper {
   width:900px;
   padding: 0;
   margin:24px auto 10px auto;
   border: 1px solid black;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: #666 -4px 2px 2px;
   -moz-box-shadow: #666 -4px 2px 2px;
   box-shadow: #666 -4px 2px 2px;
   behavior:url(PIE.php);
   background: #ff6600;
   position:relative;
   zoom:1;
}

#header {
   width: 100%;
   background:#ffffff;
   margin: 0 0 -1px 0;
   -webkit-border-top-left-radius: 8px;
   -webkit-border-top-right-radius: 8px;
   -moz-border-radius-topleft: 8px;
   -moz-border-radius-topright: 8px;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   behavior: url(/PIE.htc);
   position:relative;
}
   
.head_left {
   position: relative;
   top: 0px;
   left: 0px;
   -webkit-border-top-left-radius: 8px;
   -webkit-border-top-right-radius: 8px;
   -moz-border-radius-topleft: 8px;
   -moz-border-radius-topright: 8px;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
}

#ribbon {
   position:absolute;
   top: 100px;
   right: 0;
   zoom:1;
   z-index:4;
   width: 720px;
   height: 48px;
   text-align: right;
   line-height: 48px;
   background-image: -webkit-linear-gradient(left , rgb(255,255,255) 0%, rgb(255,102,0) 58%, rgb(255,102,0) 98%); /* For WebKit (Safari, Google Chrome etc) */
   background-image: -moz-linear-gradient(left , rgb(255,255,255) 0%, rgb(255,102,0) 58%, rgb(255,102,0) 98%); /* For Mozilla/Gecko (Firefox etc) */
   background-image: -ms-linear-gradient(left , rgb(255,255,255) 0%, rgb(255,102,0) 58%, rgb(255,102,0) 98%);
   filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#FFFFFFFF, endColorStr=#FFFF6600, GradientType=1); /* IE7 and under */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#FFFF6600, GradientType=1)"; /* IE8 */
   background-image: -o-linear-gradient(left , rgb(255,255,255) 0%, rgb(255,102,0) 58%, rgb(255,102,0) 98%); /*Opera*/
   background-image: linear-gradient(left , rgb(255,255,255) 0%, rgb(255,102,0) 58%, rgb(255,102,0) 98%);
   background-image: -webkit-gradient(
      linear,
      left bottom,
      right bottom,
      color-stop(0, rgb(255,255,255)),
      color-stop(0.58, rgb(255,102,0)),
      color-stop(0.98, rgb(255,102,0))
      );
   behavior:url(PIE.php);*/
}

.motto {
   position: relative;
   font-style: italic;
   right: 16px;
   font-weight:bold;
}

#main {
   min-height: 400px;
   float:left;
   width:600px;
   padding:10px;
   background:#ffffff;
   -webkit-border-top-right-radius: 32px;
   -moz-border-radius-topright: 32px;
   border-top-right-radius: 32px;
   -moz-border-radius-bottomright: 32px;
   border-top-right-radius: 32px;
   border-bottom-right-radius: 32px;
   behavior:url(PIE.php);
   zoom:1;
   z-index:4;
}

#sidebar {
   width: 250px;
   float:right;
   padding:10px;
   background:#ff6600;
   font-family: Arial, Arial, Helvetica, sans-serif;
   font-size: .8em;
}

#sidebar ul {
   list-style: none;
   margin: 0 auto;
   padding: 0;
   background: 0;
   width: 200px;
}

#sidebar li a {
   text-decoration: none;
   height: 32px;
     height: 24px;
}
   
#sidebar li a:link, #sidebar li a:visited {
   color: black;
   display: block;
   background: url(images/menu.gif);
   padding: 8px 0 0 20px;
}
   
#sidebar li a:hover {
   color: black;
   background: url(images/menu.gif) 0 -32px;
   padding: 8px 0 0 25px;
}
   
#sidebar li a:active {
   color: white;
   background: url(images/menu.gif) 0 -64px;
   padding: 8px 0 0 25px;
}

#slideshow {
   margin: 16px auto 4px auto;
    position:relative;
    height:200px;
    width: 200px;
   background: url(images/slide_mask.png);
      z-index: 4;
border-radius: 8px
}

#slideshow img {
    position:absolute;
   height:200px;
    width: 200px;
   z-index: 1;
   border: none;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   behavior:url(PIE.php);
}

#slideshow IMG.active {
   font-size: 0;
    height: 200px;
   width: 200px;
   z-index: 3;   
}   

   * html #footer {
      height:1px;
   }
   
div.hr {
  height: 9px;
  background: #fff url(images/line_tile.png) repeat-x scroll center;
}

div.hr hr {
  display: none;
}

.shadow {
-webkit-box-shadow: #666 -2px 2px 4px;
-moz-box-shadow: #666 -2px 2px 4px;
box-shadow: #666 -2px 2px 4px;
   behavior:url(PIE.php);
}
   
#footer {
      clear:both;
      padding:2px 2px;
      background:0;
      text-align: center;
      font-size: .75em;
      margin: 0 0 6px 0;
   }

#footer p {
      margin:0;
    }

</style>

</head>

<body>
<div id="wrapper">
   <div id="header"><img src="images/sr_header.png" class="head_left"/><div id="ribbon"><span class="motto">"Your Partner in Diagnostic Imaging"</span></div></div>
   <div id="main">Southlake Radiology is a radiologist owned and managed company. The support staff consists of radiology professionals with a combined experience of over 37 years of experience. Our goal is to provide high quality reads to include subspecialty reads by highly trained and qualified radiologists. Southlake Radiology specializes in providing superior service to small and medium size facilities. We believe that you deserve high quality service regardless of size. Southlake Radiology provides to several sites including Baylor Orthopedic and Spine Hospital, Manchester Memorial Hospital, Arlington Medical Imaging, Shelby Regional Medical Center, Lake Whitney Medical Center, Central Texas Hospital, Tri-Cities Urgent Care, Park Row Medical & Dental, and others. We are experienced in working with hospitals, imaging centers and physician offices in setting up remote access allowing images to be sent quickly to our PACS and then giving the site, as well as the referring physicians, access to their patients’ images and reports.<br /><br />A decision to utilize Southlake Radiology is a step toward assuring the final steps of the radiology process is met with the same quality and attention that your facility is providing on the front end. We strive to provide the patients and the facility with exceptional service in regards to quality timely reports. We work with the facility as a partner not as a separate third party entity. Together we will be able to offer your patients the best possible care.   </div>
   <div id="sidebar">
         <ul>
            <li><a href="http://southlakeradiology.com/">Home</a></li>
            <li><a href="http://">About Us</a></li>
            <li><a href="http://">Our Physicians</a></li>
            <li><a href="">Our Partners</a></li>
            <li><a href="https://images.southlakeradiology.com/index.jsp">Physician Portal</a></li>
            <li><a href="http://">Contact Us</a></li>
         </ul>
   <div id="slideshow" class="shadow"><img src="images/slideshow/slide_pic1.PNG" class="active" /><img src="images/slideshow/slide_pic2.PNG" /><img src="images/slideshow/slide_pic3.PNG" /></div>
   </div>
   <div id="footer">
      <p>Copyright 2012 &copy; Southlake Radiology</p>
   </div>
</div>

<script  src="jquery-1.4.4.js"></script>
<script>
function cycleImages(){
      var $active = $('#slideshow .active');
      var $next = ($('#slideshow .active').next().length > 0) ? $('#slideshow .active').next() : $('#slideshow img:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
     $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }

$(document).ready(function(){
// run every 7s
setInterval('cycleImages()', 3000);
})
</script>
</body>
</html>


Thu Apr 05, 2012 9:54 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Losing border radius only on a couple of elements
From the documentation at http://css3pie.com/documentation/suppor ... der-radius

"Only the shorthand version is supported; the longhand border-top-left-radius etc. properties are not. The shorthand syntax does support different radii per corner, though:

border-radius: 5px 10px 15px 20px; (top-left, top-right, bottom-right, bottom-left)."


Thu Apr 05, 2012 10:10 am
Profile

Joined: Thu Feb 03, 2011 12:49 pm
Posts: 5
Post Re: Losing border radius only on a couple of elements
LOL, ya I read through all the documention *again* and had a !DOH! moment...that fixed the border-radius on #main, but I can't get them working on #header or .head_left...any ideas?

Thanks, btw!


Thu Apr 05, 2012 10:29 am
Profile

Joined: Thu Feb 03, 2011 12:49 pm
Posts: 5
Post Re: Losing border radius only on a couple of elements
Nevermind, I applied a little zoom and realized I had used a single htc instead of the correct php file, now it's all good.

Let this be a lesson, kids! :mrgreen:


Thu Apr 05, 2012 10:37 am
Profile

Joined: Wed Jul 11, 2012 6:21 am
Posts: 2
Post Re: Losing border radius only on a couple of elements
Hi Friends,
I am looking for a solution, i google lot about this but none of us have faced this issue, i request your help me for share point 2010 integration with PIE.htc for round-corners and gradient, Only one area is effecting in entire site, if i remove the effecting area and try for other areas, not getting succeeded.

PIE.htc is located in "/_layouts/styles/" folder
//Not working as this is dynamically adding to SharePoint site.
#tplinks .tprgt{
border-top:1px solid #ccc!important;
border-bottom:1px solid #fff!important;
border-left:1px solid #ccc!important;
border-right:1px solid #fff!important;
background:#dfe4ea;
padding-left:5px;
border-radius: 5px;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
behavior: url('/_layouts/styles/PIE.htc');
}

// left navigation links
.s4-ql ul.root li a {
margin:3px 0!important;
padding:5px 3px 5px 10px!important;
border:1px solid #999!important;
background:#e8e8e8 none;
color:#000!important;
border-radius: 5px;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#f5f5f5), to(#e7e7e7));
background: -webkit-linear-gradient(#f5f5f5, #e7e7e7);
background: -moz-linear-gradient(#f5f5f5, #e7e7e7);
background: -ms-linear-gradient(#f5f5f5, #e7e7e7);
background: -o-linear-gradient(#f5f5f5, #e7e7e7);
background: linear-gradient(#f5f5f5, #e7e7e7);
behavior: url('/_layouts/styles/PIE.htc');
}

//Working as this is dynamically adding to SharePoint site.
#footer .cnt {
width: 985px;
margin:auto;
border:1px solid #666;
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url('/_layouts/styles/PIE.htc');
}

please tell me where im doing mistake any help would be greatly appreciated.

thanks
vinod


Wed Jul 11, 2012 6:28 am
Profile

Joined: Sat Aug 21, 2010 11:12 am
Posts: 223
Post Re: Losing border radius only on a couple of elements
Easy fix: http://css3pie.com/documentation/known- ... #shorthand
Everything about shorthand properties on MDN.

_________________
PIE needs more community support persons! Time is money, which means you can fund PIE development by answering support questions.


Wed Jul 11, 2012 2:55 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 6 posts ] 

Who is online

Users browsing this forum: Bing [Bot], Exabot [Bot], Google [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.