Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › IE and table-cell and focus

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • January 21, 2016 at 7:05 am #237123
    Frank Schlueter
    Participant

    Hi! Can you help me please? Why does this css does not work in ie11? As you can see, hover works, focus doesn’t. I’m looking forward to here from you!

    Thank you very much!
    Regards Frank

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test</title>

<style type="text/css">

a, a:link, a:visited {
    display:table;
    color:black
    hight:40px;
    text-align:center;
    background-color:yellow;
}

ul{
    list-style: none;
}

li * {
    width:100px;
    height:100px;
    border: 1px solid black;
    vertical-align: middle;
}

span {
    display: table-cell;
}

a:hover{
    background-color:red;
}

a:focus{
    background-color:green;
}

</style>

</head>

<body>

<ul>
    <li><a class="d" href="#"><span>Eins</span></a></li>
    <li><a class="d" href="#"><span>Zwei</span></a></li>
    <li><a class="d" href="#"><span>Drei</span></a></li>
    <li><a class="d" href="#"><span>Vier</span></a></li>
    <li><a class="d" href="#"><span>Fünf</span></a></li>
</ul>

</body>

</html>
    January 21, 2016 at 8:56 am #237129
    bearhead
    Participant

    Try this:
    http://codepen.io/kvana/pen/yepqGz

    You don’t need the spans in the anchor elements… giving the spans display:table-cell seemed to be the root of the issue. I rewrote the css to work with the restructured html.

    January 21, 2016 at 9:45 am #237130
    Frank Schlueter
    Participant

    Very, very good! Thank you :-*

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.