Forums
View unanswered posts | View active topics It is currently Wed Apr 23, 2014 2:01 pm



Reply to topic  [ 7 posts ] 
 Conflict with Dean Edwards' IE7.js 
Author Message

Joined: Wed Aug 11, 2010 6:23 pm
Posts: 4
Location: Brisbane, Australia
Post Conflict with Dean Edwards' IE7.js
Do you know if there are any conflicts between CSS3 Pie and IE7.js by Dean Edwards? I'm working on a site where I can see all the CSS3 properties being applied in IE6 when the page first loads for a fraction of a section before IE7.js loads and then all the CSS3 styles get removed, and in the case of rounded buttons, they disappear altogether. :o

I could get away without using IE7.js but it doesn't seem right to be using all this lovely CSS3 goodness and then having to litter the markup with unnecessary classes just to get IE6 to behave. ;)


Wed Aug 11, 2010 6:29 pm
Profile WWW

Joined: Mon Jul 19, 2010 4:46 am
Posts: 34
Post Re: Conflict with Dean Edwards' IE7.js
I guess it's possible that something in the IE7.js script and/or Pie is hitting IE's hasLayout feature, which can impact the page layout. The info on this page may help.

That said, if your buttons are disappearing completely, it may just be hitting the z-index issue. In which case, you should add "position:relative;" to all the affected elements.


Thu Aug 12, 2010 6:42 am
Profile

Joined: Wed Aug 11, 2010 6:23 pm
Posts: 4
Location: Brisbane, Australia
Post Re: Conflict with Dean Edwards' IE7.js
I added position: relative and it made the background of the buttons appear, but not the text and the buttons aren't clickable either.

I'm also finding that with this code:
Code:
.btn a, button {
   background: #B11D0A;
   background: -moz-linear-gradient(270deg, #B11D0A, #7D1407);
   background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #B11D0A),color-stop(1, #7D1407));
   -pie-background: linear-gradient(270deg, #B11D0A, #7D1407);
   border: 1px solid #B11D0A;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
   box-shadow: 0 1px 3px rgba(0,0,0,0.5);
   color: #FFF;
   cursor: pointer;
   font-size:107.69%;
   font-weight:bold;
   letter-spacing:1px;
   line-height: 1;
   min-height: 0;
   padding: .4em 10px;
   position: relative;
   text-shadow: 1px 2px 1px rgba(88, 14, 5, 1);
   filter: Shadow(Color=#580E05, Direction=135, Strength=2);
   text-transform: uppercase;
   vertical-align: middle;
   zoom: 1;
   z-index:2;
}
.btn a:hover, .btn a:focus, .btn a:active,
button:hover, button:focus { background: #7D1407; text-decoration:none }


IE7 is putting a solid white rectangle border around <buttons> (not anchors though).


Mon Aug 23, 2010 4:35 pm
Profile WWW

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: Conflict with Dean Edwards' IE7.js
Just want to check... are you running beta1 or beta2? I ask because beta2 includes a workaround for a strange IE behavior where it adds a 1px solid white inner border to button elements, which sounds like it may be what you're seeing. If you're using beta1 you'll definitely want to upgrade.


Mon Aug 23, 2010 7:24 pm
Profile

Joined: Wed Aug 11, 2010 6:23 pm
Posts: 4
Location: Brisbane, Australia
Post Re: Conflict with Dean Edwards' IE7.js
I'm using beta2 now and it's fixed the white border problem. It's also made the text appear on buttons and made them clickable for IE6 but not for anchors. :?


Mon Aug 23, 2010 7:58 pm
Profile WWW

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: Conflict with Dean Edwards' IE7.js
I tried out your code snippet. It seems the disappearing text is a side effect of your usage of the Shadow filter. I'm not sure exactly why it is doing that, but removing the filter makes the text appear. Of course then you lose your text shadow effect, but at least you can read it ;)

Regarding the link background not being clickable in IE6, this is a known issue which I hope to fix, or at least provide a workaround, by beta3.


Mon Aug 23, 2010 9:35 pm
Profile

Joined: Wed Aug 11, 2010 6:23 pm
Posts: 4
Location: Brisbane, Australia
Post Re: Conflict with Dean Edwards' IE7.js
Ah cool, nice catch. I've moved that filter into a conditional comment for higher than IE6 which is good enough as far as I'm concerned. :D


Mon Aug 23, 2010 9:53 pm
Profile WWW
Display posts from previous:  Sort by  
Reply to topic   [ 7 posts ] 

Who is online

Users browsing this forum: No registered users and 7 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.