nicht angemeldet
Unterschied IE <=> NS NAV bei Bildern
Hi!
Ich habe in einem Absatz 3 Links ( nur mit einem <br/> getrennt ) untereinander stehen. Der Abstand zwischen den Links ist so, wie mit CSS formatiert und die Seite sieht mit dem IE und dem NS NAV völlig gleich aus. ( Also zunächst mal so, wie ich es möchte. )
Füge ich jetzt vor jeden Link ein kleines 9*9 pix großes Navigations-div ein ( ohne einem <br/>, so daß in jeder Zeile ein Bild und daneben der Link ist ), dann passiert Folgendes:
Sieht man sich die Seite im NS NAV an, dann bleibt der Abstand zwischen den Links völlig unverändert. ( So, wie es sein soll )
Sieht man sich die Seite im NS NAV an, dann kleben die 3 Zeilen plötzlich ganz eng aneinander, ohne vertikale Abstände.
Was kann ich tun, damit auch im IE der Abstand erhalten bleibt?
2 mal <br/> bringt nichts. Dann ist der Abstand im IE eine Spur zu groß und im NS NAV dann sowieso schon VIEL zu weit auseinander.
Gibt es eine Lösung für mein Problem? Die Seite ist valide und sollte auch so bleiben!
Grüße
Gent
-
Hi,
Sieht man sich die Seite im NS NAV an, dann bleibt der Abstand zwischen den Links völlig unverändert. ( So, wie es sein soll )
Sieht man sich die Seite im NS NAV an, dann kleben die 3 Zeilen plötzlich ganz eng aneinander, ohne vertikale Abstände.Also alles bleibt ganz anders? Hm. Was passiert denn jetzt im NS NAV? Unverändert oder aneinandergeklebt? Und vor allem: in welcher Version?
Gibt es eine Lösung für mein Problem? Die Seite ist valide und sollte auch so bleiben!
Dazu solltest Du das erstmal sinnvoll formulieren. Und vielleicht auch etwas Code als Beispiel (natürlich nur den relevanten Teil).
cu,
Andreas--
MudGuard? Siehe http://www.mud-guard.de/-
Hi!
ups, vertippt. *g* Also es bleibt beim NS NAV Version 6.1 GLEICH und im IE Version 6.0 kleben die 3 Zeilen plötzlich aneinender.
Der Code:
<img src="grafik.gif" alt="" style="width:9px; height:9px; ">
<a href="blablabla1.html">Link1</a><br/>
<img src="grafik.gif" alt="" style="width:9px; height:9px; ">
<a href="blablabla2.html">Link2</a><br/>
<img src="grafik.gif" alt="" style="width:9px; height:9px; ">
<a href="blablabla3.html">Link3</a><br/>Läßt man die 3 Bilder weg, dann ist der vertikale Abstand zwischen den Links bei BEIDEN Browsern gleich.
Gent
-
Hast Du eventuell noch zwischen Grafik und Text ein Leerzeichen?
setze mal probehalber die Zeilen mit Verweiss ganz an den img Tag!MfG
uli
-
Hast Du eventuell noch zwischen Grafik und Text ein Leerzeichen?
setze mal probehalber die Zeilen mit Verweiss ganz an den img Tag!MfG
uli
Ja, es war 1 Leerzeichen. Aber selbst, wenn ich das weggebe und der Linktext direkt anschließt, bleibt das Problem gleich. :-(
Gent
-
hallo gent
warum so umständlich?
hier die source
<html>
<p>...
</p>
<p> </p>
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="grafik.gif" alt="" style="width:9px; height:9px; " width="9" height="9"></td>
<td><a href="blablabla1.html">Link1</a></td>
<td><img src="grafik.gif" alt="" style="width:9px; height:9px; " width="9" height="9"></td>
<td><a href="blablabla2.html">Link2</a></td>
<td><img src="grafik.gif" alt="" style="width:9px; height:9px; " width="9" height="9"></td>
<td><a href="blablabla3.html">Link3</a></td>
</tr>
</table>
<p>...
</p>
</html>kannst noch spalten dazu machen und mit einem abstandhalter alles schön ausrichten:)
-
Hallo.
hier die source
[...]
<p> </p>
Nein, bitte nicht.
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="grafik.gif" alt="" style="width:9px; height:9px; " width="9" height="9"></td>
<td><a href="blablabla1.html">Link1</a></td>
<td><img src="grafik.gif" alt="" style="width:9px; height:9px; " width="9" height="9"></td>
<td><a href="blablabla2.html">Link2</a></td>
<td><img src="grafik.gif" alt="" style="width:9px; height:9px; " width="9" height="9"></td>
<td><a href="blablabla3.html">Link3</a></td>
</tr>
</table>Besser:
<ul>
<li><img ... /><a>...</a></li>
<li><img ... /><a>...</a></li>
<li><img ... /><a>...</a></li>
[...]
</ul>kannst noch spalten dazu machen und mit einem abstandhalter alles schön ausrichten:)
Nein, den Rest erledigt CSS.
MfG, at
-
-
-
-
Hallo,
<img src="grafik.gif" alt="" style="width:9px; height:9px; ">
<a href="blablabla1.html">Link1</a><br/>
<img src="grafik.gif" alt="" style="width:9px; height:9px; ">
<a href="blablabla2.html">Link2</a><br/>
<img src="grafik.gif" alt="" style="width:9px; height:9px; ">
<a href="blablabla3.html">Link3</a><br/>Und _wo_ steht das?
Zwischen <p> und </p>?
Oder "nackt" irgendwo in der Gegend?
(Hoffentlich nicht - Du verwendest ja XHTML.)Läßt man die 3 Bilder weg, dann ist der vertikale Abstand zwischen den Links bei BEIDEN Browsern gleich.
Ich kann es mir auch nicht recht erklaeren.
Bitte stell doch die Seite mal online und
poste hier die URL (als Link)!---
Das ganze schreit aber foermlich nach einer Liste (<ul>),
und die Grafik kannst Du ja mit CSS zum Listen-Symbol machen.HTML:
<ul class="bildchenliste">
<li><a href="seite1.html">Seite 1</a></li>
<li><a href="seite2.html">Seite 2</a></li>
<li><a href="seite3.html">Seite 3</a></li>
</ul>CSS:
ul.bildchenliste { list-style-image:url(grafik.gif); }Natuerlich ist auch die "pixelgenaue" Listen-Formatierung
mit CSS ein wenig knifflig, aber folgende Links duerften
Dir dabei helfen:
http://selfhtml.teamone.de/css/eigenschaften/listen.htm
http://www.subotnik.net/style/list-box-test.html
http://devedge.netscape.com/viewsource/2002/list-indent/
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listamatic/Gruesse,
Thomas
-
Hallo,
Kleiner Nachtrag:
<img src="grafik.gif" alt="" style="width:9px; height:9px; ">
<a href="blablabla1.html">Link1</a><br/>
(Hoffentlich nicht - Du verwendest ja XHTML.)Aber nicht konsequent.
Also entweder XHTML:
<img src="..." alt="..." /> und <br />
oder HTML:
<img src="..." alt="..."> und <br>Bitte poste noch die ersten paar Zeilen Deiner Datei
(Doctype u.s.w.), damit wir sehen koennen, in welchen
Modus Du die Browser schickst (Quirks/Standards).Der von Uli verdaechtigte Zeilenumbruch
sollte _theoretisch_ keine Rolle spielen,
d.h. es sollte einfach als Leerzeichen
behandelt werden.Gruesse,
Thomas
-
Und _wo_ steht das?
Zwischen <p> und </p>?
Oder "nackt" irgendwo in der Gegend?
(Hoffentlich nicht - Du verwendest ja XHTML.)Ja, das ganze steht zwischen <p> und </p> !
Das ganze schreit aber foermlich nach einer Liste (<ul>),
und die Grafik kannst Du ja mit CSS zum Listen-Symbol machen.Das ist eher nicht das, was ich will. Es ist eine php-Seite und von bestimmten Berechnungen abhängig, ob der Link angezeigt wird oder nicht. ( Es handelt sich um eine Blätterfunktion a là WEITERE SEITEN und ZURÜCK ZUM ANFANG u.s.w. und die gifs sind die dafür typischen Grafiken. )
Bitte poste noch die ersten paar Zeilen Deiner Datei
(Doctype u.s.w.), damit wir sehen koennen, in welchen
Modus Du die Browser schickst (Quirks/Standards).OK, hier ist der Quellcode ohne die Bilder. In dem Fall ist der vertikale Abstand zwischen den Links in BEIDEN Browsern GLEICH:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
...
<p>
<a href="blablabla1.html">Link1</a><br/>
<a href="blablabla2.html">Link2</a><br/>
<a href="blablabla3.html">Link3</a><br/>
</p>
...
</html>Und das ist der Quellcode, wo dann, wenn man sich die Seite mit dem IE ansieht, die Links plötzlich ohne Abstand untereinander kleben:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
...
<p>
<img src="grafik.gif" alt="" style="width:9px; height:9px; ">
<a href="blablabla1.html">Link1</a><br/>
<img src="grafik.gif" alt="" style="width:9px; height:9px; ">
<a href="blablabla2.html">Link2</a><br/>
<img src="grafik.gif" alt="" style="width:9px; height:9px; ">
<a href="blablabla3.html">Link3</a><br/>
</p>
...
</html>Ich schreibe IMMER <br/> und nie <br>, weil das auf selfhtml so empfohlen wird.
Grüße
Gent
Hallo,
Kleiner Nachtrag:
<img src="grafik.gif" alt="" style="width:9px; height:9px; ">
<a href="blablabla1.html">Link1</a><br/>
(Hoffentlich nicht - Du verwendest ja XHTML.)Aber nicht konsequent.
Also entweder XHTML:
<img src="..." alt="..." /> und <br />
oder HTML:
<img src="..." alt="..."> und <br>Bitte poste noch die ersten paar Zeilen Deiner Datei
(Doctype u.s.w.), damit wir sehen koennen, in welchen
Modus Du die Browser schickst (Quirks/Standards).Der von Uli verdaechtigte Zeilenumbruch
sollte _theoretisch_ keine Rolle spielen,
d.h. es sollte einfach als Leerzeichen
behandelt werden.Gruesse,
Thomas
-
hi,
Das ganze schreit aber foermlich nach einer Liste (<ul>),
und die Grafik kannst Du ja mit CSS zum Listen-Symbol machen.Das ist eher nicht das, was ich will. Es ist eine php-Seite und von bestimmten Berechnungen abhängig, ob der Link angezeigt wird oder nicht.
ja und?
wo ist der unterschied, ob du mehrere nackte links mit bildern davor per php ausgibst, oder mehrere listenpunkte dynamisch erzeugst?btw: bitte zitiere sinnvoll, dass fullquote von thomas beitrag am ende deines postings war überflüssig.
gruss,
wahsaga-
Hi Wahsaga!
Sorry, hatte vergessen, die Zitierung zu löschen.
Aber auch abgesehen davon, daß es egal ist, ob ich es so wiwe bisher beschrieben verwirkliche oder wie hier vorgeschlagen, mit einer Liste, würd ich gerne wissen, wieso da plötzlich die Ausgabe so unterschiedlich ist und opb ich eine Möglichkeit habe, das so zu schreiben, daß auch mit einem Bild vor dem Link der Abtsnad in beiden Browsern gleich ist.
Grüße
Gent
-
-
Hallo,
Und das ist der Quellcode, wo dann, wenn man sich die Seite mit dem IE ansieht, die Links plötzlich ohne Abstand untereinander kleben:
<p>
<img src="grafik.gif" alt="" style="width:9px; height:9px; ">
<a href="blablabla1.html">Link1</a><br/>
<img src="grafik.gif" alt="" style="width:9px; height:9px; ">
<a href="blablabla2.html">Link2</a><br/>
<img src="grafik.gif" alt="" style="width:9px; height:9px; ">
<a href="blablabla3.html">Link3</a><br/>
</p>Ich sehe immer noch keine Erklaerung fuer das Problem.
Aber eine moegliche Loesung:
Gib eine Zeilenhoehe in CSS an:
p { line-height:1.2em; }
oder so.Allenfalls koenntest Du noch margin/border/padding
fuer img festlegen, um einen Abstand zu garantieren.Ich schreibe IMMER <br/> und nie <br>, weil das auf selfhtml so empfohlen wird.
Du hast schlecht gelesen. Lies nochmal genau:
http://selfhtml.teamone.de/html/text/zeilenumbruch.htm#erzwingen
und auch
http://selfhtml.teamone.de/html/xhtml/unterschiede.htm#leere_elementeIn HTML ist <br /> und <br/> _falsch_.
Auch wenn der Validator es leider in der Grundeinstellung
durchlaesst, ist und bleibt es falsch.Wenn Du etws Geduld hast, melden sich hier
sicher noch die SGML-Kenner...mfg
Thomas
-
Ich sehe immer noch keine Erklaerung fuer das Problem.
Aber eine moegliche Loesung:
Gib eine Zeilenhoehe in CSS an:
p { line-height:1.2em; }
oder so.Allenfalls koenntest Du noch margin/border/padding
fuer img festlegen, um einen Abstand zu garantieren.Hi Thomas!
Das hab ich ALLES schon getan. Die Seite hat eine ausgelagerte CSS Datei und alles funktioniert so und wird so ausgegeben, wie es sein soll.
Nur eben, sobald die Bilder vor den Links sind, kleben die Zeilen beim IE plötzlich aufeinander. :-(
Gent
-
-
Hi,
Ich schreibe IMMER <br/> und nie <br>, weil das auf selfhtml so empfohlen wird.
Nenne bitte die Stelle in SelfHTML, an der das steht, damit man diesen Fehler melden kann.
Ein korrekter Browser müßte bei <br/> in HTML (aber nicht in XHTML) nämlich das > sichtbar ausgeben (wg. SHORTTAG=YES in HTML).
cu,
Andreas--
MudGuard? Siehe http://www.mud-guard.de/
-
-
-
-
-
-
Hallo,
hast du mal ne URI oder das CSS dazu damit das irgendwie nachvollziehbar ist?
Grüsse
Cyx23
-
So, ich hoffe, irgend wer liest diesen Threat jetzt noch, obwohl es schon so weit unten steht und schon Antworten dabei sind.
Ich hab mich jetzt eine Stunde lang herumgespielt und versucht, das Problem immer weiter einzukreisen.
Es hat nicht wirklich was mit den Links zu tun. Das Kernproblem ist:
Bei einem html-Dokument, wo mittels CSS die Eigenschaft "line-height" definiert ist, wird dies bei Text oder Link sowohl im IE, als auch im NS NAV richtig angezeigt.
Fügt man jetzt aber in eine Zeile eine Grafik dazu, sei sie auch noch so klein, egal auch, ob vorne, hinten oder irgend wo IM Text, dann verweigert der IE plötzlich die Zeilenabstände und die Zeilen kleben zusammen.
Der NS NAV behält auch MIT der Grafik die Abstände.
Zum Schluß habe ich jetzt NUR die 3 kleinen Grafiken mit je einem <br> eingefügt. Ohne Text.
Im IE picken sie untereinander, im NS NAV haben sie DEN Abstand, den ich bei "line-height" vorgegeben habe.
Jetzt nochmals meine Frage : Fällt wem ein Weg ein, damit in BEIDEN Browsern der Abstand gleich ist?
Gent
PS: Mich würd auch interessieren : Welcher Browser zeigt es denn jetzt eigentlich richtig an und welcher falsch?
-
Hi,
Jetzt nochmals meine Frage : Fällt wem ein Weg ein, damit in BEIDEN Browsern der Abstand gleich ist?
Hast Du mal mit vertical-align für die Grafiken gespielt?
cu,
Andreas--
MudGuard? Siehe http://www.mud-guard.de/-
Hast Du mal mit vertical-align für die Grafiken gespielt?
Hi Andreas!
Ja, auch das habe ich schon versucht. War aber der gleiche Effekt. Leider.
Grüße
Gent
-
-
Hallo,
So, ich hoffe, irgend wer liest diesen Threat jetzt noch, obwohl es schon so weit unten steht und schon Antworten dabei sind.
hast du irgendein Problem mit der Orientierung oder was ist los? Scroll mal wirklich nach "unten", konsultier mal die Forums-FAQ!
Ich hab mich jetzt eine Stunde lang herumgespielt und versucht, das Problem immer weiter einzukreisen.
Hättest du mal besser einen brauchbaren Beispielcode oder eine URI gepostet.
Bei einem html-Dokument, wo mittels CSS die Eigenschaft "line-height" definiert ist, wird dies bei Text oder Link sowohl im IE, als auch im NS NAV richtig angezeigt.
Na endlich mal was konkretes aus deinem CSS. Hurra!
Jetzt nochmals meine Frage : Fällt wem ein Weg ein, damit in BEIDEN Browsern der Abstand gleich ist?
Ja.
PS: Mich würd auch interessieren : Welcher Browser zeigt es denn jetzt eigentlich richtig an und welcher falsch?
Also ein paar Browser zum Testen solltest du schon selbst zur Verfügung haben, sonst wird das etwas aufwändig.
Grüsse
Cyx23
p.s.:
versuch mal für den Anfang img{float:left;}-
Sorry, aber was bitte hab ich denn falsch gemacht, daß ich gleich SO angefahren werde???
hast du irgendein Problem mit der Orientierung oder was ist los? Scroll mal wirklich nach "unten", konsultier mal die Forums-FAQ!
Ich hab überhaupt kein Problem mit der Orientierung. Ich weiß, daß Doppelpostings nicht erwünscht sind und hab das halt einfach als Einleitungs-Satz geschrieben zu einem weiteren threat bei meinem ursprünglichen Posting. Was war da falsch dran???
Hättest du mal besser einen brauchbaren Beispielcode oder eine URI gepostet.
Ich HABE den Beispielcode gepostet, nachdem ich darum gebeten worden bin. Und ich hab gerade keine Möglichkeit, etwas online zu stellen.
PS: Mich würd auch interessieren : Welcher Browser zeigt es denn jetzt eigentlich richtig an und welcher falsch?
Also ein paar Browser zum Testen solltest du schon selbst zur Verfügung haben, sonst wird das etwas aufwändig.
Ich HABE ja beide angesprochenen Browser. Sonst wäre mir das Problem ja gar nicht aufgefallen. Ich habe diese Frage ja nur auf den IE und den NAV bezogen, weil mir bei den beiden der Unterschied aufgefallen ist.
versuch mal für den Anfang img{float:left;}
OK, das werd ich jetzt auch noch versuchen. Viel mehr fällt mir dann nicht mehr ein...
-
Hallo,
Ich hab überhaupt kein Problem mit der Orientierung. Ich weiß, daß Doppelpostings nicht erwünscht sind und hab das halt einfach als Einleitungs-Satz geschrieben zu einem weiteren threat bei meinem ursprünglichen Posting. Was war da falsch dran???
die Behauptung dein Thread wäre unten, wo er doch in den obersten 10% der Seite stand, war falsch, die Behauptung weiter unten würde nicht gelesen auch usw.
Hättest du mal besser einen brauchbaren Beispielcode oder eine URI gepostet.
Ich HABE den Beispielcode gepostet, nachdem ich darum gebeten worden bin. Und ich hab gerade keine Möglichkeit, etwas online zu stellen.
Vielleicht hatte ichs ja übersehen, aber ich hatte weder eine Antwort auf mein anderes Posting gefunden noch Code mit CSS, bis auf die Erwähnung im vorherigen Posting. Beispielcode sollte hinreichend komplett und vielleicht direkt verwendbar sein, um eindeutige Ergebnisse zu erhalten, unötige Arbeit zu ersparen, Schreibfehler auszuschliessen usw.. Ist ja wohl Schwachsinn wenn hier zig Leser feststellen dass dein Code das von dir behauptetete Problem gar nicht aufweist, nur weil dass CSS fehlt.
Aber sorry falls ich den thread nicht gründlich genug durchgeschaut hatte und das CSS doch im Code der anderen Postings enthalten war.Ich HABE ja beide angesprochenen Browser. Sonst wäre mir das Problem ja gar nicht aufgefallen. Ich habe diese Frage ja nur auf den IE und den NAV bezogen, weil mir bei den beiden der Unterschied aufgefallen ist.
Nun, da gibt es z.B. als gebräuchliche Browser noch IE 5 und 5.5, da es vmtl. ein IE-Problem ist. Und Opera kannst du ja auch runterladen.
versuch mal für den Anfang img{float:left;}
OK, das werd ich jetzt auch noch versuchen. Viel mehr fällt mir dann nicht mehr ein...
Da brauchst du, falls es nicht noch eine andere Lösung gibt, u.U. noch weitere Korrekturen wenn die Bilder weiter unten sitzen sollen, auch ein Grund für möglichst vollständigen, aber natürlich bitte auch nicht zu umfangreichen Code ;-)
Grüsse
Cyx23
-
-
-