|
RobW23
Joined: Mon Nov 26, 2012 8:19 pm Posts: 2
|
 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.48Robert
|
|
rulernature
Joined: Tue Nov 29, 2011 1:26 am Posts: 38
|
 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;
|
|
RobW23
Joined: Mon Nov 26, 2012 8:19 pm Posts: 2
|
 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
|