Forums
View unanswered posts | View active topics It is currently Thu Oct 30, 2014 9:12 am



Reply to topic  [ 12 posts ]  Go to page 1, 2  Next
 PIE adding dark, unrounded borders 
Author Message

Joined: Thu Dec 06, 2012 12:16 pm
Posts: 6
Post PIE adding dark, unrounded borders
Hi ya'll,

Think I've stumbled upon some buggy behavior with PIE in IE7, in which it's adding dark, un-radiused borders to an H1. I've got the following CSS for the H1:

Code:
h1.entry-title {
   position: relative; /* PIE */
   background: #cdd8e4; /* Old browsers */   
   border: 1px solid #efefef;
   padding: 1.5em 1em;
   border-radius: 10px;
   -webkit-box-shadow:  0px 0px 2px 1px rgba(90, 90, 110, .4);
   box-shadow:  0px 0px 2px 1px rgba(90, 90, 110, .4);
   /* IE9 SVG, needs conditional override of 'filter' to 'none' */
   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkZDhlNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
   background: -moz-linear-gradient(top, #cdd8e4 0%, #ffffff 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdd8e4), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #cdd8e4 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #cdd8e4 0%,#ffffff 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #cdd8e4 0%,#ffffff 100%); /* IE10+ */
   background: linear-gradient(to bottom, #cdd8e4 0%,#ffffff 100%); /* W3C */
   -pie-background: linear-gradient(#cdd8e4 0%,#ffffff 100%); /* PIE */
   behavior: url(/wp-content/themes/balance/PIE.htc);
}


When PIE does it's thing, it renders a dark, unrounded border, like so:
Attachment:
File comment: Image of dark, square border.
pie.jpg [18.53 KiB]
Not downloaded yet


I've tried all sorts of debugging, and what I finally found was that removing the following line solved the problem:
border: 1px solid #efefef;

What?!?!! Why is this causing problems? Any ideas?

Thanks everyone,
- Mickey


Thu Dec 06, 2012 12:33 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: PIE adding dark, unrounded borders
Are you using a true IE7 install, or is it emulated? Is it running in quirks mode or some other IE6-ish rendering mode?


Thu Dec 06, 2012 3:56 pm
Profile

Joined: Thu Dec 06, 2012 12:16 pm
Posts: 6
Post Re: PIE adding dark, unrounded borders
It's definitely a regular install of IE 7 on a PC, and it says it's running in Standards mode when I enter the following JS in the URL bar:
javascript:window.alert('You are in ' + (document.compatMode==='CSS1Compat'?'Standards':'Quirks') + ' mode.')

Thoughts?


Thu Dec 06, 2012 5:40 pm
Profile

Joined: Thu Dec 06, 2012 12:16 pm
Posts: 6
Post Re: PIE adding dark, unrounded borders
PS - the site is: ling.mightyminnow.com


Thu Dec 06, 2012 5:41 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: PIE adding dark, unrounded borders
That URL can't be resolved, is it live?


Thu Dec 06, 2012 6:03 pm
Profile

Joined: Thu Dec 06, 2012 12:16 pm
Posts: 6
Post Re: PIE adding dark, unrounded borders
Woops, apologies. It's http://ling.diabetesteachingcenter.com/. Thanks!


Thu Dec 06, 2012 6:09 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: PIE adding dark, unrounded borders
Here's what I see in IE7: http://cl.ly/image/251W03203t1M


Thu Dec 06, 2012 7:09 pm
Profile

Joined: Thu Dec 06, 2012 12:16 pm
Posts: 6
Post Re: PIE adding dark, unrounded borders
Right, that's because I fixed it with an IE 7 style sheet that removes the border declarations with border: none;

Any more ideas?


Thu Dec 06, 2012 11:40 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: PIE adding dark, unrounded borders
Can you provide a version without that workaround, so I can try to debug it?


Fri Dec 07, 2012 12:47 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: PIE adding dark, unrounded borders
If I re-apply border-style:solid in IE's developer tools it appears correctly: http://cl.ly/image/3M3J2g1S1s2Y


Fri Dec 07, 2012 12:50 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 12 posts ]  Go to page 1, 2  Next

Who is online

Users browsing this forum: Exabot [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.