Borewa: Element position: Absolute abgeschnitten im IE

Hallo Zusammen,

ich habe einen Header mit der Position fixed, damit dieser beim scrollen immer sichtbar ist. Nun befindet sich im Header aber auch eine Navigation zum Sprachenwechseln. Das Menü, welches bei Hover aufklappt hat die Position absolute und wird leider im IE 7 und 8 (8 ist wichtiger) abgeschnitten, da der Header ein oberflow: hidden besitzt.

Dieses Menü müsste sich über den Header legen, so wie es in den anderen Browsern der fall ist. Ein ändern auf overflow: auto würde mir zwar die Möglichkeit geben das Menü zu benutzen, da aber der Header eine feste Höhe hat, müsste ich innerhalb diesem scrollen und das sieht nicht nur unschön aus, sondern ist auch nicht gerade benutzerfreundlich.

Leider bin ich was dieses Problem angeht, gerade wohl etwas blind und brauche mal einen externen Blick darauf.

Anbei der HTML/PHP Code (PHP nur, weil die Sprachen sich über eine Variable steuern lassen) und der CSS Code. Alles natürlich stark gekürzt, aber das sollte mehr als nur reichen, dass das Problem ersichtlich ist

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="de" dir="ltr"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="de" dir="ltr"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="de" dir="ltr"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 oldie" lang="de" dir="ltr"> <![endif]-->
<!--[if IE 10]>    <html class="no-js ie10 oldie" lang="de" dir="ltr"> <![endif]-->
<!--[if IE 11]>    <html class="no-js ie11 oldie" lang="de" dir="ltr"> <![endif]-->
<!--[if gt IE 11]><!--> <html class="no-js" lang="de" dir="ltr"> <!--<![endif]-->
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" media="all" href="../css/style.css" />
	<script type="text/javascript" src="../scripte/scripte.js"></script>
</head>

<body class="ltr">
<div id="wrapper" class="cf">
<header class="seitenheader cf">
    <a href="# " title="Startseite"><img src="#" id="logo-pferd" width="81" height="72" alt="Logo"></a>
    <div id ="weltkarte-header"><img src="#" width="256" height="98" alt="Weltkarte"></div>
    <a href="#" title="Impressum" target="_blank" id="impressum">Impressum</a>

	<?php
$sprachen = array (
    "ar" => 1,
    "bs" => 1,
    "zh" => 1,
    "da" => 1,
    "de" => 1,
    "en" => 1,
    "fa" => 1,
    "fi" => 1,
    "fr" => 1,
    "el" => 1,
    "is" => 1,
    "it" => 1,
    "ja" => 1,
    "ko" => 1,
    "nl" => 1,
    "no" => 1,
    "pl" => 1,
    "pt" => 1,
    "ro" => 1,
    "ru" => 1,
    "sv" => 1,
    "sl" => 1,
    "es" => 1,
    "cs" => 1,
    "tr" => 1,
    "hu" => 1
                  );

