Display Block Problem im IE bei Liste

Webdesign & Technik HTML & CSS
1

Hallo,

vielleicht kann mein Problem jemand nachvollziehen und mir helfen.
ich habe eine Liste als Navigation mit 15 em, Probleme habe ich im FF2 und IE
entfelne ich bei #hauptnavi li die 15 em , dann stimmt die Ansicht im IE, aber im FF ist die zweite Navigation abgeschnitten und zwar um die Länge des img.
Leider muss ich viel CSS posten, aber vielleicht kann man den Code einfach mal kopieren um das Problem nachzuvollziehen.
Meine Navigation

[code]


[/code]

Mein CSS[code]* {margin: 0;
}

html, body {
font-size: 100.01%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#333;
padding: 0 1em 0 1em;
background-color:#003366;
}
ul#gruss {
margin: 0; padding: 0;
}
ul#gruss li {
font-size: 75.01%;
list-style: disc;
margin-left:35px;
}

p {
padding:0;
margin:0;
}

ul {
padding:0;
margin:0;
}
li {
list-style-image: none;
list-style:none;
}
#hauptnavi
{
width:15em;
}
#hauptnavi li
{
width:15em; /*Fehler */
margin:0;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}

#hauptnavi img
{
float: right;
margin-top: -1.4em;
margin-bottom: 1em;
margin-right:0.2em;
border:0;
}

.h_nav_primaerinaktiv /* Darstellung der unterschiedlichen farben*/
{
font-size:70%;
display: block;
background-color: #526c85;
padding:6px 0 6px 14px; /* oben rechts unten links*/

}[/code]

MfG und Danke
GD

2

Vielleicht liegt es ja an dem Fehler (vor der Endmarkierung vom
li eine Endmarkierung für a zuviel).
Bei mir zeigt der browser dann einfach die entsprechende
Fehlermeldung statt Inhalt an, was für XHTML korrekt ist.
Wenn der Firefox das anders macht, hast du das vermutlich
irrtümlich mit dem HTML-parser interpretieren lassen, der
versucht mit kaum vorhersagbaren Tricks solche Fehler im
Dokument zu vertuschen. Der MSIE kann gar kein XHTML,
deshalb gibt es da auch keine korrekte Anzeige.

Ansonsten habe ich da jetzt nach der Behebung des Fehlers
keine Besonderheiten bei einem Gecko gesehen.
Die anderen Fehler sollte man gleichwohl ebenfalls beheben
(Attribut alt bei img, href="#")

3

:susp:

link zur seite?

aber nur mal so als tipp… FF(3) macht, meines wissens, wenn man richtig codet keine anzeigefehler. vlt solltest du mal validator drüber laufen lassen.

4

Hallo, zuerst vielen Dank an beide.
Ich stelle das heute Abend mal online.

@hoffmann sorry das alt und # sind im echtbetrieb richtig, ich wollte hier nur eine einfache Darstellung erreichen.

MfG
GD

5

Hallo,

http://guckstdu.bplaced.net/
dort ist der Test jetzt online. Test deswegen weil die Liste dynamisch ist und ich keine DB dort habe.

Im FF 2.0 sieht es seltsam aus.
Im IE ab 5.5 stimmt alles.

Erweitere ich #hauptnavi li um
width:15em;
dann stimmt es im FF2.0 aber im IE ab 5.5 bis 7.0 nicht mehr.
http://guckstdu.bplaced.net/indexIe.php
Vielen Dank und MfG
GD

6

Naja, bei richtig oder falsch sollte man sich sicher nicht so sehr
auf den MSIE verlassen - gleich welche Version - dazu ist der zu
fehlerhaft.

Allerdings sehe ich da auch Abweichungen zwischen Opera und
Gecko 1.9, die es wohl so zeigen, wie du es haben möchtest und
Konqueror und Gecko 1.8 auf der anderen Seite. Konqueror
macht eine zusätzliche Leerzeile, Gecko 1.8 rückt irgendwas
ein.
Da die hinsichtlich CSS eigentlich ganz brauchbar sind, könnte es
an der browser-Stilvorlage liegen, die ja immer unterschiedlich
ausfallen kann.
Um systematisch weiter zu suchen, könnte man etwa testweise
um alle beteiligten Elemente, besonders die ul und li mittels
outline einen Rand zaubern und gucken, wo Unterschiede
auftauchen, zu welchem Element der uneinheitliche Bereich
gehört und da dann die browser-Stilvorlagen gezielt
überschreiben.
Man kann auch das Beispiel immer weiter vereinfachen, um
herauszufinden, woran es liegt.
Jedenfalls lohnt es wohl nicht mehr, Fehler für Gecko 1.8 (firefox2)
zu melden, weil die aktuelle Version ja bereits Gecko1.9 (firefox3)
ist.

