CODEWITHSUNDEEP
htmlcssinternet-explorer-8
rowefx
rowefx

Reputation: 265

IE8 Border Radius image issue

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.sstatic.net/9AGZF.jpg

Thanks guys!

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

Upvotes: 0

Views: 445

Answers (1)

Pete
Pete

Reputation: 58422

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

Upvotes: 1

Related Questions