Forums
View unanswered posts | View active topics It is currently Thu Oct 23, 2014 5:00 am



Reply to topic  [ 5 posts ] 
 Border, shadow, bacground gradient 
Author Message

Joined: Fri Jan 14, 2011 2:35 am
Posts: 2
Post Border, shadow, bacground gradient
Hello.
This HTML code doesn't looks properly in IE (see in attached file):
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>див на 100%</title>
<style type="text/css">
.test
{
border-color:#FFFFFF;
border-width:2px;
border-style:solid;
position:relative;
left:30px;
top:30px;
width:200px;
height:100px;
border-radius:10px;
box-shadow: 0 0 10px 2px #1A3457;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a2cacf, endColorstr=#7aabbc);
behavior:url("PIE.htc");
}

</style>
</head>
<body>
<div class="test">test</div>
</body>
</html>


If I remove gradient background then work rouded corners and borders. If I remove border-radius then work borders.
How I can resolve this problem and use borders, border-radius, background gradient and shadow both for one element?

Alex


Attachments:
problem.jpg [22.42 KiB]
Downloaded 330 times
Fri Jan 14, 2011 2:52 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Border, shadow, bacground gradient
Do not use filters for gradients. Use the CSS3 linear-gradient syntax with -pie-background. That allows PIE to apply the rounding to the gradient as well.


Fri Jan 14, 2011 10:24 am
Profile

Joined: Fri Jan 14, 2011 2:35 am
Posts: 2
Post Re: Border, shadow, bacground gradient
Thanks a lot. It's realy works:
Code:
-pie-background:linear-gradient(top, #c7eef3, #84bdd1);


Sun Jan 16, 2011 4:33 am
Profile

Joined: Wed Jan 19, 2011 8:18 pm
Posts: 1
Post Re: Border, shadow, bacground gradient
Hi there, i am creating a website in squarespace and want to create a shadow border around my content template.
the code i used worked perfectly in firefox, but not at all in IE.
i dont know how to modify it, or create a whole new code completely that is compatible in both browsers...can anyone please help???

thank u in advance!


Wed Jan 19, 2011 8:22 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Border, shadow, bacground gradient
@bella29: There are plenty of examples of using PIE to implement box-shadow in IE, in these forums and on the main css3pie.com site. Do you have a specific question about it?


Wed Jan 19, 2011 10:22 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 5 posts ] 

Who is online

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