7

Hallo zusammen, danke für die Tipps.

Ich habe das Problem anders gelöst. Mit einer Definitionsliste. Auf Browsershot.org sieht es jetzt in allen Browsern gut aus.

[code]


NavigationsLink

Bild mit Link zur externen Grafik
[/code]

Da ich teilweise keine Grafik im dd “habe” und ich lt. Validator keine leeren dd haben darf sieht meine Lösung dann so aus.

[code]

NavigationsLink
Bild mit Link zur externen Grafik
NavigationsLink
 
[/code]

Sollte ich lieber ein transparentes Blindgif nehmen ?

MfG
GD

8

Also inhaltlich definiert der Inhalt vom dd ja den Begriff im dt -
wenn das inhaltlich paßt, kann man ja eine Definitionsliste
nehmen, sonst kann das je nach Inhalt problematisch sein.
Man muß allerdings auch dt und dd nicht abwechselnd
hinschreiben, sofern es anders einen Sinn ergibt.
Ein sinnloses GIF ist jedenfalls noch schlechter.

Gibt auch Leute, die mangels passender Elemente
Definitionslisten verwenden, um Gedichte auszuzeichnen.
Ich mache das etwa bei HTML4 oder XHTML1, weil es da nicht
besser geht, XHTML+RDFa bietet da mehr Möglichkeiten zu
beschreiben, was man wirklich meint.

Schön ist das jedenfalls alles nicht.

Daß es bei Definitionslisten anders aussieht als bei ul oder ol,
scheint mir aber auch darauf hinzudeuten, daß die
browser-Stilvorlage nicht komplett überschrieben wurde. Die
sieht besonders für Listen bei verschiedenen browsern deutlich
unterschiedlich aus.

9

[quote=“hoffmann”]
scheint mir aber auch darauf hinzudeuten, daß die
browser-Stilvorlage nicht komplett überschrieben wurde. Die
sieht besonders für Listen bei verschiedenen browsern deutlich
unterschiedlich aus.[/quote]

Hallo,

könntest Du mir bitte erklären was Du meinst (Stilvorlage ).

Inhaltlich passt ja die Liste, weil ich habe ja den Link und zu einigen Links eine Grafik.

Wenn ich Dich richtig verstanden habe, wäre es so möglich?

[code]

NavigationsLink
Bild mit Link zur externen Grafik
NavigationsLink
NavigationsLink
NavigationsLink
Bild mit Link zur externen Grafik
[/code]

Ok, auf jeden Fall hab vielen Dank.
GD

10

browser haben für (X)HTML-Elemente eine Stilvorlage, einige
wie Mozilla/Gecko explizit als Datei, andere implizit.
Daneben kann jeder Nutzer eine eigene Stilvorlagendatei angeben.

Die Darstellung von (X)HTML funktioniert dann so, daß die
Stilvorlage des browsers zur Anwendung kommt. Wenn in der
Nutzerstilvorlage etwas steht, wird das angewendet (relativ
gesehen mit höherer Priorität).
Deine Stilvorlage als Autor kommt danach an dritter Stelle,
was du angibst, überschreibt dann eben die jeweiligen Angaben
der Nutzerstilvorlage oder der browser-Stilvorlage.
Wenn du irgendwelche Eigenschaften nicht explizit angibst, gelten
natürlich nach wie vor die vom Nutzer oder vom browser.
Deshalb kann für solche Eigenschaften die Darstellung in jedem
browser oder sogar für jeden Nutzer anders sein, weswegen
man besonders bei Listen als Autor Eigenschaften spezifisch für
Listen und auch margin und padding für alle Listenelemente
explizit angibt, wenn es wichtig ist, daß das einheitlich dargestellt
wird.

An letzter Stelle kommen übrigens spezifische Angaben des
Nutzers, die wiederum auch die Angaben des Autors überschreiben
können. Typisch ist etwa die Angabe einer minimalen
Schriftgröße, weswegen man sich als Autor nicht drauf verlassen
kann, daß (bei einer Angabe für die Elemente html oder body)
Schriftgrößen kleiner als 1em funktionieren müssen.

