Moin moin,

ich weiß nicht genau, ob es sich bei meinem Problem um ein css- oder html-Problem handelt.
Ich habe eine Seite mit einem Text erstellt, in dem einige Bilder eingefügt wurden. Ich wollte nun um die Bilder einen 0815 Rahmen haben (border: 1px solid white; ). Da ich aber unter dem Bild noch eine Bildunterschrift hingesetzt gabe, wollte ich den Rahmen nicht nur um das Bild herum haben, sondern um das Bild incl. Bildunterschrift. Sollte eigendlich ja kein Problem sein, Bild und Schrift in einen Kontainer und um den Kontainer meinen Rahmen. Das ganze sollte dann auch zentriert auf der Seite dargestellt werden.

1. Versuch beides in einen div-Kontainer. Dabei wird der Rahmen nicht genau im das Bild gezeichnet, sondern hat in einigen Browsern die Breite der ganzen Seite. Sonst aber in allen Browsern (FF,O,IE) alles OK.

2. Versuch beides in eine span-Kontainer. Der IE und Opera zeigen es auch so an, wie ich mir das vorstelle, nur der FF macht 1. je einen Rahmen um das Bild und um die Bildunterschrift und 2. ist der Rahmen um das Bild viel zu klein.

Wie bekomme ich es nun hin, das es auf allen Brosern so aus schaut, wie von mir gewünscht?

Wer sich das mal anschauen möcht hier der Link zur Seite (Bitte nach unten scrollen auf dieser Seite) :

Martinsuniverse

Vielen Dank schon mal im Voraus.

PS. Warum muss immer alles zu inkompatiebel sein

Vermutlich weder noch, sondern ein Fehlen von Grundlagenwissen.

DIVs sind Blockelemente, also ist es völlig normal, denn standardmäßig (also ungefloatet und unpositioniert) füllen sie die ganze zur Verfügung stehenden Breite aus. Wenn ein Browser es nicht tut, dann
a) hast du es irgendwie verhindert (z.B. durch Floaten, Positionierung oder width-Angabe)
b) ist der Browser eventuell im Quirksmode durch fehlenden, falschem oder fehlerhaft angegebenem DOCTYPE (siehe FAQ und/oder Google)

Ein SPAN ist ein Inline-Element. Bilder standardmäßig auch. Die Box (und somit der Rahmen) eines Inline-Element ist wie wenn man mit einem Marker gedurckten Text zeilenweise markiert: Einzelne Rechtecke für jede Zeile.

In dem du dir Grundlagenwissen aneignest und wenn duu weisst was du tust (und was du willst) sauberen Code schreibst.

Durch den XML-Prolog ist der IE6 im Quirksmode. Außerdem stimmt die Angabe "UTF-8" nicht.

Schließlich enthält die Seite mehrere Fehler:

Result for http://martinsuniverse.de/projekte/new/projekte/navinachruestung/navinachruest.html - W3C Markup Validator
W3C CSS Validator results for http://martinsuniverse.de/projekte/new/projekte/navinachruestung/navinachruest.html

Robin

__________________
CSS-Rauch! Nicht einatmen!

Hallo,

Dann formoliere ich meine Frage halt anders :
ich weiß nicht genau, ob mein Problem eher mit mein unzureichendem Wissen in CSS oder HTML zu tun hat, deswegen poste ich es einfach mal in die Sektion CSS. Grundlagenwissen habe ich bestimmt. Nur leider muss ja immer rumgetrixt werden, damit es in allen Browser zu annehmbaren Ergebnissen führt. Außerdem bin ich hier in diesem Forum, um mein Grundlagenwissen zu erweitern bzw. auszubauen.

2. Den div-Kontainer, den ich probiert habe habe ich natürlich als "inline" definiert. Ok, das hatte ich vorher nicht erwähnt.

Dann interpretieren das halt der IE und Opera falsch, und der FF richtig.

