Question

I have some html with the basic structure

<nav>
     <div>
    <a href="">
        <div class="navlink" data-link="home">
            <span class="top"></span>
        </div>
    </a>
    <div id="index-03"></div>
    <a href="">
        <div class="navlink" data-link="resume">
            <span class="top"></span>
        </div>
    </a>
        ...
     </div>
</nav>

and CSS like this

a {
    color: #000;
}

div.navlink span {
    background: red;
}

nav {
    position: relative;
    margin: auto;
    width: 1000px;
    right: 35px;
    color: #fff;
}

nav span {
    margin:auto;
    text-align: center;
    position: absolute;
    width: 100%;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}

nav span.top {
    top: 45%;
    font-size: 24px;
    color: #fff;
    z-index: 50;
}

nav span.bottom {
    top: 41%;
    font-size: 16px;
    z-index: 50;
    color: #fff;
}

.navlink:hover {
    cursor: pointer;
    z-index: 50;


   color: #fff;
}

In every browser I can test but IE 6-8 the position and color for the .navlink span work but in IE it is applying the highest parent selector a {}. This does not make sense to me how do I make position and color apply to the span in all browsers including IE

Answer 1

As <nav> is an HTML5 element, IE6 to 8 doesn’t recognize it. Your styles won’t be applied to elements that it doesn’t recognize to be real DOM elements.

You need to inform IE of the presence of HTML5 elements using something such as the HTML5 shiv.

my only question is what happens in IE if JS is disabled then?

I think you’re pretty much screwed then.