FullCalendar IE8 CSS Border Bug

Hello,

I’m using FullCalendar JS on a page. In IE8 there is an issue where all the borders are showing as solid black lines. I have narrowed down the cause to the usage of of the border-style hidden value. I’m a bit confused though because IE8 supports the the border-style hidden value. Its seems though as if there is a bug or something in IE8 that results in a solid black line for border-style hidden on table elements or something. Any ideas how to fix this without removing/changing the border-style value?

Calendar in IE8
Calendar in IE9+

This seems like a core bug because if you view the full calendar index page in IE8 the same issue is encountered.

Here is the core page.

http://fullcalendar.io/

If you view that in IE8 via modern.ie or whatever you will see what I mean.

I created a ticket/issue but really would like to fix this myself for a project I’m working on without resorting to graceful degradation… as an excuse. Although I will…

The version of jQuery being used seems to be v.3.0.0. I may be mistaken, but I seem to recall that jQuery 1.11.x was the last version to support IE8.

I’m not a JavaScript person, so you should verify my “recollection”. I could be very wrong.

I am moving this topic to the JS Category where you should receive more knowledgable JS guidance.

2 Likes

Good recall

If you need to support older browsers like Internet Explorer 6-8, Opera 12.1x or Safari 5.1+, use jQuery 1.12.

1 Like

This problem has nothing to do with JavaScript. It is caused by the border-style hidden value. I just don’t understand why it is happening because IE8 supports border-style hidden. If you look at the full calendar css file and search for border-style hidden you will see what I mean. Again… nothing to do with JavaScript.

I am away on holiday on a mac laptop so have no way to test but I assume you have tried explicitly setting the border-color of the cells to the colour you want rather than letting them take it from the default?

If that doesn’t work then I would consider using border-collapse: separate with border-spacing:0 and then only style the right and bottom borders of the cell.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
table {
	border-collapse:separate;
	border-spacing:0;
	width:500px;
	height:500px;
	border-top:1px solid red;
	border-left:1px solid red
}
td,th {
	border-right:1px solid red;
	border-bottom:1px solid red;
}
</style>
</head>

<body>
<table>
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Of course that may be a lot of work for a browser that is almost extinct now and if the only problem is the border then I wouldn’t worry about it too much.

There are various bugs in IE8 but generally you can play around with different scenarios (as above) and still get the general display you need. In the end it becomes a matter of trial and error. I have forgotten most of my IE8 hacks as I don’t support it these days so there may indeed be a better fix.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.