3

I'm not having much luck in the CSS3PIE forum getting some help for an issue that I'm having. (yep, PIE is active and working fine elsewhere on the page)

Observation Summary

The failure is actually on two different elements:
1. The reply link's curved corners (top right & bottom left)
2. The comment container's border (all 4 corners)

IE8 Example

Some of the code...

<p class="reply"><a href="#">+ reply to this comment</a></p>

.reply {
  margin: -1px 0 -1px -1px;
  padding: 0;
  font-size: 11px;
  line-height: 14px;
  color: #333;
}
.reply a:link {
  display: inline-block;
  padding: 3px 6px 3px 5px;
  -webkit-border-radius: 0 5px 0 5px;
  -moz-border-radius: 0 5px 0 5px;
  border-radius: 0 5px 0 5px;

  /* behavior: url(PIE.htc);  IE WON'T APPLY BEHAVIORS IN A HOVER SELECTOR? PLACING IT HERE ALSO GIVES Z-INDEX ISSUES */
}
.reply a:link, .reply a:visited  { color: #878787; }
.reply a:hover {
  padding: 2px 5px 2px 4px;
  color: #EEE;
  background-color: #666;
  border: 1px solid #666;
}

Thoughts?

Craig
  • 325
  • 1
  • 4
  • 17
  • 2
    Suggestion, that is to say what I like to do - let browsers < IE9 be pointy. I always feel like my dev time could be better spent on creating features that don't come free with browser upgrades. – jball Apr 19 '11 at 22:50
  • (sigh) - I know, I know. Good policy. Alas, for me, current visitors on IE9 are about the same % as IE6. :\ – Craig Apr 20 '11 at 00:14
  • I feel your pain. Can't always pick our own battles, eh? – jball Apr 20 '11 at 15:52
  • These are not all that bad. Do you really need to be pixel perfect on every dated browser out there? How much effort are you putting into it? And how many of your user base is going to have a better experience from it? I usually code for the newer browsers and let the old ones degrade. I like to think that I'm punishing users with ie8- with square corners. http://www.smashingmagazine.com/2011/05/03/using-css3-older-browsers-and-common-considerations/ – Eduardo May 09 '11 at 20:24
  • 1
    well i ve been working like a pshyco to make rounded-corners, shadows and other things to work on all browsers out there. Than one day i realized! Putting this much effort just for a guy who doesnt even know how to or too lazy to upgrade a browser is just gonna be plenty of time that ve been lost for nothing. So i decided not to help their laziness and put my effort to create something new. if u really wanna have a good look in a website it doesnt really comes with rounded-corners or shadows. Its the simplicity! And i see that ur doing it right! So let it be sharp on the browsers < IE9. – Berker Yüceer Nov 18 '11 at 14:03

3 Answers3

0

In your reply CSS, you have:

  /* behavior: url(PIE.htc);  IE WON'T APPLY BEHAVIORS IN A HOVER SELECTOR? PLACING IT HERE ALSO GIVES Z-INDEX ISSUES */

Your PIE behavior is commented out. The following should fix it (assuming nothing else is interfering):

  behavior: url(PIE.htc);  /* IE WON'T APPLY BEHAVIORS IN A HOVER SELECTOR? PLACING IT HERE ALSO GIVES Z-INDEX ISSUES */
Shauna
  • 9,495
  • 2
  • 37
  • 54
  • I think with all the time and effort OP put into this, he would have realized that. It's probably commented out because it's not working. – Wesley Murch Jan 18 '12 at 14:06
  • 1
    @Madmartigan - All the time and effort he put into it is precisely why it's actually possible that he *did* miss it (it's a known fact that if you've written something, your brain registers what *should* be, instead of what actually *is*, it's why proofreaders and editors exist), especially since that line is crucial to making IE8 have the CSS3-like behaviors. – Shauna Jan 18 '12 at 16:49
0

I've had similar problems and managed to get some effects working by applying "position:relative", for some strange reason this works sporadically. Another thing I've found is that IE8 seems to have a problem with building up the css locator when using PIE.htc within the style sheet i.e. ".class1 .class2 h2", instead I've managed to get some styles working by attributing a class directly to a tag i.e. h2 class="xxxx" and writing the class simply as .xxxx in the style sheet - hope this description makes sense and is of use

caitriona
  • 8,569
  • 4
  • 32
  • 36
joe
  • 1
0

Try changing:

.reply a:link, .reply a:visited { color: #878787; }

with: .reply a:link, .reply a:visited { color: rgb(57, 57, 57) }

It seems IE + PIE have problems with # character

Jim
  • 11