✔ Bild neben Text

[Superdok]

Hi,
also normalerweise eine einfache Angelegenheit einen Text neben einem Bild laufen zu lassen. Also ich habe ein Bild

<img src="PFAD" alt="Bild" class="image"  />Das hier ist ein wenig Text, der neben dem Bild erscheinen soll und somit das Bild umfliesst.

und wende darauf ein "float: left" an. Da zwischen Bild und Text noch ein kleiner Rand sein soll, wird noch "margin-right:5px" benutzt
img.image { float:left; margin-right: 5px; }

Funktioniert in eigentlich jedem Browser bei mir, außer dem IE 6 und ich glaube auch IE7. Was ist die einfachste Lösung im IE ein Text neben dem Bild laufen zu lassen und dazwischen einen Abstand von 5 px zu haben. Wenn ich

<img align="left" />

probiere funktioniert es natürlich, gibts da auch ein CSS Variante davon? Und der margin neben dem Bild wird auch nicht interpretiert vom IE6. Gibt es noch eine andere Möglichkeit ohne ein div um das Bild diese Sache effektiv zu lösen mittels CSS (ohne um das Bild einen unsichtbaren Rand zu machen usw.)?

 

[Maik]

Da zwischen Bild und Text noch ein kleiner Rand sein soll, wird noch "margin-right:5px" benutzt
img.image { float:left; margin-right: 5px; }

Funktioniert in eigentlich jedem Browser bei mir, außer dem IE 6 und ich glaube auch IE7.

[...]
Und der margin neben dem Bild wird auch nicht interpretiert vom IE6.

Kann ich alles bei mir nicht bestätigen:



... und hier mal spaßeshalber mit 15px Abstand:



Die IE7-Schnappschüsse erspare ich mir jetzt.

http://de.selfhtml.org/html/grafiken/anzeige/img_css.htm wird vom IE6 u. IE7 ebenso korrekt interpretiert.

mfg Maik

 

[Superdok]

Ok danke, da ich hier mit Vista arbeite läuft bei mir kein IE6 und ich muss das Ganze per IE-Tester testen. Möglicherweise macht er das einfach nur falsch

 

[Maik]

Falls der IE-Tester tatsächlich soweit von den normalen IE-Versionen entfernt ist (was ich mir in diesem Anwendungsfall eigentlich nur schwer vorstellen kann), und du im Besitz einer WinXP-CD bist, kannst du dir auf deinem System virtuelle PCs mit diesem OS einrichten, und in ihnen jeweils die "Vollversion" des IE6 und IE7 nutzen.

mfg Maik

 

[Superdok]

Ich habe gerade den virtuell PC installiert mit einer IE 6 Version. Dort tritt das gleiche Problem auf, wie auch in dem Tester.
Habe mein Problem aber gefunden. Meine Klasse hieß "_image", nciht nur wie oben falsch geschrieben "image". Wie es scheint kann der IE6 dies nicht intepretieren, ohne "_" gehts nämlich. Vielen Dank nochmal.
Da habe ich aber gleich das nächste Problem mit dem IE:
Ein div soll über einem Bild positioniert werden. Dieses Div enthält Inhalt

<div class="element_videocontent"> <img src="images/example_image7.png" />
        <div class="element_videodescription">
          <ul>
            <li class="left"><a href="">zurück</a></li>
            <li class="right"><a href="">weiter</a></li>
          </ul>
        </div>
      </div>

.element_videocontent { 
	position:relative;
	z-index: 1;
	margin-top: 10px;
	width: 205px;	
}
.element_videodescription {
	position:absolute;
	bottom: 0;
	width: 205px;
	z-index: 10;
	left: 0;
}
.element_videodescription ul li.left { display: inline; margin-left: 10px; list-style-type: none; float:left; list-style-stype: none; }
.element_videodescription ul li.right { display: inline; margin-right: 10px; list-style-type: none; float:right; list-style-stype: none; }
.element_videodescription ul li a { float:left; text-decoration: none; color:#FFFFFF; font-variant: small-caps; display: block; line-height: 20px; background-color: #5a5a5a; padding-left: 5px; padding-right: 5px;}
.element_videodescription ul li a:hover { background-color: #e8620b;}

Funktioniert im FF und anderen modernen Browsern super, im IE kommt es allerdings zum Anzeigefehler, siehe unten (die Boxen sind 1px zu weit unten, im FF allerdings richtig)

 

[Maik]

Deklarier display:block für das <img>-Element, damit die Whitespaces vor / hinter diesem Inline-Element im HTML-Code nicht interpretiert / ausgegeben werden.

mfg Maik

 

[Superdok]

Danke damit wären alle Fragen wieder beantwortet