IE6 Weißraum wenn Hintergrundgrafik bei Link in Liste

[Sascha]

Hallo,

eigentlich müsste mit dem Thema-Titel schon alles gesagt sein. Dennoch, um das ganze etwas zu erläutern - folgendes Problem:

Ich erstelle eine ganz normale Liste mit Verlinkungen, als vertikale Navigation nach dem Muster:

<ul>
<li><a href=""></a></li><li><a href=""></a></li>(...)
</ul>

Um einen "WhitespaceBug" zu vermeiden, verwendet ich keine Leerzeichen/ Zeilenumbrüche zwischen den relevanten Tags.

Füge ich nun via Css das Aufzählungszeichen als Hintergrundbild ein, bilden sich,ausschließlich im Internet Explorer 6, zwischen den Navigationspunkten dünne Linien, die nicht als Links angesehen werden. Das Cursor-Symbol springt in diesem Bereich, was ich gerne vermeiden möchte.

Vielleicht kann mir jemand einen kleinen Wink geben, was ich falsch mache, beziehungsweise wie ich das Problem umgehen kann.

Gruß,
Sascha

[Antipitch]

Hi Sascha,

poste doch mal deine entsprechenden css Angaben.

Gruß
Antipitch

[Sascha]

=>Css Datei:

#navigation, #navigation ul, #navigation li, #navigation a, #navigation img{
 padding:0px;
 margin:0px;
 font-size: 12px;
}
#navigation{
 float: left;
 height: 350px;
 width: 180px;
 white-space: nowrap;
}
#navigation a{
 background-image: url(img/grey_dot.gif);
}
#navigation ul{
 padding-left: 30px;
}

=>Dinge wie background-repat oder -position sind vorerst raus genommen, um weniger Fehlerquellen zu bieten. Ob ich den Anker mit display:block kennzeichne oder einfach so lasse: der Rand ist immer dort.

[Antipitch]

Hi Sascha,

#navigation, #navigation ul, #navigation li, #navigation a, #navigation img{
padding:0px;
margin:0px;
font-size: 12px;
}

Falls deine ul die ID "navigation" kriegen soll:

• #navigation ul und #navigation img sind überflüssig
• außerdem margin: 0; und padding: 0;
• der ul gibst du am ganz Ende doch ein padding, solltest du anders lösen
• stattdessen solltest du nur für die ul aber list-style: none; notieren und für alle Elemente border: none;
• für die <a> tags display: block; feste Größen (zumindest height) und background-image: url(img/grey_dot.gif) no-repeat 0 0; Hintergrundbild-Wechsel kannst du dann über css (ohne JS) machen

Mit Selektoren und Werten vielleicht generell etwas sorgfältiger. Guck mal, ob's dann besser geht...

Gruß
Antipitch

[Sascha]

Ich habe so das dumpfe gefühl, dass mein Quelltext nicht selbsterklärend war.

#navigation ist ein div, in dem sich die Navigation (#navigation ul) befindet. Die Aufzählung '#navigation img' ist überflüssig, dürfte aber auch keinen Schaden anrichten.

Was du mir beschrieben hast, habe ich bereits mehrfach in vielen Ausführungen getestet. Ich habe dennoch in dem Augenblick in dem ich dem ganze ein Hintergrundbild zuordne das Problem, dass mir der IE6 einen Rand gibt, auf dem das Maussymbol springt.

Sollte jemand grade weniger zu tun haben: Bitte testet es einmal aus. Vielleicht sind bei mir auch nur 2Explorer kaputt, dann wäre ich enorm erleichtert.

Lg,
Sascha

[Antipitch]

Hi Sascha,

so geht's (Hintergrundbild in die li's, hier ein 22x22 gif):

<style type="text/css">
#navigation {
  float: left;
  }
#navigation ul,
#navigation li,
#navigation a {
  padding: 0;
  margin: 0;
  border: none;
  }
#navigation ul {
  padding: 30px;
  list-style: none;
  }
#navigation li {
  height: 22px;
  background: url(img/li.gif) no-repeat 0 0;
  }
#navigation a,
#navigation a:link,
#navigation a:visited {
  width: 180px;
  height: 22px;
  display: block;
  }
</style>
------------------------------------------------
<div id="navigation">
  <ul id="nav">
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
  </ul>
</div>

Gruß
Antipitch

[Sascha]

Das Problem ist, dass das Hintergrundbild sich mit dem Hover ändert. Einem nicht-link kann ich keinen Hover zuweisen, wenn ich mich recht erinnere ..

Ich müsste das dann mit JavaScript lösen, oder?

[Antipitch]

Hi Sascha,

Das Problem ist, dass das Hintergrundbild sich mit dem Hover ändert. Einem nicht-link kann ich keinen Hover zuweisen, wenn ich mich recht erinnere ..

Ich müsste das dann mit JavaScript lösen, oder?

Das ist wohl leider richtig (IE nimmt hover nur für <a>), aber da du für die Navigationspunkte ja Textlinks benutzen willst, ist das ja sehr unaufdringlich inner externen .js für die <li>'s lösbar. Schrifteffekt für die <a>'s machste halt ganz normal mit CSS. Andere Lösung ist mir dafür leider bisher nicht eingefallen.

Wäre natürlich zu fragen, ob deine IE User ihren Zittereffekt am Ende nicht sogar vermissen. Aber das ist natürlich letztlich deine Design-Entscheidung...

Gruß
Antipitch

[Sascha]

Ich glaube ich habe nun einen Ansatz, mit dem sich das ganze einfach bewerkstelligen lässt:

mittels php frage ich Browserversion ab, weise dann eine entsprechende css zu. wenn es sich bei dem Browser um dn InternetExplorer <7 handelt, wird Javascript eingefügt (onMouseover="this.style.background='';").

Ich überlege nur noch, wie ich es bewerkstellige, dass die Ursprüngliche CssDatei auch für den Ie<7 verwendet wird, wenn dieser kein Javascript benutzt.

[Antipitch]

Hey Sascha,

mittels php frage ich Browserversion ab, weise dann eine entsprechende css zu. wenn es sich bei dem Browser um dn InternetExplorer <7 handelt, wird Javascript eingefügt (onMouseover="this.style.background='';").

Ich überlege nur noch, wie ich es bewerkstellige, dass die Ursprüngliche CssDatei auch für den Ie<7 verwendet wird, wenn dieser kein Javascript benutzt.

Andere css zuweisen würde ich mir sparen. Gerade festgestellt, dass der IE 7 hover für die <li>'s macht. Insofern brauchst du nur nach IE < 7 zu fragen (oder welche Browser du sonst noch berücksichtigen willst; das geht auch per javascript) und für die dann ne Funktion inner externen .js, die die Hintergründe wechselt. IE 6 ohne JS dürfte ungefähr bei einem 1% (nur dieser IE 6 user) liegen. Und die sehen dann sogar den Hintergrund, nur den Wechsel nicht. Aber das kennen die dann auch schon. Mach dir nicht zuviel Stress deswegen...

Gruß
Antipitch

[Sascha]

Da ich mich mit diesem Problem schon etwas länger quäle werde ich nun den Hammer als WorkAround nehmen ;)

Script sieht wie folgt aus:

Php-Abfrage: wenn Browser != IE<7
=>Ausgabe der ursprünglichen Navigation, ohne JavaScript

else
=>Ausgabe einer JavaScript Navigation.
=>Noscript: Ursprüngliche Navigation.

Ich verwende nach wie vor nur eine Css Datei. Die Javascript-Navigation enthällt andere Klassen und Id-Angaben, wodurch andere Hintergrundbilder gesetzt werden, Bilderwechsel erfolgt via Js.

Ich bin derzeit im Betriebspraktikum und eigentlich noch in der Ausbildung. Da ich dafür kein Geld sehe, habe ich die Zeit und Muße *zwinkert*

Liebe Grüße
Sascha

P.S.: Sollte tatsächlich mal jemand des Script brauchen, weil das selbe Problem vorliegt, eMail-Adresse ist bekanntlich neben dem Usernamen angegeben^^

[sascha]

Tja, ich würde sagen, das war zu Früh gefreut, und langsam kann ich mir  wirklich nur noch am Kopf kratzen:

Wenn ich mittels JavaScript einen Hintergrundbild-Tausch im <li> vornehme, dann entsteht exakt der gleiche Rand, mit dem ich mich bereits zuvor herumsschlagen musste.

Und das Amüsanteste: Ich habe darauf hin via JavaScript folgenden  Befehl gegeben:
onMouseOver="this.className='newbackground';"
Tatsache, der Befehl wird ausgeführt, das Hintergrundbild ändert sich - doch das "aber" folgt sogleich: Ob ich einen neuen Klassennamen zuweise oder einfach '' als Wert schreibe, ich habe automatisch meinen Rand.

Man bedenke dabei aber:
1. Weise ich dem <a> ein Hintergrundbild zu, habe ich automatisch diesen Rand.
2. Weise ich dem <li> ein Hintergrundbild zu, entsteht der Rand nicht, erst bei einer weiteren Aktion taucht er auf.

Meine Schlussfolgerung: ? (<=Fragezeichen?!)

Grüße,
Sascha