CODEWITHSUNDEEP
htmlcssinternet-explorer
marco
marco

Reputation: 1752

HTML/CSS menu not working on IE

I'm working on a website and I was happy that all was looking good on Chrome, Firefox and Safari. Then it came it suddenly in my mind, I started sweating, the heart started beating fast.. oh God, I have to test it on IE! And, of course, it doesn't work :)

So, I have a menu that looks like this:

enter image description here

and is created in this way:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <title>Test &#8482;</title>

        <link href="styles/small.css" media="(max-width: 1000px)" rel="stylesheet" type="text/css" />
        <link href="styles/large.css" media="(min-width: 1000px)" rel="stylesheet" type="text/css" />

        <link rel="shortcut icon" href="images/test_logo.ico" type="image/x-icon" />
        <link rel="icon" href="images/test_logo.ico" type="image/ico" />
    </head>

    <body onload="setup()">
        <div id="menuContainer">
            <div id="menu">
                <img id="testLogo" alt="menu" src="images/test_write_black.png"/>

                <ul id="navimenu">
                    <li><a class="menuItem" id="homeMenuId"    onclick="homeClicked()"      >Home</a></li>
                    <li><a class="menuItem" id="supportMenuId" onclick="supportClicked()"   >Support</a></li>
                    <li><a class="menuItem" id="contribMenuId" onclick="contributeClicked()">Contribute</a></li>

                    <li><a id="languageText" href="#openModal">English</a></li>
                </ul>
            </div>

            <div id="openModal" class="modalDialog">
                <div>
                    <a href="#close" class="close"><img id="imageClose" alt="delete" src="images/logo_delete_on.png"/></a>

                    <button class="language-selection" onclick="onChangeLanguageFunction('en')">English</button>
                    <button class="language-selection" onclick="onChangeLanguageFunction('it')">Italiano</button>
                    <button class="language-selection" onclick="onChangeLanguageFunction('de')">Deutsch</button>
                </div>
            </div>
        </div>
    ...

CSS:

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

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

.modalDialog > div
{
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 25px 20px 13px 20px;
    border-radius: 10px;
    border: solid 2px #be6500;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

.close
{
    background: Transparent;
    position: absolute;
    right: -30px;
    top: -50px;
}

so when I click the "language menu item" on the right, the modaDialog shows up and I can choose the language.

On IE (tried 7/8/9/10) all is displayed correctly, but there's no hover (not a big problem), no "finger mouse pointer" and no click functionality on the menu items. But there are 3 "finger mouse pointers" circa 100px under the menu that change the language when clicked.

What could be the problem ? is there a tool to check what is wrong ? I have already validated the site and got 0 errors.

EDIT: following the CSS of the menu:

#menu
{
    height: 64px;
    text-align: center;
    vertical-align:  middle;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 20px;
    text-shadow: 3px 2px 3px #333333;
    background-color: #DDDDDD;
    border-radius: 8px;
    border: solid 2px #555555;
}

#menu ul
{
    height: auto;
    padding: 20px 0px;
    margin: 0px;
}

#menu li
{
    display: inline;
    padding: 20px;
}

.menuItem
{
    color: #0000DD;
    text-decoration: none;
    padding: 8px 8px 8px 8px;
    cursor: pointer;
}

.menuItem:hover
{
    color: #7777FF;
    font-weight: 2000;
    text-shadow: 3px 2px 10px #0000ff;
}

Upvotes: 1

Views: 176

Answers (2)

Rotan075
Rotan075

Reputation: 2615

The point is that animating opacity in IE10 is not always very solid. It does not do anything and instead of animating opacity, you should animate visibility:

.modalDialog
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear; /* animation on visibility */
}

.modalDialog:target
{
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}

JSFIDDLE

Upvotes: 1

marco
marco

Reputation: 1752

Ok, solved. I write it as an answer because I solved the problem but I'd like someone to explain me WHY as I don't know. In other words: this answer is only a hint to get to the right and acceptable answer.

For some unknown reason, IE doesn't like (or I don't know how he wants it) the href="#id". I had to substitute all the href with onclick.

So the menu is now like this:

<div id="menuContainer">
    <div id="menu">
        <img id="testLogo" alt="logo" src="images/test_write_black.png">

        <ul id="navimenu">
            <li class="menuItem"> <span id="homeMenuId"     onclick="homeClicked()"      >__HomeMenu__      </span></li>
            <li class="menuItem"> <span id="supportMenuId"  onclick="supportClicked()"   >__SupportMenu__   </span></li>
            <li class="menuItem"> <span id="contribMenuId"  onclick="contributeClicked()">__ContributeMenu__</span></li>
            <li id="languageText"><span id="languageMenuId" onclick="showLanguageMenu();">__language__      </span></li>
        </ul>
    </div>
</div>

<div id="openModal" class="modalDialog">
    <div>
        <span class="close" onclick="hideLanguageMenu();"><img id="imageClose" alt="close" src="images/logo_delete_on.png"></span>

        <button class="languageSelection" onclick="onChangeLanguageFunction('en')">English </button>
        <button class="languageSelection" onclick="onChangeLanguageFunction('it')">Italiano</button>
        <button class="languageSelection" onclick="onChangeLanguageFunction('de')">Deutsch </button>
    </div>
</div>

modified the CSS file and added a:

#openModal
{
    display: none;
}

and added 2 js functions:

function showLanguageMenu()
{
    var langMenu = document.getElementById("openModal");
    langMenu.style.display = "block";
    langMenu.style.opacity = "1";
    langMenu.style.pointerEvents = "auto";
}

function hideLanguageMenu()
{
    var langMenu = document.getElementById("openModal");
    langMenu.style.display = "none";
    langMenu.style.opacity = "0";
    langMenu.style.pointerEvents = "none";
}

Works on IE and, of course, on Firefox and Chrome (still have to test on Safari).

But I've lost the nice fading effect and this is not good as it was really cute.

Upvotes: 0

Related Questions