PIE adding dark, unrounded borders
| Author |
Message |
|
McGuive7
Joined: Thu Dec 06, 2012 12:16 pm
Posts: 6
|
 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 |
|
|
|
jason
Joined: Wed Jul 14, 2010 11:46 am
Posts: 1448
|
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 |
|
|
|
McGuive7
Joined: Thu Dec 06, 2012 12:16 pm
Posts: 6
|
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 |
|
|
|
McGuive7
Joined: Thu Dec 06, 2012 12:16 pm
Posts: 6
|
Re: PIE adding dark, unrounded borders PS - the site is: ling.mightyminnow.com
|
| Thu Dec 06, 2012 5:41 pm |
|
|
|
jason
Joined: Wed Jul 14, 2010 11:46 am
Posts: 1448
|
Re: PIE adding dark, unrounded borders That URL can't be resolved, is it live?
|
| Thu Dec 06, 2012 6:03 pm |
|
|
|
McGuive7
Joined: Thu Dec 06, 2012 12:16 pm
Posts: 6
|
Re: PIE adding dark, unrounded borders
|
| Thu Dec 06, 2012 6:09 pm |
|
|
|
jason
Joined: Wed Jul 14, 2010 11:46 am
Posts: 1448
|
Re: PIE adding dark, unrounded borders
|
| Thu Dec 06, 2012 7:09 pm |
|
|
|
McGuive7
Joined: Thu Dec 06, 2012 12:16 pm
Posts: 6
|
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 |
|
|
|
jason
Joined: Wed Jul 14, 2010 11:46 am
Posts: 1448
|
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 |
|
|
|
jason
Joined: Wed Jul 14, 2010 11:46 am
Posts: 1448
|
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 |
|
|
Who is online |
Users browsing this forum: Google [Bot], Yahoo [Bot] and 3 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
|
|
Forums
