0

I'm looking for any working solution in IE8 for this little issue I'm having. For some reason css pie isn't working great on this server we are working on so we are having to use images for IE8 specific stylesheets to sort some quirks out.

On the right hand side there is a facebook panel that needs rounded corners, so far I have an image on the top of the panel to give it a rounded corner, but ideally we want rounded ones on the bottom too, but I just can't figure out how. Could anyone shed some light? Quick dirty fixes are welcome!

Image attached - see how it is in webkit compared to IE8:

https://i.stack.imgur.com/9AGZF.jpg

Thanks guys!

Edit: My solution was to add an extra div inside the parent. Thanks @Pete.

rowefx
  • 265
  • 2
  • 9
  • 26
  • 1
    Could you please post a minimum, working example of what you are doing on IE8 only? That would be better than having to crawl through your websites code, also for future visitors. – Uooo May 02 '13 at 10:35
  • Possible duplicate http://stackoverflow.com/questions/9426979/border-radius-for-ie8 – Ozzy May 02 '13 at 10:53

1 Answers1

1

if you add an extra div inside your #block-facebook-pull-facebook-pull-default and then flip your /images/fb_top.jpg to create a bottom image, you can add the following style to the new div:

#block-facebook-pull-facebook-pull-default > div
{
   background:url(../images/fb_bottom.jpg) left bottom no-repeat;
}

you then want to take all the padding off the parent div and put it onto the new div

Pete
  • 57,112
  • 28
  • 117
  • 166
  • Thanks Pete, this is what I ended up doing. Because it is using a Drupal module I had to use some jQuery .wrapAll to add a new div to that block div. Thanks for your answer! – rowefx May 02 '13 at 12:57