Hi !

I use the Round Corner Boxes layout for some of my panels and they look great in firefox,safari and IE8 but on ie6/ie7 I get troubles. Appended some screenshots showing the differences. Anyone that could help me on that ?
screen1 and 2 show the problem in ie6/ie7 vs. screen3 and 4 show the same page in ie8

CommentFileSizeAuthor
#8 906520-ie7-problems-with-rounded-shadows.patch2.65 KBmerlinofchaos
screen4.png4.07 KBarnold_mad
screen3.png4.55 KBarnold_mad
screen2.png5.18 KBarnold_mad
screen1.png5.18 KBarnold_mad

Comments

apmsooner’s picture

apmsooner commented

I noticed that problem too but I don't think there is a solution because IE6/7 don't support transparent pngs which is what that style creates. A nice to have feature for panels might be a selection rule for browser detection so... if not IE6, apply this style. I'd love to see functionality like that built into panels if possible. I would think its possible since Mobile Tools is used in the same way to detect mobile browsers as a selection rule.

arnold_mad’s picture

arnold_mad commented

what about such a solution: http://koivi.com/ie-png-transparency/

merlinofchaos’s picture

merlinofchaos commented

IE7 handles the transparency ok, it's only IE6 that has that problem as far as I can tell. (I'm running IE8 in IE7 mode for testing this as I do not have IE7 anywhere). I don't have IE6 anywhere at all anymore, sadly, so I have no way to test that, but I think there's a way to work with IE6 to have the images run through IE's filter in CSS. I can't remember precisely how to do that.

The other problem is that the top and bottom edges are actually slightly out of position. Well, the top edge is actually 10px out of position, that is more than slightly.

The answer seems to be to add some IE6/7 specific CSS that puts those into the right place. This may also be true for the top right edge. I may need some help doing this.

apmsooner’s picture

apmsooner commented

FYI, I use this free application for testing old IE browsers. http://www.my-debugbar.com/wiki/IETester/HomePage

Also, i don't know if this module might be of any help for a possible solution? http://drupal.org/project/pngfix

arnold_mad’s picture

arnold_mad commented

for testing different browsers I use this : http://www.spoon.net/browsers/
works pretty well on my pc.
if you need anything else I would like to help to remove this issue ( im developer but a newbie on css)

SweeneyTodd’s picture

SweeneyTodd commented

This has been posted a few times in different forums. This is the fix - see http://drupal.org/node/918038#comment-3473786

div.rounded-shadow-background {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
SweeneyTodd’s picture

SweeneyTodd commented
Status: Active » Needs review
merlinofchaos’s picture

merlinofchaos commented
Status: Needs review » Fixed
StatusFileSize
new 906520-ie7-problems-with-rounded-shadows.patch2.65 KB

Well, it's not perfect, but I committed this patch to both D6 and D7 which vastly improves these on IE7. I think it still needs a little help in some situations, though.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

  • Commit 9e766fa on 7.x-3.x, master, pipelines, 7.x-3.x-i18n, 8.x-3.x by merlinofchaos: 
    #906520: Improve CSS for rounded shadow boxes on IE7.