I'm facing a display problem which happens only with IE. I defined a class in CSS for "table with rounded corners" (means the TD at each of its corners, not all or random TD). I defined a form, actually several small forms, with basic functions such as Delete or Modify the table entry. The table and related included forms are built by PHP.
See screenshots (IE, FF, CR) : https://i.stack.imgur.com/0u60C.jpg
IE uses the CSS which is intended for the bottom-right table corner for each TD with a submit button, which is unintended. This seems to depend on the TD's content.
I already confirmed below :
Firefox and Chrome work perfectly fine regardless of the TD's content, so I can say it is narrowed down to IE only.
This unwanted behavior happens with attached HTML code, so I can say it is not a server-side issue.
I already tried to put the tag outside of the TD, it did not change the behavior.
When the TD's content is just text (text), there is no problem.
When the TD's content is either a button or input type submit ( or ), the issue happens.
I can tell that this is below CSS line which is triggered unwantedly, because I changed the radius in this styling block only, to be sure :
table.rounded tbody tr:last-of-type td:last-of-type
Now I share relevant HTML and CSS codes.
HTML code :
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="../style.css">
</head>
<body>
<section>
<h1>Site Administration</h1>
<h2>Classes' Schedule</h2>
<table class="rounded">
<tbody>
<tr>
<td><strong>Monday</strong></td>
<td>19:00 - 22:00</td>
<td>Rugby</td>
<td>teacher 1, teacher 2</td>
<td><form method="post" action="admin.php">
<button type="submit" name="class_to_delete" value="1">Delete</button>
</form></td>
<td><form method="post" action="admin.php">
Modify</form></td>
</tr>
<tr>
<td><strong>Tuesday</strong></td>
<td>19:00 - 22:00</td>
<td>Soccer</td>
<td>teacher 3, teacher 4</td>
<td><form method="post" action="admin.php">
<button type="submit" name="class_to_delete" value="2">Delete</button>
</form></td>
<td><form method="post" action="admin.php">
Modify</form></td>
</tr>
<tr>
<td><strong>Friday</strong></td>
<td>19:00 - 22:00</td>
<td colspan=2>Description of regular events</td>
<td><form method="post" action="admin.php">
<button type="submit" name="class_to_delete" value="14">Delete</button>
</form></td>
<td><form method="post" action="admin.php">
Modify</form></td>
</tr>
</tbody>
<caption>List of Classes</caption>
<thead>
<tr>
<th class="centered">Day</th>
<th class="centered">Hours</th>
<th class="centered">Sport</th>
<th class="centered">Teachers</th>
<th>Del.</th>
<th>Modif.</th>
</tr>
</thead>
</table>
</section>
</body>
</html>
CSS code :
table.rounded thead th:first-of-type { /* 10px 0 0 0 : Top Left, for table with min 2 columns */
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
table.rounded thead th:last-of-type { /* 0 10px 0 0 : Top Right, for table with min 2 columns */
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
}
table.rounded tbody tr:last-of-type td:last-of-type { /* 0 0 10px 0 : Bottom Right, for table with min 2 columns */
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
}
table.rounded tbody tr:last-of-type td:first-of-type { /* 0 0 0 10px : Bottom Left, for table with min 2 columns */
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
/* - borders */
table.rounded {
border-collapse: separate;
}
table.rounded tr {
border: 0px;
}
table.rounded th,
table.rounded td {
border-top: 1px solid black;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid black;
}
table.rounded th:first-of-type,
table.rounded td:first-of-type {
border-left: 1px solid black;
}
table.rounded tr:last-of-type td {
border-bottom: 1px solid black;
}
table.rounded td.afterrowspan { /* follows in next tr, after the tr including the td which has rowspan defined */
border-left: 0px;
}
/* - corners [same as above] */
section table {
float: center;
max-width: 90%;
margin-top: 10px;
margin-bottom: 5px;
margin-left: auto; /* centers the table horizontally */
margin-right: auto; /* centers the table horizontally */
/*border: 1px solid black;*/
border-collapse: collapse; /* does not work with property Radius */
border-spacing: 0px;
}
section table th,
section table td {
color: #000000; /* Black */
font-size: 16px;
/* min-width: 150px; */
margin: 5px 0px 3px 0px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid black;
-webkit-border-radius: 0px;/*Safari,Opera,Chrome*/
-moz-border-radius: 0px;
border-radius: 0px;
vertical-align: middle;
text-align: left;
}
What I need your kind help for, is :
Understand the root cause of this unwanted behavior in IE
Find a hack or workaround for IE, using only HTML and CSS (no JS or any other addition).
Thanks a lot for your support!
