Borders won't show in Internet Explorer

Question

I don't know why but the borders won't show in IE 8-9, I haven't got around to checking 10 and upwards. Also the css :hover effect doesn't work neither does the modal pop-up. I don't know if there is a work around for IE?

It works perfectly in FF and chrome

FIDDLE

HTML:

<div class="tree">
    <ul>
        <li>
            <a href="chairman"><span class="accent">Chairman / Owner</span><p>Name</p></a>



            <ul>
                <li>
                    <a href="financemanager"><span class="accent">Finance &<br>
                    Managing Director</span><span>Name</span></a>

                    <ul>
                        <li><a href="financeteam"><span class="accent">Finance
                        Team</span> <span>Name</span><br></a></li>

                        <li><a href="salesdirector"><span class="accent">Sales
                        Director</span><span>Name</span></a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS:

body {
    width:100%;
}

* {margin: 0; padding: 0;}

ul {
    line-height:20px;
}

.tree ul {
    padding-top: 20px; position: relative;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 1px solid #ccc;
    width: 50%; height: 20px;
}
.tree li::after{
    right: auto; left: 50%;
    border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
    display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
    border: 0 none;
}

/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before{
    border-right: 1px solid #ccc;
    border-radius: 0 0px 0 0;
    -webkit-border-radius: 0 0px 0 0;
    -moz-border-radius: 0 0px 0 0;
}

.tree li:first-child::after{
    border-radius: 0px 0 0 0;
    -webkit-border-radius: 0px 0 0 0;
    -moz-border-radius: 0px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 1px solid #ccc;
    width: 0; height: 20px;
}

.tree li a{
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 13px;
    display: inline-block;

    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
    background: #E9E9E9; color: black; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
    border-color:#06C;
}

span.accent{
    background-color: #113963;
    display: block;
    margin: -5px -10px 5px;
    padding: 5px;
    color: white;
    font-weight:bold;
}

Modal CSS:

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 5px;
    background: #F4F4F4;    
}

.close {

    background: #FF2E28;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

.close:hover {
    background: #600;
}

.modalDialog + image {
    border:solid 1px black;
}

Answer 1

According to MDN, Internet Explorer < 9 doesn't support the CSS3 ::before pseudo. If you want to support 8, you'll have to use the CSS2 :before pseudo. This would solve the border problem.

The hover problem might be related to declaring the right doctype, as discussed in the comments.

The problem with the modal is that in IE, it is actually in front of the other elements, just invisible. You'll have to set display: none and then place it when it is actually shown:

.modalDialog {
    display: none;
}

.modalDialog:target {
    display: block;
}

The reason for this is that the pointer-events css attribute isn't supported in IE (or at least not before 11). Sadly, completing your modal popup in IE8 using only css will be hard, because the :target pseudo isn't supported in that version.

Fiddle with every edit made in this answer: http://jsfiddle.net/V8H6T/12/.

Answer 2

Lol, looked into this alot scratching my head. Turns out the answer is simple,

You are using two colons instead of one:

ul::before

should be

ul:before

Although there are still some styling errors with this so you will need to fix those. But atleast the borders show up now, right? :P