Member Avatar for karlcunanan

IE once again proved its incompetency against other web browsers, is there no other way to round the corners of the table if putting a background color as its header except usign an image? These are my codes:

CSS

.table1
{
    -moz-box-shadow: 1px 0 5px #888;
    -webkit-box-shadow: 1px 0 5px #888;
    box-shadow: 1px 0 5px #888;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:justify;
    margin: 1em auto;
    padding: 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px thin;
    border-collapse: separate;

}
.color
{
    background-color:#66F;
}

HTML

<table class="table1" style="margin-left:18px"align="left" width="400" border="0">
  <tr>
    <td class="color" height="25">
</td>
  </tr>
  <tr>
    <td style="padding-left:20px; padding-right:20px; margin-top:20px" height="285"><span style="font-weight:bold; font-size:16px">Some text</span> Some text<br /><br />
     <span style="font-weight:bold; font-size:16px">Some text</span> Some text</td>
  </tr>
</table>
  • 3 Contributors
  • 3 Replies
  • 3K Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by AleMonteiro
Member Avatar for AleMonteiro

I just tested and it seems to work fine in IE 9.

With one detail: you must set the doctype to HTML 5

<!DOCTYPE html>
Member Avatar for JorgeM

Yes, the code above does produce rounded corners in IE9, but not earlier versions of IE.

Member Avatar for AleMonteiro

JorgeM,

corner-radius is a CSS 3 feature. It'll not work on earlier versions of any browser.

From W3Scholls:

The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.

Edited by AleMonteiro
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.