Was das Definitionslistenbeispiel anbelangt - technisch ist das
in Ordnung. Inhaltlich bedeutet das, daß das letzte dd die
drei vorherigen dt definiert, somit die drei aufeinander folgenden
dt äquivalente Begriffe enthalten. Wenn das nicht zutrifft, wäre
die Definitionsliste da inhaltlich falsch verwendet.

11

Ich kann zwar aus Scheisse - genau dass naemlich ist dein Markup - kein Gold machen, ich kann dir jedoch den richtigen Weg weissen. Vorab, solltest du ein richtiges Reset setzen,
dazu gehoert neben dem margin, nun mal auch das padding *{ margin: 0; padding:0; }
Wie und vorallendingen was man so alles resetten sollte, kannst du beim Gevatter Google in Erfahrung bringen.

Weiter im Text
Dein Markup, muellst du mit irgend welchen Sinnbefreiten span-Tags, mit denen du dir dein Leben nur unnoetig schwer machst, da ist es auch absolut kein Wunder, wenn du kein einheitliches Bild zusammenbekommst - was aber in 90% aller Faelle am unsauberen Resetten liegt.

Ich hab dir mal hier eben ein kleines Testcase zusammengestellt. Auf der Basis dessen, solltest du gut weiter kommen, indem du einfach damit rumspielst. Und NEIN, verdammt, dein Menue, stellt in der Form, wie du sie hier vorstellst, absolut keine Definitionsliste dar also lass den Mist auch. Das einizige, wo ich eine Definitionsliste sehen koennte, waere vllt. dein Submenue aber solange du da nix mit jQery oder Ajax machst ist das fuer mich auch nur ein normales Menue.

HTML:
<ul id="hauptnavi">

   <li class="h_nav_primaerinaktiv"><a href="../datei.php">Erster Hauptinaktiv</a></li>
   <li class="h_nav_primaerinaktiv"><a class="teaserimg" href="../datei.php">Hauptinaktiv</a></li>
   <li class="h_nav_primaerinaktiv"><a href="../datei.php">Hauptinaktiv</a></li>
   <li class="h_nav_primaerinaktiv"><a href="../datei.php">Hauptinaktiv</a></li>
   <li class="h_nav_primaerinaktiv"><a href="../datei.php">Hauptinaktiv</a></li>
   
   <li class="h_nav_hauptaktiv"><a class="teaserimg" href="../datei.php">HauptAktiv</a></li>
   
   <li class="h_nav_secinactive"><a href="../datei.php">Sekund&auml;rtinaktiv</a></li>
   <li class="h_nav_secactive"><a href="../datei.php">SekundärAktiv</a></li>
   <li class="h_nav_secinactive"><a href="../datei.php">Sekundärtinaktiv</a></li>
   <li class="h_nav_secinactive"><a href="../datei.php">Sekundärtinaktiv</a></li>
   <li class="h_nav_secinactive"><a href="../datei.php">Sekundärtinaktiv</a></li>
   
   <li class="h_nav_primaerinaktiv"><a class="teaserimg" href="../datei.php">Hauptinaktiv</a></li>
   <li class="h_nav_primaerinaktiv"><a class="teaserimg" href="../datei.php">Hauptinaktiv</a></li>

</ul>

[code]
CSS:
ul#hauptnavi { width: 15em; border: 1px solid #000; border-top: none; margin: 5% auto; background: #526c85; font-size: .7em; }
ul#hauptnavi li { border-top:1px solid #000; display: block; padding: 0 .5em; }

ul#hauptnavi li.h_nav_hauptaktiv { background: #e4a025; }
ul#hauptnavi li.h_nav_secinactive { background: #cbe9c9; }
ul#hauptnavi li.h_nav_secactive { background: #f0ca84; }

  ul#hauptnavi a { width: 100%; display: block; line-height: 200%; }
  ul#hauptnavi li.h_nav_hauptaktiv a, 
  ul#hauptnavi li.h_nav_secinactive a,
  ul#hauptnavi li.h_nav_secactive a { color: #000; }
           
  .teaserimg { background: url(web.gif) no-repeat 12.5em center; width: 14px; }[/code]

Ich glaube, dass dies so selbstklaerend sein sollte.

12

Wie wäre es denn mal die Navigation richtig zu bennenen?

13

An sich waere das sogar richtig gut aber das liegt ja wohl am TE