?>
<nav id="languageSwitcher">
<ul>
    <li>
        <span class="current">
                <i class="flagg de"></i>Deutsch
            <i class="fa fa-caret-down"></i>
        </span>
        <ul class="dropdown"><!--
            <?php
            if( $sprachen['bs'] )
                echo '--><li><a href=""><i class="flagg bs"></i>Bosanski</a></li><!--';
            if( $sprachen['cs'] )
                echo '--><li><a href=""><i class="flagg cs"></i>Česky</a></li><!--';
            if( $sprachen['da'] )
                echo '--><li><a href=""><i class="flagg da"></i>Dansk</a></li><!--';
            if( $sprachen['en'] )
                echo '--><li><a href="../en/index.php"><i class="flagg en"></i>English</a></li><!--';
            if( $sprachen['es'] )
                echo '--><li><a href=""><i class="flagg es"></i>Español</a></li><!--';
            if( $sprachen['el'] )
                echo '--><li><a href=""><i class="flagg el"></i>Ελληνικά</a></li><!--';
            if( $sprachen['fr'] )
                echo '--><li><a href=""><i class="flagg fr"></i>Français</a></li><!--';
            if( $sprachen['is'] )
                echo '--><li><a href=""><i class="flagg is"></i>Íslenska</a></li><!--';
            if( $sprachen['it'] )
                echo '--><li><a href=""><i class="flagg it"></i>Italiano</a></li><!--';
            if( $sprachen['hu'] )
                echo '--><li><a href=""><i class="flagg hu"></i>Magyar</a></li><!--';
            if( $sprachen['nl'] )
                echo '--><li><a href=""><i class="flagg nl"></i>Nederlands</a></li><!--';
            if( $sprachen['no'] )
                echo '--><li><a href=""><i class="flagg no"></i>Norsk</a></li><!--';
            if( $sprachen['pl'] )
                echo '--><li><a href=""><i class="flagg pl"></i>Polski</a></li><!--';
            if( $sprachen['pt'] )
                echo '--><li><a href=""><i class="flagg pt"></i>Português</a></li><!--';
            if( $sprachen['ro'] )
                echo '--><li><a href=""><i class="flagg ro"></i>Română</a></li><!--';
            if( $sprachen['ru'] )
                echo '--><li><a href=""><i class="flagg ru"></i>Pу́сский язы́к</a></li><!--';
            if( $sprachen['sl'] )
                echo '--><li><a href=""><i class="flagg sl"></i>Slovenčina</a></li><!--';
            if( $sprachen['sv'] )
                echo '--><li><a href=""><i class="flagg sv"></i>Svenska</a></li><!--';
            if( $sprachen['fi'] )
                echo '--><li><a href=""><i class="flagg fi"></i>Suomi</a></li><!--';
            if( $sprachen['tr'] )
                echo '--><li><a href=""><i class="flagg tr"></i>Türkçe</a></li><!--';
            if( $sprachen['ja'] )
                echo '--><li><a href=""><i class="flagg ja"></i>日本語</a></li><!--';
            if( $sprachen['ko'] )
                echo '--><li><a href=""><i class="flagg ko"></i>한국의</a></li><!--';
            if( $sprachen['zh'] )
                echo '--><li><a href=""><i class="flagg zh"></i>中文</a></li><!--';
            if( $sprachen['fa'] )
                echo '--><li><a href=""><i class="flagg fa"></i>فارسی</a></li><!--';
            if( $sprachen['ar'] )
                echo '--><li><a href="../ar/index.php"><i class="flagg ar"></i>العربية </a></li><!--';
            ?>
        -->
        </ul>
    </li>
</ul>
</nav>
    </header>
</div>
</body>
</html>
@charset "utf-8";
/* CSS RESET Anfang */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: Arial,Helvetica,Verdana,SansSerif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }

/* CSS Reset Ende */


/**
*    Clear Fix
*    Container umschließt seine Kinder nicht
**/
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}body {
    margin: 0 auto;
    background: #fff;
    font-family: 'Helvetica Neue', Helvetica, Arial, Arial Unicode MS, sans-serif;
    color: #363636;
    font-size: 1em;
    font-size: 1rem;
}

h1 {
    font-size: 2em;
    font-size: 2rem;
    margin: .67em 0;
    margin: .67rem 0;
}

h2 {
    font-size: 1.5em;
    font-size: 1.5rem;
    margin: .75em 0;
    margin: .75rem 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bolder;
    color: #006cc0;
}

#languageSwitcher, #languageSwitcher * {
    padding: 0;
    outline: none;
}
#languageSwitcher ul {
    list-style: none;
}
#languageSwitcher {
    font-size: .75em;
    font-size: .75rem;
    color: #444;
    line-height: normal;
    right: 0;
    left: auto;
    z-index: 2;
    margin: 10px 5px auto auto;
    position: absolute;
}

#languageSwitcher span.current {
    cursor: pointer;
}

#languageSwitcher ul li ul.dropdown {
    left: -9999em;
    z-index:10;
}

#languageSwitcher ul li:hover ul ,
#languageSwitcher ul li:active ul ,
#languageSwitcher ul li:focus ul {
    left: auto;
}

#languageSwitcher span.current,
#languageSwitcher a {
    text-decoration: none;
    padding: 0.5em 6px 0.5em 28px; /* 6px 6px 6px 28px */
    color: #444;
    width: 8em;
}

