Ergebnis 1 bis 4 von 4

Thema: Problem mit absoluter Positionoerung im IE

  1. #1
    HTML Newbie
    Registriert seit
    16.06.2013
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Problem mit absoluter Positionoerung im IE

    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: ie_position.jpg

    Die Navipunkte sind um 5px nach oben verschoben.

    HTML-Code:
    <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 -->
    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;
    }
    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!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Problem mit absoluter Positionoerung im IE

    hast du schomma die schatten-filter für den ie weg gelassen und das ganze getestet??
    die dinger machen oft probleme (hab deinen code bisher nicht analysiert) und sind das erste, was mir hier ins gesicht springt
    fast alle filter von microschrott machen irgendwelche side-effects, die kei sau braucht

    und nen link zur problemseite ist immer besser, als nur code
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    16.06.2013
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit absoluter Positionoerung im IE

    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)

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Problem mit absoluter Positionoerung im IE

    hab ich mir fast gedacht
    und es gibt viele freehoster woman seine page kurzfristig hochwerfen kann...
    zb bplaced oder ohost
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Formmailer in Webseiten Template einbauen (absoluter Neuling)
    Von Skydyver im Forum HTML & CSS Forum
    Antworten: 14
    Letzter Beitrag: 28.01.2013, 08:44
  2. Absoluter Neuling
    Von menkee im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 18.12.2009, 10:22
  3. absoluter n00b braucht hilfe!!
    Von goku21 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 06.11.2007, 15:43
  4. htaccess absoluter Pfad
    Von OliverN26 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 01.08.2007, 23:49

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •