Highlighted

Border-radius causes table issues in IE

Engaged ,
Nov 17, 2017

Copy link to clipboard

Copied

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.

borderRadius.png

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?

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

Views

1.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Border-radius causes table issues in IE

Engaged ,
Nov 17, 2017

Copy link to clipboard

Copied

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.

borderRadius.png

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?

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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

Views

1.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 17, 2017 0
LEGEND ,
Nov 17, 2017

Copy link to clipboard

Copied

Have you tried applying the

overflow: hidden;

property?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2017 1
Adobe Community Professional ,
Nov 17, 2017

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2017 0
Mentor ,
Nov 17, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2017 0
Engaged ,
Nov 17, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2017 0
Adobe Community Professional ,
Nov 17, 2017

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2017 0
Engaged ,
Nov 17, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2017 0
Adobe Community Professional ,
Nov 17, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 17, 2017 0