Ich habe hier folgende Seite:
http://doggen.kabbecks.de/cms/front_...t.php?idcat=15

Dort ist das Bild im Text mit folgenden Tags hinterlegt:

HTML-Code:

	<p><img class="bildLinks" style="float: left;" title="Deutsche Dogge Angelo" alt="Deutsche Dogge Angelo" src="upload/Angelo/Angelo.jpg" width="200" height="142"></p>

Die CSS-Klasse sieht so aus:

HTML-Code:

.bildLinks    {border:1px solid #aaa; margin-right: 10px;}
.bildRechts   {border:1px solid #aaa; margin-left: 10px;}

Was mich wundert ist halt, das zwar der Border aus der Klasse übernommen wird, nicht aber der margin-Befehl.
Trag ich über firefox>>Firebug in dem style-tag dann margin-left:10px; ein, geht es. Kann mir jemand sagen, wo ich da die Denkblockade habe?

Hi,

wenn ich zu Testzwecken unmittelbar nach dem Grafikelement .bildLinks einen "Dummy-Text" innerhalb des Textabsatzes einfüge, besitzt dieser den festgelegten Außenabstand zur rechten Flanke der Grafik.

Code :

1	<p><img class="bildLinks" style="float: left;" title="Deutsche Dogge Angelo" alt="Deutsche Dogge Angelo" src="upload/Angelo/Angelo.jpg" width="200" height="142">"Dummy-Text"</p>

mfg Maik

Allgemein, arbeiten sich die meißen Engines von Oben nach unten, und da der Stylesheet im Head eingebunden wird, sollte er von dem Styleattrib. in jedem browser über schrieben werden.

Wies im Firefox funktioniert kannst du ganz schnell mit dem praktischen AddOn FireBug testen.

Zitat von Security

da der Stylesheet im Head eingebunden wird, sollte er von dem Styleattrib. in jedem browser über schrieben werden.

Da bist du aber falsch informiert, denn die enthaltenden Regeln für die Klasse im zentralen Stylesheet würden nur dann vom Inline-Style überschrieben werden, wenn sich darin die gleichlautenden CSS-Eigenschaften mit anderen Wertangaben wiederfinden.

Da im style-Attribut aber nur die float:left-Deklaration angegeben ist, kann diese die border- und/oder margin-Deklaration auch nicht überschreiben, sondern erweitert in diesem Fall die bestehende CSS-Formatierung für das Element.

mfg Maik

Zitat von Security

Allgemein, arbeiten sich die meißen Engines von Oben nach unten, und da der Stylesheet im Head eingebunden wird, sollte er von dem Styleattrib. in jedem browser über schrieben werden.

Wies im Firefox funktioniert kannst du ganz schnell mit dem praktischen AddOn FireBug testen.

Ja, das kenn ich auch so, aber er darf nur überschreiben, was ausdrücklich überschrieben werden soll.

Also wenn im class border:1 steht, und im style border:2 dann ist das ok. Aber wenn im Style-Tag color:#000 steht, darf der border, der in class definiert wurde dochnicht aufgehoben werden ?!

Zitat von Maik

Da bist du aber falsch informiert, denn die enthaltenden Regeln für die Klasse im zentralen Stylesheet würde nur dann vom Inline-Style überschrieben werden, wenn sich darin die gleichlautenden CSS-Eigenschaften mit anderen Wertangaben wiederfinden.

Da im style-Attribut aber nur die float:left-Deklaration angegeben ist, kann diese die border- und/oder margin-Deklaration auch nicht überschreiben.

mfg Maik

Ah, ok, du warst schneller

Aber nochmal zu deiner Antwort. Ich hab es mal mit firebug versucht (diesen Dummy-text einzufügen, der macht genau das gleiche ... also kein abstand zwischen bild und text



###################

Ah, ich habs. Weil das Bild in einem separatem <p> tag ist, und der darauffolgende Text auch in einem separatem <p>-Tag.
Aber müsste denn nicht trotz p-Tag ein Rand um das image erzeugt werden?

Nee, doch nicht... man was n ärger!

Wovon hab ich denn bitte geredet, macht mich nicht schwach.

Am anfrang stehen die Browserstandarts, dann kommt das der Headstylesheet und dann Inline, und es werden immer nur die überschreiben, die man explizit anwählt, das ist jawohl klar, das nichts prötzlich wieder auf den Browserstandart zurückgesetzt wird.

Man man man.

Zitat von Security

Wovon hab ich denn bitte geredet, macht mich nicht schwach.

Am anfrang stehen die Browserstandarts, dann kommt das der Headstylesheet und dann Inline, und es werden immer nur die überschreiben, die man explizit anwählt, das ist jawohl klar, das nichts prötzlich wieder auf den Browserstandart zurückgesetzt wird.

Man man man.

Gut, wenn du das so gemeint hast, dann hast du mein Posting scheinbar nicht aufmerksam gelesen. Denn die Styles hab ich ja gepostet, und da könnte keine Überladung stattfinden

So, ich hab jetzt einfach mal die Rahmenfarbe geändert und den rechten Außenabstand auf 50px erhöht - et voilà:



Das ist der FF2-Screenshot, der hier stellvertretend für alle übrigen gängigen Browser steht, die auf meinem System zur Verfügung stehen.

Und das ist der Quellcode meiner Testseite anhand deiner Angaben:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta name="author" content="Maik"> <title>tutorials.de | demo_rethus</title>   <style type="text/css"> .bildLinks    {border:1px solid red; margin-right: 50px;} .bildRechts   {border:1px solid #aaa; margin-left: 10px;} </style>   </head> <body>   <br><br><br><br><br><br><br><br><br> <p><img class="bildLinks" style="float: left;" title="Deutsche Dogge Angelo" alt="Deutsche Dogge Angelo" src="panel.jpg" width="200" height="142">Dummy-Text</p>   </body> </html>

Wenn bei dir die margin-right-Deklaration nicht zum Tragen kommt, dann wohl eher durch eine gleichlautende Regel im zentralen Stylesheet.

mfg Maik

Ja ich gebe zu ich habe es nicht richitg gelesen. Sorry.

Nagut, aber das Problem ist nicht neu.
Du hast schon vorhermal margin: 0; angegeben, du musst jetzt in der Class margin: 0 0 0 10px; angeben, dann sollte es gehen.

Problem ist, das der Firefox da anscheinend immer margin nimmt und durch margin-richtung sich nicht überschrieben fühlt.

LG John

Code :

1 2 3

#seiteninhalt img {     margin: 0px; }

ist die Wurzel des Übels, die sich durch eine gleichlautende Spezifizierung der beiden Klassen-Selektoren ziehen lässt:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13

#seiteninhalt .bildLinks{     border:1px solid #aaa;     margin-right: 10px;     padding:5px;     float:left; }   #seiteninhalt .bildRechts{     border:1px solid #aaa;     margin-left: 10px;     padding:5px;     float:right; }

mfg Maik

Oder so, FireBug machts möglich

Zitat von Maik

Code :

1 2 3

#seiteninhalt img {     margin: 0px; }

ist die Wurzel des Übels, die sich durch eine gleichlautende Spezifizierung der beiden Klassen-Selektoren ziehen lässt:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13

#seiteninhalt .bildLinks{     border:1px solid #aaa;     margin-right: 10px;     padding:5px;     float:left; }   #seiteninhalt .bildRechts{     border:1px solid #aaa;     margin-left: 10px;     padding:5px;     float:right; }

mfg Maik

Ne, das scheint auch nicht die Lösung zu sein. Denn wenn ich den margin rausnehme, ändert sich im Verhalten <p> und <img> auch nichts.

Würde mich aber auch nicht wundern, wenn es am FF3 liegt, der ist ohnehin total schrott - schmiert an dauernd ab.

Ich schreib ja nicht zur unterhaltung, schonmal mit margin:0 0 0 10px; versucht?

Ja, hab ich versucht, bringt nichts, weil margin-left das gleiche Ergebnis hat.
Obwohl ich das wusste hab ich es mal probiert, und siehe da es geht nicht!

Habe jetzt im Stylesheet noch ein versteckte img-tag style gefunden, scheint daran gelegen zu haben, denn jetzt gehts.

(oder es hat geholfen, die ganzen plugins aus FF3 rauszuwerfen