100% Sauber kann der Code erst dann werden, wenn alle Browser den Code gleich interpretieren, solange dies nicht der Fall ist ist das ein Ding der Unmöglichkeit. Desegen behaupte ich einfach mal, dass auch deine Seiten nicht 100% Sauber sind, ausser du hast wirklich nur eine 0815 Seite.

Mit CSS2.1 wurde "inline-block" neu eingeführt.

Durch den Rest arbeite ich mich jetzt mal durch.

Ich weiß nicht was du da genau gemacht hast, aber es hört sich an, als entstehen die Probleme eher *durch* das herumtricksen, als anderes herum.

Dann ist deine Erklärung noch konfuser, denn ein DIV mit display: inline ist von einem SPAN vollkommen ununterscheidbar.

IE6 (und ich vermute Opera) sind wegen dem XML-Prolog im Quirksmode. Schmeiss es raus.

Hmm, es ist anderes herum. Nur 100% sauberer Code hat überhaupt eine Chance von allen Browsern gleich interpretiert zu werden.

Meine Seiten sind nicht 100% sauber, da ich für einen großen Konzern arbeite, welches lieber auf teuere Agenturen, als kleine Rädchen hört

Das ist keine Garantie, das auch alle Browser es unterstützen. Mozilla und co verstehen es gar nicht und IE nur sehr unvollständig.

Fast da

Robin

__________________
CSS-Rauch! Nicht einatmen!

Moin,

Angekommen!?

Wenn ich mir aber diverse Tutorial durchlese, stoße ich immer wieder auf in der Art "Das macht man so und, aber das ist noch zu beachten, der oder der Brower das anders interpretiert, un deswegen muss man hier und da noch was verändern".
Naja, das soll aber nicht die Diskusion hier sein.

Nun zurück zu meinem Problem. Ein div-Kontainer soll also die Wahl der Mittel sein ... OK. Nun muss ich also 1. dem Kontainer sagen, dass er nicht die volle Breite einnehmen soll und zum 2. das er zentriert sein soll.

Ich könnte also mein div-Kontainer als float definieren, dann bekomme ich aber Probleme mit der Zentrierung, der Rahmen währe aber OK.

Ich könnte aber auch dem div-Kontainer eine feste Breite geben, die Breite des Bildes. Das Ergebniss sieht so aus wie ich es haben möchte. Mich stört nur eine Kleinigkeit. Wenn ich das Bild, durch ein Bild mit einer anderen Größe ersetzte muss ich immer die Breite des div-Kontainers mit anpassen.

Gibt es noch andere Möglich keinen dies zu erreichen?

Vielen Dank schon mal für deine/eure Hilfe

ciao
Martin

Leider ist das in diesem Fall auch so.

Genau: das Problem liegt darin, eine shrink-to-fit-Breite mit einer Zentrierung zu kombinieren.
In standardkonformen Browsern erreichst du diese Darstellung mit display:table und auto-margins.
Dabei spielt der IE nicht mit; dort lässt sich dieser Effekt mit der speziellen Quasi-Inline-Block-Darstellung des IE erreichen.
Bruno Fassino hat ein Beispiel dafür parat:
Image and caption shrink-wrap and center

BTW: es wäre unheimlich hilfreich für die Helfenden hier, wenn du in solchen Fällen einen auf das Problem reduzierten Testcase zur Verfügung stellen würdest.

So, vielen Dank nachmal, so wie die Seite jetzt ist lasse ich sie einfach. Der Link von dir, Fricca ist auch sehr informativ.

Werde ich das nächste Mal beachten.

Neben bei bemerkt, der IE6 ist total witzig. Ruf man meine Seite einmal auf sieht alles ganz normal aus. Ruft man die Seite ein zweites oder drittel mal auf, ändert sich die Breite des Mittelteils, was am Hintergrund und an der Position der obersten Überschrift zu sehen ist.
Das brauch hier aber nicht weiter diskutiert zu werden, die Leute sollen lieber einen vernümpftigen Browser benutzen.

ciao
Martin