0

I need curved bordered CSS for IE8 and all major browsers. currently I am trying with CSS PIE

jsfiddle demo is here. But I would suggest the answerers to download the PIE.htc file form here and try the HTML as a standalone page to get the real effect in IE8.

My problem is the <td> containing the "Thank you for registering" text is not curving in IE8 in jsfiddle. If I run it as a HTML page, it is curving in IE8 but the blue background is overlapping the "Thank you for registering" <td> (but its background is "#f2f2f2").

    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0px; padding:0px;">
        <tr>
            <td>&nbsp;</td>
            <td style="width: 60%; text-align: center;background: #0067C8;">
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td colspan="3" style="height: 50px; background-color: #262626; width:100%; text-align: left;">
                            <img src="twitter_logo.png" width="200" height="50" alt"Twitter" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="height: 25px;">&nbsp;</td>
                    </tr>
                    <tr>
                        <td style="width:3%;">&nbsp;</td>
                        <td style="width: 94%; background-color: #f2f2f2; height: 400px; font-family: arial; font-size: 30px; color: #2DB8ED; text-align: center; border: 2px solid #bcbcbc;text-align: center;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; behavior: url(PIE.htc);">
                            Thank you for registering
                        </td>
                        <td style="width:3%;">&nbsp;</td>
                    </tr>
                    <tr>
                        <td colspan="3" style="height: 25px;">&nbsp;</td>
                    </tr>
                </table>
            </td>
            <td>&nbsp;</td>
        </tr>
    </table>
tusar
  • 3,364
  • 6
  • 37
  • 60

3 Answers3

1

Have you tried, http://jquery.malsup.com/corner/ jquery plugin to add curves?

$(function () {
   $('table table tr:eq(2) td:eq(1)').corner();
});

Demo : http://jsfiddle.net/bDvRd/4/

codef0rmer
  • 10,284
  • 9
  • 53
  • 76
  • I am not using jQuery with that stand-alone page, it is an email-template actually. But +1 as you are correct. I need a CSS-based solution. could you please try once ? – tusar Apr 10 '12 at 07:20
  • Unfortunately there is no CSS solution which will work on all the major browsers. It would be harsh to say that either go with a JS solution or do not consider such browsers not supporting corners. – codef0rmer Apr 10 '12 at 11:47
1

I think its mainly because of Problems with z-index.

Check here for more details. general issues encountered when using PIE

Exor
  • 402
  • 5
  • 8
  • you rock @Exor ! found it ! `position:relative;z-index: 0;` in the outer (with background color) did the trick ! – tusar Apr 10 '12 at 07:42
1

Try add 

position:relative;
z-index: 0;

by Using CSS3Pie htc for border-radius in IE8

OR CSS3 PIE - Giving IE border-radius support not working?

Community
  • 1
  • 1
kubedan
  • 616
  • 2
  • 7
  • 26