nicht angemeldet
Div Abstände
Moin!
Ich hab mehrere Divs untereinander angeordnet, die haben folgende Klasse:
.webfx-tree-container {
margin: 0px;
padding: 0px;
font-size: 12px;
font-family: Times New Roman;
font-weight: bold;
white-space: nowrap;
}
Im IE wird alles richtig angezeigt, jedoch im wird im FireFox unter jedem Div ein kleiner weisser Abstand angezeigt...
sieht jemand den Fehler oder gibts da nen extra Befehl, wie bei Bildern (display:block)?
Danke für jede Hilfe.
Gruß
Anton
-
Hallo,
Ich hab mehrere Divs untereinander angeordnet, die haben folgende Klasse:
.webfx-tree-container {
margin: 0px;
padding: 0px;
font-size: 12px;
font-family: Times New Roman;
font-weight: bold;
white-space: nowrap;
}Im IE wird alles richtig angezeigt, jedoch im wird im FireFox unter jedem Div ein kleiner weisser Abstand angezeigt...
Nein, bei meherern DIVs die im HTML-Quellcode unmittelbar aufeinander folgen, außer Text keinen weiteren Inhalt haben und mit diesem CSS formatiert sind, gibt es auch im FireFox keinen "kleinen weisser Abstand" dazwischen.
Bitte verlinke eine auf das Problem reduzierte Testseite, oder poste Code, bei dem das Problem aber noch auftritt ;-).
viele Grüße
Axel
-
also als erstes: IE ist keine Referenz! auch wenn viele den browser nutzen, empfehle ich dir das auf firefox zu entwickeln und dann für den IE zu customizen...
Also meine Empfehlung ist, alle Browser einzustampfen, und nur noch einen zu entwickeln. Scheiss customizen, beide Brwoser sind einfach bescheuert gemacht, da hab ich paar heiße Geschichten, aber zu beiden. :P
gut also ich wollte euch die Code-Zeile ersparen, aber viel Spaß.
Kurze Info, es wird im Java ein WebThree-Element erzeugt (ein Div) und diese dann untereinander ausgegeben. Das ist der Code für ein Div:
out.println("var str = "<div id=\"" + this.id + "\" oncontextmenu=javascript:setParametersFormItemNew(\"" + this.parameter1 + "\",\"" + this.parameter2 + "\",\"" + this.parameter3 + "\"); onclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this, event)\" style=\"cursor:pointer;\">" +
"" +indent +"<img cont=\"" + this.type + "\" id=\"" + this.id + "-plus\" src=\"" + ((this.folder)?((this.open)?((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon):((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon)):((this.parentNode._last)?webFXTreeConfig.lIcon:webFXTreeConfig.tIcon)) + "\" onclick=\"webFXTreeHandler.toggle(this);\" style=\"cursor:pointer;\">""+
"+"<img cont=\"" + this.type + "\" id=\"" + this.id + "-icon\" class=\"webfx-tree-icon\" src=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) + "\" onclick=\"webFXTreeHandler.select(this);\" style=\"cursor:pointer;\">" "+
"+"<a cont=\"" + this.type + "\" href=\"" + this.action + "\" onmouseup=\"setFolder(this);\" onmouseover=javascript:getCopyMouse(this); id=\"" + this.id + "-anchor\" onfocus=\"webFXTreeHandler.focus(this);\" style=\"cursor:pointer;\" onblur=\"webFXTreeHandler.blur(this);\"" +(this.target ? " target=\"" + this.target + "\"" : "") +" >""+
"+ label + "</a></div>" +"<div cont=\"" + this.type + "\" id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">";");-
Hm, verzichtet auf die Code-Zeile, der Abstand wird im Mozilla auch bei folgenden Code-Zeilen gemacht:
<html>
<body>
<div>
test
</div>
<div>
test
</div></body>
</html>Markiert ihr die beiden Texte von oben nach unten, sieht man im Mozilla einen Spalt zwischen den Markierungen, und im IE nicht. Wie kriege ich diesen Spalt weg.
-
hast mal testhalber probiert, ein div auf eine zeile zu schreiben? passiert das dann immernoch?
ansonsten, kein plan - kenne das problem nicht.
Markiert ihr die beiden Texte von oben nach unten, sieht man im Mozilla einen Spalt zwischen den Markierungen, und im IE nicht. Wie kriege ich diesen Spalt weg.
-
hast mal testhalber probiert, ein div auf eine zeile zu schreiben? passiert das dann immernoch?
Verstehe ich nicht ganz.
Ansosnten, ist das bei euch nicht so, wenn ihr den letzten Code ausführt?
-
hast mal testhalber probiert, ein div auf eine zeile zu schreiben? passiert das dann immernoch?
Verstehe ich nicht ganz.
Ansosnten, ist das bei euch nicht so, wenn ihr den letzten Code ausführt?
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>was passiert dann?
-
Er zeigt vier mal text an natürlich. Jedoch ist der Abstand zwischen diesen im Mozilla und IE anders.
-
-
-
-
Probiier mal das:
<html>
<body>
<div>
test1
</div><div>
test2
</div><div>
test3
</div></body>
</html>Gruß JB
-
Hilft nichts, ich habe im Programm aber auch keinen Einfluss drauf, wie man die DIVs anordnet.
-
-
Hi,
Markiert ihr die beiden Texte von oben nach unten, sieht man im Mozilla einen Spalt zwischen den Markierungen, und im IE nicht. Wie kriege ich diesen Spalt weg.
Gar nicht. Es sind hier keine Abstände vorhanden, sondern Mozilla läßt offensichtlich nur beim Markieren etwas Abstand zwischen den Blockelementen. Warum sollte das stören? Wenn die Elemente sinnvoll gesetzt sind, kann der Abstand sogar nützlich zur Visualisierung sein.
freundliche Grüße
Ingo-
Gar nicht. Es sind hier keine Abstände vorhanden, sondern Mozilla läßt offensichtlich nur beim Markieren etwas Abstand zwischen den Blockelementen. Warum sollte das stören? Wenn die Elemente sinnvoll gesetzt sind, kann der Abstand sogar nützlich zur Visualisierung sein.
Dann erklär mir bitte, warum Mozilla mehr Pixel braucht um die 2 test darzustellen, als der IE ? (Mach nen Screenshot von, und miss von ganz oben bis ganz unten)
-
Hi,
Dann erklär mir bitte, warum Mozilla mehr Pixel braucht um die 2 test darzustellen, als der IE ?
Wenn Du es dem Browser überläßt, welchen Wert er für line-height nutzen soll, kannst Du Dich nicht über geringfügige Abweichungen beschweren.
freundliche Grüße
Ingo-
Da kann ich schon fast nichts mehr zu sagen, man kann sich auch an einem Gedanken festbeißen.
Ich weiss, dass er einen Abstand macht, den er nicht machen soll. Und zwar in meinem richtigen Code, den man weiter oben begutachten kann. Und in diesem DIV sind Bilder, Texte, Links und eigene Variablen definiert. Im IE macht er keinen Abstand zwischen den DIVs , und im Mozilla macht er einen 1 px hohen Abstand. Das Merke ich daran, dass die Bilder ineinander übergreifen.
Kann man das bitte als gesetzt betrachten, sonst dreh ich noch durch, das weiter in verschiedenen Beispielen zu erklären. Auch bei Line-heigth macht er den Abstand, und die beiden DIVs sind unterschieldich hoch. Mir ist auch egal wie hoch die sind, ich will nur diesen Spacer wegbekommen.
Es ist der selbe Spacer, wie bei Tabellen und ähnlichen zeugs mit Bildern drin. Da macht der Moz (oder vllt sogar der IE) einen weisssen Abstand zwischen den Bildern. Es ist auch von Vesion zu Version verschieden, da dieser Fehler ziemlich wahllos auftritt.
-
Halejulia, es lag am line-Height.
Danke.
-
Hello again,
Ich weiss, dass er einen Abstand macht, den er nicht machen soll.
Nein tut er nicht!
Siehe: http://img251.imageshack.us/img251/3553/nixabstand4bz.jpgMein anderes Posting mit Code (der verdeutlicht dass er keinen Abstand macht, wenn man alle Variablen aussschließt die der Browser selbst wählt, wenn man keine Angaben macht):
http://forum.de.selfhtml.org/?t=130716&m=845288
Kann man das bitte als gesetzt betrachten.
Nö, weil ich da keinen Abstand sehe. Wenn Du dem Link oben folgst, mit diesem Code habe ich inzw. nichtmal einen Abstand wenn ich Deine Markierungsmethode anwende.
-
-
-
http://img251.imageshack.us/img251/3553/nixabstand4bz.jpg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>_</title></head><body> <div style="border-style:solid; border-width:1px; border-color:black; font-size:11px; line-height:11px;"> test </div><div style="border-style:solid; border-width:1px; border-color:red; font-size:11px; line-height:11px;"> test </div> <hr> <div style="background-color:black; font-size:11px; line-height:11px;"> test </div><div style="background-color:red; font-size:11px; line-height:11px;"> test </div> </body></html>So jetzt mal mit Schriftgröße und Zeilenabstand (in px zu Veranschaulichung und um Variablilität auszuschließen). Ohne Vorgabe macht jeder Browser wie er denkt. Woher soll er auch wissen wie.
Wie das Bild (http://img251.imageshack.us/img251/3553/nixabstand4bz.jpg) zeigt, die Höhen sind identisch, da ist kein Abstand zwischen den DIVs. Ja. Der Text im IE sitzt einen Pixel höher als im Mozilla. Wenn Du damit nicht leben kannst ist HTML für Dich das falsche (evtl. kann man diesen Umstand sogar ausbügeln indem man nicht den selben Wert 11px für Schriftgröße und Zeilenabstand nimmt, was sowieso nicht klug ist).
-
-
-
Hmmm...
Markiert ihr die beiden Texte von oben nach unten, sieht man im Mozilla einen Spalt zwischen den Markierungen, und im IE nicht. Wie kriege ich diesen Spalt weg.
Da markieren die Browser den Text unterschiedlich, das sagt aber nichts über die Abstände der DIVs aus.
Da ist da kein Spalt, wenn man es mal zur besseren Kontrolle mit Hintergrundfarben oder Rändern versieht.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Spalte?</title></head><body>
<div style="border-style:solid; border-width:1px; border-color:black; margin:0px;">
test
</div><div style="border-style:solid; border-width:1px; border-color:red; margin:0px;">
test
</div><div style="background-color:black; margin:0px;">
test
</div><div style="background-color:red; margin:0px;">
test
</div></body>
</html>-
Die DIVs mit Background haben natürlich keinen weissen Abstand zwischen dirn, sondern eben einen farbigen, deswegen sieht man diesen Abstand wohl nicht. Wenn man alles markiert, erkennt man den Abstand denn der Mozilla macht. Ich glaube, dass dieser Abstand exestiert, weil ich eben genau das Problem habe, dass es einen 1 Pixel breiten Abstand unter meinen Divs gibt.
Wenn man ganz genau hinguckt, ist die Mozilla-Ausgabe tatsächlich höher als im IE.
-
Hmm..
Wenn man ganz genau hinguckt, ist die Mozilla-Ausgabe tatsächlich höher als im IE.
Wenn Du dem Text eien Schriftgröße in Pixeln gibst (nur zum Test) und allen DIVs die selben width, height, padding, margin-Werte und Dein HTML DTD strict ist sollte es exakt identisch sein. In transitional wurstelt der IE evtl. was lustiges zusammen, das kann schon sein.
Es kann sein das browser etwas einen Pixel höhe rmachen, ja! Aber ABSTAND ist da immernoch keiner! Die beiden DIVs sitzen genau aneinander. Sonst wäre da eine weiße Lücke dazwischen! Der hintergrund geht nicht drüber hinaus. Es ist vielleicht einen Pixel höher, das DIV mit dem Hintergrund. Aber da ist kein Abstand!
-
-
-
-
HAllo,
also als erstes: IE ist keine Referenz! auch wenn viele den browser nutzen, empfehle ich dir das auf firefox zu entwickeln und dann für den IE zu customizen...
Also meine Empfehlung ist, alle Browser einzustampfen, und nur noch einen zu entwickeln. Scheiss customizen, beide Brwoser sind einfach bescheuert gemacht, da hab ich paar heiße Geschichten, aber zu beiden. :P
Ja. Mein Reden.
Aber, auch wenn ich es erst auch nicht glauben wollte der Mozilla-basierte Kram ist weitgehnd W3C-konform. Macht es also so wie es sich gehört. Paar Ausnahmen findet man sicher. Oder Punkte wo man persönlich mit dem W3C nicht einverstanden ist.
Ich hatte probleme damit einzusehen dass
width 100 + padding 5 + margin 5 = 110 ist (Opera, Mozilla; W3C)
und nicht immernoch 100 wie im IE.
Ich fand den IE logischer, aber wenn man weiß dass es genau anders ist, ist das halt auch so ok.IE als Vorschau-Browser macht nur Ärger! Besser erst korrekt coden und im Firefox testen und dann schauen was der IE anders macht. Mit der Methode hat man meistens Safari, Konquerer, Opera auch gleich erschlagen.
-
-
-
also als erstes: IE ist keine Referenz! auch wenn viele den browser nutzen, empfehle ich dir das auf firefox zu entwickeln und dann für den IE zu customizen...
gebe mal ne größe für die divs an. denn die sind nur so groß für den browser, wie eine zeile hoch ist. wenn das zufällig im IE hinkommt, muss das lange keine absicht sein.
was ist der weiße abstand? ein extra border? irgendein margin? oder die hintergrundfarbe?
ist in dem div ein <p></p>, kann das mit deinem abstand passieren.
ansonsten zeige mal ein stückchen html, wo die divs angesiedelt sind... die übergänge sind interessant
m.
Im IE wird alles richtig angezeigt, jedoch im wird im FireFox unter jedem Div ein kleiner weisser Abstand angezeigt...
sieht jemand den Fehler oder gibts da nen extra Befehl, wie bei Bildern (display:block)?
Danke für jede Hilfe.
Gruß
Anton
-
Hallo,
display:block macht aus inline-Elementen block-Elemente, wenn ich mich nicht irre. Wenn diese dann ohne Abstand angezeigt werden ist das vermtulich eher ein Nebeneffekt.
Aber der vergleich zu Bildern ist vermutlich gar nicht so falsch.
[code sprache=sprache]
<img ...> <img ...> <img ...>
[/code]-> (bild) _ (bild) _ (bild)
Dürfte Bilder mit Abständen in vielen Browsern ergeben
macht man sich seinen Code unübersichtlich, indem man die Leerzeichen entfernt, sitzen sie auf Stoß.
<img ...><img ...><img ...>-> (bild)(bild)(bild)
Vielleicht ist es bei Deinen DIVs ähnlich?
Bin etwas eingerostet was HTML/CSS angeht. Warum das so ist (war? vielleicht hat sich da ja inzw. was geändert?) habe ich nie so richtig begriffen. Aber ich bin mir siche rhier im Forum findet sich jemand der das erklären kann (mit hatte mal ein Informatiker/Programmierer das erklärt, aber ich habe es damals nicht verstanden :) )