• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dropdown funktioniert im Internet Explorer nicht!

I

_iChris_

Neues Mitglied
Hi,
Im Moment habe ich ein kleines Problem. Meine Seite funktioniert in GoogleChrome problemlos, jedoch klappen die Dropdowns nicht herunter. Auch nach langer Suche bin ich nicht darauf gekommen, was das Problem ist. Ich hoffe einer von euch kann mir Weiterhelfen!

Danke im Voraus!


Das ist das Script:

body{
margin: 7.2% auto;
padding:0px;
width:1126px;
}

#main{
background:gold;
height:1200px;
width:1126px;
}

.box1{
background:gainsboro;
height:250px;
width:100%;

}


/* CSS für das Menü */
.menu_container {
margin: 0 auto 26px auto;
position: relative;
width: 1126px;
height: 20px;
z-index: 100;

}
.menu, .menu ul {
padding: 0;
margin: 0;
list-style: none;
position: absolute;

}
.menu ul {
left: -9999px;
width: 125px;
padding: 0 20px 20px 20px;

}

.menu ul ul {
padding: 20px 20px 20px 0;

}

.menu a {
display: block;
width: 124px;
padding-left: 0px;
text-align: center;
font: normal bold 14px/40px arial, sans-serif;
color: #fff;
text-decoration: none;
margin: 0 -1px -1px 0;
background-color: #283daf;
color: white;
border-right: 1px solid grey;
border-left: 1px solid grey;

}
.menu li ul a {
font-weight: bold;
height:29px;
padding-top 0px;
border-bottom: 1px solid grey;
border-top: 1px solid grey;
border-right: 1px solid grey;
border-left: 1px solid grey;
background-color: white;
color: grey;







}
.menu li {
float: left;
border-right:1px


}

.menu li a {

}

.menu li:hover {
position: relative;
z-index: 100;


}
.menu li:hover > a {
background-color: #000080;
color: white;



}
.menu li:hover > ul {
top: 40px;
left: -20px;
z-index: -1;


}
.menu li:hover li:hover > a {
background-color:#e4e4e4;
color: #000080;
border: 2px solid grey;



}
.menu li:hover li:hover > ul {
left: 145px;
top: -20px;
z-index: 100;


}
.menu li.right:hover li:hover > ul {
left: -165px;
top: -20px;
z-index: 100;
padding: 20px 0 20px 20px;


}





.box3{
background:silver;
float:left;
padding:0px;
width:19%;
height:975px;
margin:5px;
}

.box4{
background:darkgray;
float:left;
margin:5px;
padding:0px;
}
 
Das ist das Script für den IE:

body{
text-align:center;
padding:0px;
width:1126px;
}

#main{
background:gold;
height:1200px;
width:1126px;
text-align:justify;
}

.box1{
background:gainsboro;
height:250px;
width:100%;

}


/* CSS für das Menü */
.menu_container {
margin: 0 auto 26px auto;
position: relative;
width: 1126px;
height: 20px;
z-index: 100;

}
.menu, .menu ul {
padding: 0;
margin: 0;
list-style: none;
position: absolute;

}
.menu ul {
left: -9999px;
width: 125px;
padding: 0 20px 20px 20px;

}

.menu ul ul {
padding: 20px 20px 20px 0;

}

.menu a {
display: block;
width: 124px;
padding-left: 0px;
text-align: center;
font: normal bold 14px/40px arial, sans-serif;
color: #fff;
text-decoration: none;
margin: 0 -1px -1px 0;
background-color: #283daf;
color: white;
border-right: 1px solid grey;
border-left: 1px solid grey;

}
.menu li ul a {
font-weight: bold;
height:29px;
padding-top 0px;
border-bottom: 1px solid grey;
border-top: 1px solid grey;
border-right: 1px solid grey;
border-left: 1px solid grey;
background-color: white;
color: grey;

}
.menu li {
float: left;
border-right:1px


}

.menu li a {

}

.menu li:hover {
position: relative;
z-index: 100;


}
.menu li:hover > a {
background-color: #000080;
color: white;



}
.menu li:hover > ul {
top: 40px;
left: -20px;
z-index: -1;


}
.menu li:hover li:hover > a {
background-color:#e4e4e4;
color: #000080;
border: 2px solid grey;



}
.menu li:hover li:hover > ul {
left: 145px;
top: -20px;
z-index: 100;


}
.menu li.right:hover li:hover > ul {
left: -165px;
top: -20px;
z-index: 100;
padding: 20px 0 20px 20px;


}





.box3{
background:silver;
float:left;
padding:0px;
width:19%;
height:975px;
margin:5px;
}

.box4{
background:darkgray;
float:left;
margin:5px;
padding:0px;
}
 
Und das ist das HTML:

<html>
<head>
<title>tsvhartberg.htm</title>
<link rel="stylesheet" href="standard.css" type="text/css" media="screen"></link>
<link rel="stylesheet" href="standard_mobile.css" media="handheld" />
<meta name="author" content="Christian">

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
<meta name="handheldfriendly" content="true" />
<link rel="apple-touch-icon" href="./image/apple.png" />


