Skip to main content
MichaelStephens
MichaelStephens
Legend
November 17, 2017
Answered

Border-radius causes table issues in IE

  • November 17, 2017
  • 7 replies
  • 2672 views

I’ve found an odd bug that I’m looking for help resolving. My organization uses an LMS that gives us limited ability to modify parts of the system. The home page uses tables and I can add some custom CSS to change things, but I’ve found an odd bug only when viewing the page in Internet Explorer.

The home page uses tables, which we have to use, and each table width is set to a percentage. Each table has 2 rows and 3 columns and only the middle column is not set to a specific width so it’s free to change width depending on the width of the page.

I’m applying border-top-right-radius to change the top right corner cells of the tables but doing so will add a thin white space between the left side of the cell and the middle cell depending on the width of Internet Explorer. As you increase and decrease the width of the browser the line will appear and disappear. If you remove border-top-right-radius the line also disappears.

I setup a test file in Dreamweaver to check this out and it’s not specific to the LMS. The bug appears due to a combination of setting the table to a percentage and the use of radius border-radius.

Any ideas on how to resolve the problem?

    This topic has been closed for replies.
    Correct answer Nancy OShea

    OK.  But border-radius can still be applied directly to the table's top-right corner, right?

    7 replies

    ALsp
    ALsp
    Legend
    November 18, 2017

    The issue can be mitigated by assigning a matching background color to the parent table. But I'm failing to see why you approached the border-radius and the backgrounds the way you did. Nor do I see a reason for even using a table.

      MichaelStephens
      MichaelStephensAuthor
      Legend
      November 28, 2017

      I don't have a choice in the matter. The LMS we use automatically generates tables instead of using div's with CSS. This is the only way to modify what how they've structured their system.

      MichaelStephens
      MichaelStephensAuthor
      Legend
      November 18, 2017

      It would if I was going to have the same color fill in all the table's cells but border-radius doesn't work if you're defining a color for each cell's class. However, that got me thinking about using the green for the entire table then using a pseudo class to re-define the color of the row directly below the first, and this solution worked.

      Second test

      Perfect resizing of IE without any display problems.

      MichaelStephens
      MichaelStephensAuthor
      Legend
      November 17, 2017

      Those are the classes created by the LMS that are assigned to the cells in the top of the table.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity ExpertCorrect answer
      Community Expert
      November 17, 2017

      OK.  But border-radius can still be applied directly to the table's top-right corner, right?

      Nancy O'Shea— Product User & Community Expert
      MichaelStephens
      MichaelStephensAuthor
      Legend
      November 17, 2017

      Since I can't give access to the LMS, I've uploaded my file, that replicates the LMS' HTML page structure and the CSS I'm adding, here: Untitled Document

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      November 17, 2017

      I don't know what box-left, right and middle are for.  You don't need them for border-radius. 

      <!doctype html>

      <html>

      <head>

      <meta charset="utf-8">

      <title>Untitled Document</title>

      <style>

      table {

      width: 80%;

      background: #012B10;

      color: #FFF;

      border-radius: 0 35px 0 0;

      padding: 2%;

      }

      </style>

      </head>

      <body>

      <table>

      <tr>

      <td>something</td>

      <td> </td>

      <td>something</td>

      </tr>

      <tr>

      <td>something</td>

      <td> </td>

      <td>something</td>

      </tr>

      </table>

      </body>

      </html>

      Nancy O'Shea— Product User & Community Expert
      ALsp
      ALsp
      Legend
      November 17, 2017

      IE10, 11, and MS Edge have issues with border radius on child elements. There are some workarounds, depending on your code, but, as Nancy said, you would need to post a link to a page that shows the issue for anyone to give you a solution.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      November 17, 2017

      Let's see your code.

      Are you using border-radius in % or fixed pixels?

      To what  selector(s) are you applying border-radius?

      Nancy O'Shea— Product User & Community Expert
      pziecina
      pziecina
      Legend
      November 17, 2017

      Have you tried applying the

      overflow: hidden;

      property?

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices