IE verschiebt Divs mit kleinen Grafiken

shuser · 17. Juli 2006

Ok, zugegeben, zumindest das Oberthema gabs hier schon.
Aber nicht wirklich in Kombination mit kleinen Grafiken...
Ich habe ein eher unlustiges Phänomäen an meinem neuen Websitelayout beobachtet.

Im FF sieht's aus wie's aussehen soll ( nichts Neues also...).
Im IE ist es ein Krampf:
Sehr kleine Divs mit eingebauten Grafiken werden ein paar Pixel verschoben.
Ich benutze aber keine relativen oder sonstige float-was-weiß-denn-ich Befehle im Code bzw in der Css...
Auch ist die Seite nach W3C valide (was im IE ja nicht viel heißt, i knoff-.-).
Hier mal so ein verschobenes Element:

Code:

<Div Id="homeboxobenre"> <Img Src="images/Slice_home_box_rechts_oben.gif" Width=8 Height=13 Alt="home-box-rechts-oben"> 
</Div>

Code:

#homeboxobenre {
	position:absolute;
	left:918px;
	top:388px;
	width:8px;
	height:13px;
}

Wie gesagt, es sind nur sehr kleine Elemente betroffen...(etwa unter 14px Breite und Höhe, genau weiß ich es nicht...).
Dass es mit den Grafiken zusammenhängt, weiß ich relativ sicher, da ich testweise die Grafik mit einer bg-Farbe ersetzt habe und siehe da- dann klappte es wieder...
Kennt wer das Problem?

dkdenz · 17. Juli 2006

Hi.
Erstmal fällt auf, das Du den Pics nur ein width (und das ohne "") und kein zusätzliches height mitgibst.
Dann wäre es sicherlich interessant, wenn Du in Deiner CSS den Pics und dem #homeboxobenre das mitgeben würdest:

img {
margin:0px;
padding:0px;
border:0px;
}
#homeboxobenre {
margin:0px;
padding:0px;
}

shuser · 17. Juli 2006

Das sind die Randangaben, stimmt's ?
Warum interpretiert der böse IE das nur bei den kleinen Divs/Grafiken falsch?

Wie dem auch sei, ich habe deinen Rat befolgt:

Code:

Code:

<Div Id="homeboxobenre"> <Img Src="images/Slice_home_box_rechts_oben.gif" Alt="home-box-rechts-oben" class="homeboxobenre"> 
</Div>

Css:

Code:

#homeboxobenre {
	position:absolute;
	left:918px;
	top:388px;
	width:8px;
	height:13px;
	margin:0px;
    padding:0px;

}

.homeboxobenre {
margin:0px;
padding:0px;
border:0px;
width:8px;
height:13px;

}

Es tut aber nicht so, wie es soll und wie es der Firefox nach wie vor anzeigt...

dkdenz · 17. Juli 2006

Kannst Du mal einen Link posten oder das Ganze in einem kompletten Quelltextgerüst?
Wäre echt hilfreich...

shuser · 17. Juli 2006

dkdenz schrieb:
Kannst Du mal einen Link posten oder das Ganze in einem kompletten Quelltextgerüst?
Wäre echt hilfreich...

Nun, ja- ich bin gerade dabei, meine Website grafisch komplett neu aufzulegen...
Hochgeladen habe ich das Layout daher noch nicht, werde es jetzt aber wohl mal tun...

Wart' ein Weilchen^^

Ok, "es" ist online, aber wundere dich bitte nicht über horrende Größen der Grafiken und des Codes- ist halt noch Beta, erstmal müssen die Funktionen stimmen, dann kommt die Optimierung ( obwohl- geht eigentlich ??)
Beispiel

Das/ Die Probleme wirst du sehen, wenn du in den IE-Mode wechselst.../den IE startest

dkdenz · 17. Juli 2006

Also, in Firefox, Opera, Mozilla sieht's gut aus (unter Linux).
Das ich das im IE nicht beurteilen kann, siehst Du ja schon in meiner Klammer..

Tut mir leid, das ich Dir imho nicht weiterhelfen kann...

shuser · 17. Juli 2006

dkdenz schrieb:
Also, in Firefox, Opera, Mozilla sieht's gut aus (unter Linux).
Das ich das im IE nicht beurteilen kann, siehst Du ja schon in meiner Klammer..
Tut mir leid, das ich Dir imho nicht weiterhelfen kann...

Ok, das Problem ist mir ja auch ein ziemliches Rätsel.
Ich habe schon Stunden gegooglet, in Foren gesucht- vergebens...

Zum Inhalt deiner Klammer: "gute Wahl"^^ Nein, ich habe Xp aus dem gleichen Grund wieden IE( obwohl ich den nie benutze, wenn dann immer nur mit IE-Enginge Plugin "IE-Tab"!!!)- es haben einfach sehr viele Leute diese Software.

Und außerdem gibt's dafür ja auch so viele Viren, Spyware usw.
Darauf möchte ich einfach nicht mehr verzichten...^^

Wo mir aber bestimmt wer mit/bei helfen kann, diesen Fehler zu finden:

Code:

<a href='javascript:window.external.addFavorite("http://www.domain.de", "www.domain.de :: Pipapo")' title="Lesezeichen setzen/zu den Favouriten hinzufügen"><Img Name="index_bootmark" Src="images/index_bootmark.gif" onMouseover="this.src='images/index_bootmark-over.gif'" onMouseout="this.src='images/index_bootmark.gif'" Width=8 Height=8 Border=0 Alt="index_bootmark"></a>

"Die URI enthält unzulässige Zeichen"

Wo liegt da der Fehler?

Und vor allem:
Wer kann mir bei meinen Hauptproblemen Png-Transparenz und Div/Grafik-Verschiebung im IE weiterhelfen?

So viele Fragen...

planet4 · 18. Juli 2006

Hallo,

also ich hab jetzt mal mit dem IE6 draufgeschaut: ich sehe keinen Unterschied zur Version in Firefox
(treten diese Fehler nur in den 5er Versionen vom IE auf?)

Das einzige, was natürlich sofort ins Auge sticht, ist das png rechts oben, wirst du wohl ein gif draus machen müssen...

Die Tesafilmstreifen gefallen mir gut

"Die uri enthät unzulässige Zeichen" ist doch ne klare Aussage... nimm die Doppelpunkte und vor allem die Leerzeichen weg

[edit] jetzt hab ich's doch noch entdeckt: die eine Linie unterhalb von "Home" sitzt im IE etwas höher... [/edit]
planet4.

shuser · 18. Juli 2006

planet4 schrieb:
Hallo,

also ich hab jetzt mal mit dem IE6 draufgeschaut: ich sehe keinen Unterschied zur Version in Firefox
(treten diese Fehler nur in den 5er Versionen vom IE auf?)

Das einzige, was natürlich sofort ins Auge sticht, ist das png rechts oben, wirst du wohl ein gif draus machen müssen...

Die Tesafilmstreifen gefallen mir gut

"Die uri enthät unzulässige Zeichen" ist doch ne klare Aussage... nimm die Doppelpunkte und vor allem die Leerzeichen weg

[edit] jetzt hab ich's doch noch entdeckt: die eine Linie unterhalb von "Home" sitzt im IE etwas höher... [/edit]
planet4.

Holy***
Ich habe den IE 5.2

Fällt mir gerade so auf *lach*
ok- das werde ich wohl mal updaten müssen^^
Gut- Erstmal danke für dein Lob.War ein hartes Stück Arbeit, es hat sich aber gelohnt...
Ja, die Linie sitzt höher, zumindest sieht es so aus

In Wahrheit sitzen die beiden Ecken zu niedrig...

Und was meinst du mit "Doppelpunkte weg machen"?

Und in meiner IE-Version gibt es dieses Problem eben mit mehreren Grafiken

Wie kann ich das lösen?

Und zum PNG: Es ist einfach unmöglich, daraus ein Gif zu machen!!!
Dann sieht die Ecke sowas von schlecht aus

Ich werde wohl auf den IE 7 final setzten müssen...!

miniA4kuser · 19. Juli 2006

Moin moin,

warum soll es unmöglich sein aus dem png ein gif zu machen?

Und auf IE7 setzen bedeutet ja wohl, dass IE-Konform ja eh nicht so wichtig scheint.

Ich denke mal, das hängt mit der Positionierung und dem sog. Box-Modell des IE's zusammen.
Ich vermute auch mal, das bei einem Screenshot-Vergleich, fast alle Div-Boxen von der Grösse her abweichen bzw. leicht verschoben sind. Nun das ist ja grade das Gefährliche bei solchen "Pixellayouts". Bin ich auch schon selber drübergefallen.

Richtig sinnvoll wäre der gesammte Quellcode inkl. Verzeichnisse mit den CSS- und JS-Dateien. Z.B. als Zip-Archiv zum Downloaden. Dann könnte man mal in aller Ruhe auf Fehlersuche gehen.

shuser · 19. Juli 2006

miniA4kuser schrieb:
Moin moin,

warum soll es unmöglich sein aus dem png ein gif zu machen?

Und auf IE7 setzen bedeutet ja wohl, dass IE-Konform ja eh nicht so wichtig scheint.

Ich denke mal, das hängt mit der Positionierung und dem sog. Box-Modell des IE's zusammen.
Ich vermute auch mal, das bei einem Screenshot-Vergleich, fast alle Div-Boxen von der Grösse her abweichen bzw. leicht verschoben sind. Nun das ist ja grade das Gefährliche bei solchen "Pixellayouts". Bin ich auch schon selber drübergefallen.

Richtig sinnvoll wäre der gesammte Quellcode inkl. Verzeichnisse mit den CSS- und JS-Dateien. Z.B. als Zip-Archiv zum Downloaden. Dann könnte man mal in aller Ruhe auf Fehlersuche gehen.

Das siehst du richtig- IE optimiert muss das Ganze halt nur "augenscheinlich" sein...
Mal ernst: Warum unnötig Zeit und wolmöglich Firefoxperformance vergeuden, wenn MS innerhalb ein, zwei "Updates" alles wieder über den Haufen wirft?

Mir ist das mit dem Box-Modell auch schon aufgefallen...
Die Verschiebung ist zu beobachten!
Nur sind manche "Mini"-Grafiken scheinbar davon "verschont", manche wiederum nicht.

Ich denke, dass das Design soweit ganz i.O ist, ich dachte nur, dass das Problem vielleicht klar "auf der Hand" läge, so denke ich mir aber, dass ich es auch so publishen kann.
Dumm mit dem Png ist es zwar, aber sonst- ok.
(Klar kann ich das als Gif machen, aber dann ist der Rand sehr unschön

.
Habe es schon mehrfach mit verschiedenen Farb-und Kompressionsstufen+Dithereinstellungen probiert

Natürlich sind Pixeldesigns immer "gefährdet", nur meist halt nur vom IE ( oder Nachamern ala Opera^^)...

Aber es sieht einfach auch sehr schön aus ( was nicht heißt, dass ein schlichtes Design mit wenig grafischen Elementen nicht auch schön sein kann...) und es kann ja auch nicht "angehen", dass man sich wegen dem IE einschränken muss.
Da kann ich nur sagen: Firefox rulez! :amazed:
Wenn mein Design im FF "haken" würde- ok, aber dort sieht es ja ganz passabel aus...

Ok- aber danke für deinen Rat

!!!

shuser · 19. Juli 2006

Die Beta 3 des IE 7 habe ich nicht installieren können(nach dem 8. Neustart habe ich es dann aufgegeben, immer).
Microsoft hat für diesen Fall bereits vorgesorgt und stellt eine Hilfeseite zur Verfügung, auf der man sich durch kilometerlange Registrypatch-Arbeit wühlen soll^^

Die spinnen doch

Kriegen's nicht gebacken, einen ordnentlichen Browser zu entwickeln und aus Frust releasen sie andauernd nicht-funktionierende /installierbare Betas

planet4 · 19. Juli 2006

Guten Morgen,

hier mal dein bannerrechts.png als .gif, ich seh da kaum einen Unterschied... aber vielleicht seh ich schlecht

(das falsch dargestellte png im IE sieht jedenfalls uncool aus

planet4

planet4 · 19. Juli 2006

... was mir gerade noch einfällt: du hast ja auf der Seite eine einheitliche Hintergrundfarbe,
warum muss das BIld da überhaupt transparent sein, ersetz doch einfach die Transparenz
mit dieser Farbe...

planet4.

shuser · 20. Juli 2006

planet4 schrieb:
... was mir gerade noch einfällt: du hast ja auf der Seite eine einheitliche Hintergrundfarbe,
warum muss das BIld da überhaupt transparent sein, ersetz doch einfach die Transparenz
mit dieser Farbe...

planet4.

Dann hast du aber das "Trickige" (^^) noch nicht bemerkt

Das Banner "wandert mit".
Es verschiebt sich je nach Auflösung, und weil die meisten wahrscheinlich 1024x768 haben, MUSS es transparent sein, da es ansonsten die anderen divs überlappen würde...
Ändere einfach mal das Browserfenster...

#

Zu deinem Bild.
Erstmal danke für deinen Einsatz, aber hast du es mal auf der Hintergrundfarbe angeschaut (#A2966D)?
Natürlich offenbart sich der weiße Rand erst, wenn der BG nicht weiß ist

Und genau da ist da Problem.
Klar- im IE ist das nicht hinnehmbar, aber dass dafür die Firefoxversion leiden muss...

René · 20. Juli 2006

... besser bzw. das *.png sollte im IE usw. transparent sein?

planet4 · 20. Juli 2006

shuser schrieb:
Dann hast du aber das "Trickige" (^^) noch nicht bemerkt

nein, ich hatte es tatsächlich nicht bemerkt

aber ganz so trickie find ich das jetzt nicht: bei 800x600 verschwindet dein Banner hinter diesem
google-div...

shuser schrieb:
aber hast du es mal auf der Hintergrundfarbe angeschaut (#A2966D)?

klar hab ich das, hab mir das gif auch auf dieser Farbe
angeschaut und fand es okay, aber das ist, wie so oft, Ansichtssache... :

)

planet4

miniA4kuser · 21. Juli 2006

Moin moin,

in deiner index.css haste doch ganz oben eine generelle Definition für deine div's:

Code:

DIV {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;
}

Probier doch mal diese Stylaangabe um folgendes zu erweitern:

Code:

DIV {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;
       [B][COLOR=Red]FONT-SIZE: 0;[/COLOR][/B]
}

IE verschiebt Divs mit kleinen Grafiken

shuser

New member

dkdenz

New member

shuser

New member

dkdenz

New member

shuser

New member

dkdenz

New member

shuser

New member

planet4

New member

shuser

New member

miniA4kuser

Lounge-Member

shuser

New member

shuser

New member

planet4

New member

Anhänge

planet4

New member

shuser

New member

René

New member

Anhänge

planet4

New member

miniA4kuser

Lounge-Member