<!--[if IE]>
<link rel="stylesheet" href="standardIE.css" type="text/css">
<![endif]-->

</head>


<body bgcolor="#FFFFFF">


<div id="main" >
<div class="box1">box1</div>


<div class="menu_container">
<ul class="menu">
<li>
<a href="#nogo">Home</a>
<ul>
<li>
<a href="#">Vorwort</a>
</li>
<li>
<a href="#">Aktuelles</a>
</li>
</ul>
</li>
<li>
<a href="#nogo">Mannschaften</a>
<ul>
<li>
<a href="#">Herren</a>
</li>
<li>
<a href="#">Jugend</a>
</li>
<li>
<a href="#">Senioren</a>
</li>
</ul>
</li>
<li>
<a href="#nogo">Events</a>
<ul>
<li>
<a href="#">Turniere</a>
</li>
<li>
<a href="#">Meisterschaft</a>
</li>
<li>
<a href="#">Sonstiges</a>
</li>
</ul>
</li>
<li>
<a href="#nogo">Trainer</a>
<ul>
</ul>
</li>
<li>
<a href="#nogo">Verein</a>
<ul>
<li>
<a href="#">Vorstand</a>
</li>
<li>
<a href="#">Tennishalle</a>
</li>
<li>
<a href="#">Tennisplätze</a>
</li>
<li>
<a href="#">Buffet</a>
</li>
<li>
<a href="#">Chronik</a>
</li>
</ul>
</li>
<li>
<a href="#nogo">Galerie</a>
<ul>
</ul>
</li>
<li>
<a href="#nogo">Presse</a>
<ul>
</ul>
</li>
<li>
<a href="#nogo">Beitritt</a>
<ul>
<li>
<a href="#">Preise</a>
</li>
<li>
<a href="#">Kontakt</a>
</li>
</ul>
</li>
<li>
<a href="#nogo">Impressum</a>
<ul>
</ul>
</li>
</ul>
</div>



<div class="box3">box3</div>
<div class="box4">box4</div>
</div>


</body>
</html>
 
Was machst du denn?
Dein Head im Html ist doppelt, dass kann ja nicht funktionieren.
Du brauchst kein extra CSS für den Internet-Explorer.

Nimm die erste CSS-Datei, die funktioniert in allen Browsern auch IE7 und grösser.

Und hier ist das HTML, fasse alles bis zum Ende des </head> Tags nicht mehr an.

Schaue dir unbedingt Tutorials an zu HTML und CSS.

HTML: 
<!DOCTYPE HTML>
<html>                        
    <head>                                            
        <meta charset=utf-8>         
        <title>TSV Hartenberg
        </title>
        <link rel="stylesheet" href="standard.css" type="text/css" media="screen">
        <link rel="stylesheet" href="standard_mobile.css" media="handheld">
        <meta name="author" content="Christian">
    </head>
    <body>
        <div id="main" >
            <div class="box1">box1
            </div>
            <div class="menu_container">
                <ul class="menu">
                    <li>
                    <a href="#nogo">Home</a>
                    <ul>
                        <li>
                        <a href="#">Vorwort</a>
                        </li>
                        <li>
                        <a href="#">Aktuelles</a>
                        </li>
                    </ul>
                    </li>
                    <li>
                    <a href="#nogo">Mannschaften</a>
                    <ul>
                        <li>
                        <a href="#">Herren</a>
                        </li>
                        <li>
                        <a href="#">Jugend</a>
                        </li>
                        <li>
                        <a href="#">Senioren</a>
                        </li>
                    </ul>
                    </li>
                    <li>
                    <a href="#nogo">Events</a>
                    <ul>
                        <li>
                        <a href="#">Turniere</a>
                        </li>
                        <li>
                        <a href="#">Meisterschaft</a>
                        </li>
                        <li>
                        <a href="#">Sonstiges</a>
                        </li>
                    </ul>
                    </li>
                    <li>
                    <a href="#nogo">Trainer</a>
                    <ul>
                    </ul>
                    </li>
                    <li>
                    <a href="#nogo">Verein</a>
                    <ul>
                        <li>
                        <a href="#">Vorstand</a>
                        </li>
                        <li>
                        <a href="#">Tennishalle</a>
                        </li>
                        <li>
                        <a href="#">Tennisplätze</a>
                        </li>
                        <li>
                        <a href="#">Buffet</a>
                        </li>
                        <li>
                        <a href="#">Chronik</a>
                        </li>
                    </ul>
                    </li>
                    <li>
                    <a href="#nogo">Galerie</a>
                    <ul>
                    </ul>
                    </li>
                    <li>
                    <a href="#nogo">Presse</a>
                    <ul>
                    </ul>
                    </li>
                    <li>
                    <a href="#nogo">Beitritt</a>
                    <ul>
                        <li>
                        <a href="#">Preise</a>
                        </li>
                        <li>
                        <a href="#">Kontakt</a>
                        </li>
                    </ul>
                    </li>
                    <li>
                    <a href="#nogo">Impressum</a>
                    <ul>
                    </ul>
                    </li>
                </ul>
            </div>
            <div class="box3">box3
            </div>
            <div class="box4">box4
            </div>
        </div>
    </body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben