Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Ausrichtung von Listengrafik - Problem im IE“

Ironbird

Aktives Mitglied

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:



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
 

sokie

Mod | Web

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:
#sidebar1 li {
list-style:none;
background:url(../pics/button-inactive.gif) left center no-repeat;
padding: 10px 0 10px 30px;
}

exakt positionieren lässt es sich allerdings am besten,wenn li eine konkrete höhe hat.
 

Ironbird

Aktives Mitglied

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
174.478
Beiträge
2.577.990
Mitglieder
65.964
Neuestes Mitglied
Max
Oben