Forums
View unanswered posts | View active topics It is currently Tue Jul 29, 2014 12:51 pm



Reply to topic  [ 3 posts ] 
 border radius only showing one corner 
Author Message

Joined: Mon Nov 26, 2012 8:19 pm
Posts: 2
Post border radius only showing one corner
Hello, thank you for reading this. CSS3 PIE is working well for me for everything except the rounded corners on the background image in my #header element. Curiously enough, the border radius works fine for my .gridcontainer div surrounding all of my content. The top left corner of the header background image works, but not the top right. If anyone has encountered this or has any advice I would greatly appreciate it

.gridContainer {
position:relative;
display:block;
width: 88.2%;
max-width:1232px;
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
border-radius:14px;
behavior:url(PIE.HTC);
border:solid 2px #F06F17;

}
#header {
position:relative;
border-radius:12px 12px 0 0;
behavior:url(PIE.HTC);
clear: both;
float: left;
margin-left: 0;
width: 100%;
height:260px;
display: block;
background:url(assets/index.jpg) no-repeat;

I also use PIE to generate the background graient and box shadow for the
main image on the site. I dont know if its okay to put the url here
but right now its on my webserver (IIS 7.5) http://97.94.133.48

Robert


Mon Nov 26, 2012 8:38 pm
Profile

Joined: Tue Nov 29, 2011 1:26 am
Posts: 38
Post Re: border radius only showing one corner
Try to add a z-index:999;
will be nice to have a demo to understand better what's happening.

I had a similar problem; you can fix that in two ways:
1:
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);/*firefox*/
-pie-background: linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);/*IE7+ rendered by pie.js*/

or
2: cut 1px from your image with height that you need in photoshop and give to your element that background image with repeat-x;


Tue Dec 04, 2012 1:28 am
Profile

Joined: Mon Nov 26, 2012 8:19 pm
Posts: 2
Post Re: border radius only showing one corner
Thank you for your reply. I really appreciate it. I uploaded the files to my charter web hosting offered by my ISP. Unfortunately, I think their web server isn't recognizing the pie.htc file so the site looks like crap in IE8, no gradients, rounded corners, etc. I'm assuming it's just their webhost, so I couldn't show a demo that made much sense. Thankfully I did fix it though.
I changed the dimensions of the background image like you said.

Thanks again,

Robert


Tue Dec 04, 2012 9:36 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 3 posts ] 

Who is online

Users browsing this forum: No registered users and 16 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:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.