CODEWITHSUNDEEP
cssinternet-explorer-7
user2159021
user2159021

Reputation: 1

CSS drop down menu not working on IE7

Every1,

I am building a website for an organization that still only uses IE7. When creating this drop down menu on my laptop, the menu works without a problem. However, when trying it for the first time on a IE7 browser, it does not work.

<!doctype html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./menu.css">
    <link rel="stylesheet" type="text/css" href="./styles.css">
    <title>Title</title>
</head>
<body>
    <header>
        <div id="logo">
            <img src="Crest.png">
        </div>
        <p id="name">Somename</p>
        <p id="motto">MyMotto</p>
    </header>

    <nav id="navigation">
        <ul>
            <li id="menu"><a href="#">Home</a></li>
            <li id="menu"><a href="#">Pubs</a>
                <ul id="subMenu">
                    <li><a href="#">Book 1</a></li>
                    <li><a href="#">Book 2</a></li>
                </ul>
            </li>
            <li id="menu"><a href="#">Links to Website</a>
                <ul id="subMenu">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                </ul>
            </li>
            <li id="menu"><a href="#">Departments</a></li>
            <li id="menu"><a href="#">References</a>
                <ul id="subMenu">
                    <li><a href="#">Ref 1</a></li>
                    <li><a href="#">Ref 2</a></li>
                </ul>
            </li>
            <li id="menu"><a href="#">Links</a>
                <ul id="subMenu">
                    <li><a href="#">More 1</a></li>
                    <li><a href="#">More 2</a></li>
                </ul>
            </li>
            <li id="menu"><a href="#">Forms</a>
                <ul id="subMenu">
                    <li><a href="#">Form 1</a></li>
                    <li><a href="#">Form 2</a></li>
                </ul>
            </li>
            <li id="menu"><a href="#">Orders</a></li>
            <li id="menu"><a href="#">Status</a></li>
        </ul>
    </nav>
</body>

Code for the menu.css

/* #navigation */
ul { 
    list-style:none;
    padding:0px;     
    margin:0px;
}

ul#subMenu a:hover { color: #FF0; font-weight: bold;}

#navigation { 
    margin-top: 20px;
    float: left;
}

#navigation ul, #navigation li {
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: inline;
    background-color: #30C;
    /* box-shadow: #111 3px 3px 4px; */
}

li#menu { box-shadow: #111 3px 3px 4px; }
ul#subMenu { box-shadow: #111 3px 3px 4px; }

#navigation ul li {
    float: left; 
    position: relative;
}

#navigation ul li a {
    display: block;
    padding: 3px 20px;
    margin: 1px;
    font-size: 12px;
    white-space: nowrap;
    color: #FFF;
    text-decoration: none;
    font-size: 16px;
}

#navigation ul ul {
    position: absolute;
    top: -99999px;  /* Remove them out of viewport */
    left: 0;        
    opacity: 0;     /* Hide sub level, we will use this in transition */
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
        transition: opacity .4s ease-in-out;
    z-index: 497;
    background: #30C;
    padding: 2px;
    border: 1px solid #444;
    border-top: none;
    box-shadow: #111 0 3px 4px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

#navigation ul ul ul {
    position: absolute;
    top: -99999px;
    left: 100%;
    border-radius: 6px;
    border: 1px solid #444;
    background-color: #FFF;
}

#navigation ul li:hover>ul {
    opacity: 1;
    position: absolute;
    top: 99%;
    left: 0;
}

#navigation ul ul li:hover>ul {
    opacity: 1;
    position: absolute;
    top: 0%;
    left: 100%;
}

Code for the styles.css

body {
    width: 900px;
    margin: 0 auto;
    padding: 0;
    background-color: #006;
}

@font-face {
    font-family: Cowboys;
    src: url('Bleeding_Cowboys.ttf');
}

#logo {
    margin-top: 20px;
    padding: 0;
    float: left;
}

#name {
    float: left;
    font-size: 85px;
    margin: 0;
    margin-top: 20px;
    padding: 0;
    color: #FC0;
    font-family: Cowboys;
    position: relative;
    left: 40px;
}

#motto {
    float: left;
    font-size: 25px;
    margin: 0;
    padding: 0;
    position: relative;
    left: -460px;
    top: 160px;
    color: #FC0;
    font-family: Cowboys;
    font-style: italic;
}

The above code on IE7 does not even display the properties of a horizontal menu, instead it show it as vertical menu displaying all sub-menus and the font-face above also does not work.

What am I doing wrong?

Thanks.

Upvotes: 0

Views: 2024

Answers (3)

Scott
Scott

Reputation: 21882

Others have pointed out the <nav> tag not being supported in IE7. However, issues go beyond that. IE7 does not support HTML5 and your page is entirely HTML5 - the Doctype is inappropriate, the header tag is not supported, the nav tag is not supported.

There are javascript lubraries you can include to help push older browser into understanding HTML5.

In addition, some pre-constructed frameworks, such as HTML5 Boilerplate may help support older browsers as well.

If you are constructing primarily for IE7 you may want to stick to xHTML or HTML4 and CSS2.

Upvotes: 1

Atif Azad
Atif Azad

Reputation: 527

nav doesnt work for ie7 and below use 

<!DOCTYPE html>

at the top of your header area

Upvotes: 0

albert
albert

Reputation: 8153

ie7 doesn't know what nav is....you should use html5shiv.js to include it in the document, then add nav{display:block} for starters

Upvotes: 0

Related Questions