#languageSwitcher a {
    display: inline-block;
}

#languageSwitcher a:hover {
    color: #000;
}
#languageSwitcher span.current {
    position: relative; /* sets the initial position for the trigger arrow */
    background-color: #FFF;
    border: 1px solid #E5E5E5;
    border-radius: 3px;
    height: 1.25em; /* 15px */
}

#languageSwitcher span.current i {
    margin: auto auto auto 6px;
}

#languageSwitcher span.current:hover,
#languageSwitcher ul.dropdown li:hover {
    background-color: #F7F7F7;
}
#languageSwitcher span.active,
#languageSwitcher a.active { /* This style is applied as long as the drop-down menu is visible. */
    border-bottom: none !important;
    border-radius: 3px 3px 0 0 !important;
}
/**
*    Liste Dropdown
*/
#languageSwitcher ul.dropdown {
    position: absolute;
    top: 2.333em; /* 28px */
    top: 1.7em;
    right: 0; /*right wenn es nach rechts aufklappen soll*/
    background-color: #FFF;
    border: 1px solid #E5E5E5;
    border-top: none !important;
    border-radius: 0 0 3px 3px;
    width: 30em;
}

#languageSwitcher ul.dropdown li {
    border-top: 1px dotted #D4D4D4;
    width: 9.9em;
    /*float: left;*/
    display: inline-block;
    position: relative;
    height: 2.25em;
}

#languageSwitcher ul.dropdown li a{
    width: 9.9em;
    height: 1.25em; /* 15px */
}
#languageSwitcher ul.dropdown li:last-child {
    border-radius: 0 0 3px 3px;
}
/* Flags */
#languageSwitcher span.current i.flagg,
#languageSwitcher ul.dropdown li a i.flagg{
    background-repeat: no-repeat;
    left: 6px;
    position: absolute;
    width: 16px;
    height: 11px;
    margin: 1px 0;
    background-image: url('#');
}

#wrapper {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 1024px;
    margin: auto;
}

header.seitenheader {
    width: 100%;
    position: fixed;
    top: 0;
    background: #006cc0; /* Old browsers */
    max-height: 98px;
    max-width: 1024px;
    z-index: 100;
}

header.seitenheader a#impressum {
    z-index: 2;
    right: 9em;
    right: 9rem;
    position: absolute;
    font-size: .75em;
    font-size: .75rem;
    color: white;
    line-height: normal;
    margin: .78em .3em 0 0;
}

header.seitenheader  #logo-pferd{
    float: left;
    width: 12.6565%;
    max-width: 81px;
    min-width: 45.36734693877551px;
    max-height: 72px;
    margin: 1.5% auto auto 13px;
}

header.seitenheader  #weltkarte-header {
    max-height: 98px;
    float: right;
    width: 40%;
    max-width: 256px;
    min-width: 101.8775510204082px;
}

.rtl header.seitenheader  #weltkarte-header {
    float: left;
}

header.seitenheader  #weltkarte-header img{
    width: 100%;
    max-width: 100%;
    height: auto;
}

#content {
    width: 100%;
    height: auto;
    background: #153556;
    position: absolute;
    overflow: auto;
    color: white;
    padding: 98px 0 0 0;
}

Mit freundlichen Grüßen

Borewa

    1. Es werden nur sehrsehr wenige Menschen Lust haben, den Code herauszukopieren (schon gar nicht mit PHP-vermischt). Deshalb: rein in dabblet, Link posten, dann purzeln die hilfreichen Antworten nur so heraus.

      Vielen Dank für den Tipps, aber ich glaube nicht das es hilft, da ich die Seite mit dem IE 8 nicht wirklich nutzen kann und dann kann mir damit wohl keiner helfen.

      Dafür habe ich das aber alles nochmal "normal" auf einen Test Webserver gestellt:

      http://bugzilla.borewa.de/de/

      Ich hoffe so ist es einfacher und übersichtlicher.

      P.s.: Bilder usw sind nicht vorhanden, spielt aber auch keine Rolle, das Problem ist auch so ersichtlich.