Beiträge von Airlebnis

Airlebnis

Hallo!

Danke für deine Antwort...es lag tatsächlich an dem IE-Filter in der UL

Naja die Seite läuft derzeit nur offline!(localhost)

Airlebnis

Hallo Leute!

ich setze gerade einen Entwurf um, der eine Dropdown-Navi enthält und habe ein paar Probleme mit dem IE (was sonst ;))

Hier ein Screenshot zur besseren veranschaulichung:

Die Navipunkte sind um 5px nach oben verschoben.

HTML

<ul id="navigation">
            <li class="active"><a href="#">Zieloptiken</a></li>
            <li><a href="#">Montagen</a>
                <div>
                    <ul>
                        <li><h4><a href="#">Kategorie</a></h4></li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 1</a></li>
                    </ul>
                    <ul>
                        <li><h4><a href="#">Kategorie</a></h4></li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 1</a></li>
                    </ul>
                    <ul>
                        <li><h4><a href="#">Kategorie</a></h4></li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 1</a></li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </li>
            <li><a href="#">Optiken</a></li>
            <li><a href="#">Ausrüstung</a></li>
            <li><a href="#">Sonstiges</a></li>
            <li><a href="#" class="deals">Schnäppchen</a></li>
            <li><a href="#" class="novelties">Neuheiten</a></li>
            <div class="clear"></div>
        </ul><!-- Navigation End -->

Alles anzeigen

Und das CSS:

Code

ul#navigation {
    margin: 0 auto;
    margin-bottom: 10px;
    padding: 0 40px;
    list-style-type: none;
    width: 960px;/*1040*/
    background-color: #fff;
    -moz-box-shadow: 0 0 4px 2px #929292;
    -webkit-box-shadow: 0 0 4px 2px #929292;
    box-shadow: 0 0 4px 2px #929292;
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#a1a1a1', Direction=0, Strength=4)
    progid:DXImageTransform.Microsoft.Shadow(color='#a1a1a1', Direction=45, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#a1a1a1', Direction=90, Strength=4)
    progid:DXImageTransform.Microsoft.Shadow(color='#a1a1a1', Direction=135, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#a1a1a1', Direction=180, Strength=4)
    progid:DXImageTransform.Microsoft.Shadow(color='#a1a1a1', Direction=225, Strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color='#a1a1a1', Direction=260, Strength=4)
    progid:DXImageTransform.Microsoft.Shadow(color='#a1a1a1', Direction=305, Strength=3);
}
ul#navigation li {
    float: left;
    position: relative;
    z-index: 10;
    margin-right: 20px;
}
ul#navigation li a {
    padding: 0 10px;
    display: block;
    font-weight: bold;
    font-size: 1.25em;/*15*/
    line-height: 35px;/*35*/
    text-align: left;
    color: #3c3c3c;
    background: yellow;
}
ul#navigation li a:hover, ul#navigation li.active a {
    color: #fff;
    background: #f38417; /* Old browsers */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzODQxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzRkMDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #f38417 0%, #e15e24 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f38417), color-stop(100%,#e15e24)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f38417 0%,#e15e24 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f38417 0%,#e15e24 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f38417 0%,#e15e24 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f38417 0%,#e15e24 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f38417', endColorstr='#e15e24',GradientType=0 ); /* IE7-8 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f38417', endColorstr='#e15e24'); /* IE6 */
}
ul#navigation li:hover {
    z-index: 20;
}
ul#navigation li > div {
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 10;
    padding: 10px 0;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-top: none;
    opacity: 0.97;
    -moz-opacity: 0.97;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97)";
    filter:alpha(opacity=97);
}
ul#navigation li:hover > div {
    display: block;
}
ul#navigation li ul {
    margin: 0;
    padding: 0 10px;
    width: 199px;/*220*/
    list-style-type: none;
    border-right: 1px solid #f0f0f0;
    float: left;
}
ul#navigation li ul li {
    float: none;
    margin: 0;
    padding: 0;
}

Alles anzeigen

Ich habe schon die top-Angabe auf 5px gestellt, wodurch die li's dann wenigstens innerhalb des ul's angezeigt werden aber wegen der relative-Angabe bleibt der Platzhalter-Abstand nach oben ja immer noch...

Hat jemand einen Rat wie ich das lösen kann?

Einen schönen Sonntag!

Beiträge von Airlebnis

Problem mit absoluter Positionoerung im IE

Problem mit absoluter Positionoerung im IE