Anzeige

Ausrichtung von Listengrafik - Problem im IE

Ausrichtung von Listengrafik - Problem im IE | PSD-Tutorials.de

Erstellt von Ironbird, 13.10.2008.

  1. Ironbird

    Ironbird Nicht mehr ganz neu hier

    Dabei seit:
    22.08.2007
    Beiträge:
    231
    Geschlecht:
    männlich
    Ort:
    München
    Software:
    Photoshop CC + Lightroom CC
    Kameratyp:
    NIKON D810
    Ausrichtung von Listengrafik - Problem im IE
    Hallo,

    habe mal wieder ärger mit dem Internet Explorer.

    Ich möchte eine Navigationsleiste Programmieren. Ich möchte auf die Listen-Typen verzichten, da ich eigene Listenpunkt-Bilder erstellt habe.

    Schon bei unformatierter Ausrichtung sieht man, dass sich das eingefügte Bilt im IE ein Pixel höher angeordnet wird wie es eigentlich sollte. Aber so Eng wollt ich ja eh die Navigationsounkte nicht haben.

    Also habe ich dem <li>-Attribut den Padding-Befehl nach oben und unten 10 Pixel anzuwenden, damit das ganze ein wenig luftiger wird.
    Im Firefox klappt das einwandfrei, aber der IE setzt nun meine Grafik noch höher an.

    Hier könnt ihr mal das ansehen:

    [​IMG]

    Und hier ist der Code:


    CSS:

    #sidebar1 ul {
    font-size: 12px;
    list-style-type: none;
    }

    #sidebar1 li {
    list-style-image: url(../pics/button-inactive.gif);
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
    }


    XHTML:

    <div id="sidebar1"><ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="zeichenkurse.html">Zeichenkurse</a></li>
    <li><a href="bilder.html">Bilder und Zeichnungen</a></li>
    <li><a href="illustrationen.html">Buchillustrationen</a></li>
    <li><a href="ausstellungen.html">Ausstellungen</a></li>
    <li><a href="werbegrafik.html">Werbegrafik</a></li>
    <li><a href="vita.html">Vita</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    </ul>

    <!-- end #sidebar1 --></div>

    Ich habe auch schon probiert, die Grafiken bei dem <ul>-Attribut einzufügen, aber das ergebniss ist dasselbe. Ausserdem soll sich die Farbe je nach "activ" bzw. "hover" ändern. Also bin ich sozusagen an das <li>-Attribut gebunden. (Farbe einbinden kommt noch, es geht mir jetzt erstmal nur um die Ausrichtung)

    Meine Frage ist nun, wie bekomm ich die Grafik so an das <li>-Attribut angehängt, dass es mit dem Text Bündig ist, so wie im Firefox?

    Oder gibt es eine Möglichkeit die Größe des List-styles : "quadrat" zu verändern? Das wäre nämlich die einfachste Variante. Aber so klein sieht das optisch nicht so toll aus finde ich. Die Font-größe beträgt 12px, und da wirken die Quadrate sehr mickrig. Wenn man die vergrößern könnte, wäre mein Problem gelöst.

    Hat jemand ne Idee wie man das hinbekommt?

    Vielen Dank schon mal für eure Antworten.

    Gruß

    Ironbird
     
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Ausrichtung von Listengrafik - Problem im IE
    AW: Ausrichtung von Listengrafik - Problem im IE

    wenn du list-style: none; setzt und die grafiken als Hintergrund links zentriert formatierst, sollte das auch im IE gleich aussehen.

    Code (Text):
    1.  
    2. #sidebar1 li {
    3. list-style:none;
    4. background:url(../pics/button-inactive.gif) left center no-repeat;
    5. padding: 10px 0 10px 30px;
    6. }
    7.  
    exakt positionieren lässt es sich allerdings am besten,wenn li eine konkrete höhe hat.
     
    #2      
  3. Ironbird

    Ironbird Nicht mehr ganz neu hier

    Dabei seit:
    22.08.2007
    Beiträge:
    231
    Geschlecht:
    männlich
    Ort:
    München
    Software:
    Photoshop CC + Lightroom CC
    Kameratyp:
    NIKON D810
    Ausrichtung von Listengrafik - Problem im IE
    AW: Ausrichtung von Listengrafik - Problem im IE

    Danke hat geklappt.

    im IE ist es zwar noch immer nicht ganz auf der selben Höhe wie der Text (1px höher), aber so ist es wesentlich besser.
     
    #3      
x
×
×
teststefan