Abstand li - FF vs. FF
Viennamade
- css
Hallo liebe Leute,
ich bastle eine Seite welche Kontaktdaten in Visitkarten-Form darstellen soll:
_________
| | Name
| Bild | Funktion
| | Tel
+-------+ Mail
_________
| | Name
.....
Der Name soll oben-bündig mit dem Bild sein. Das funktioniert auch wie hier: http://de.selfhtml.org/html/grafiken/anzeige/img_css.htm.
Wenn ich aber eine Liste verwende (ein Karte = ein li) dann ist der Name nicht mehr oben bündig mit dem Bild im IE, im FF hingegen wie gewünscht.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
<!--
ul#team {list-style-type:none;list-style-position:inside;padding:0;margin:0;}
ul#team li {clear:left;padding:0;margin:0;}
ul#team img {float:left;padding:0;margin:0;width:311px;height:194px;}
ul#team p {margin-top:0;margin-bottom:0;margin-right:0;margin-left:320px;}
ul#team p.name {font-weight:bold;}
-->
</style>
</head>
<body>
<ul id="team">
<li>
<img src="http://de.selfhtml.orgg/html/grafiken/anzeige/text.png" alt="" />
<p class="name">Vorname Nachname</p>
<p class="name">Funktion</p>
<p class="name">...</p>
</li>
</ul>
</body>
</html>
Ich hoffe auf Eure Hilfe.
Beste Grüße
Viennamade
Hallo Viennamade!
Entferne den Zeilenumbruch zwischen dem img-Tag und dem ersten p:
<ul id="team">
<li>
<img src="http://de.selfhtml.orgg/html/grafiken/anzeige/text.png" alt="" /><p class="name">Vorname Nachname</p>
<p class="name">Funktion</p>
<p class="name">...</p>
</li>
</ul>
dann schuckt es der IE.
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo wiederum,
_________
| | Name
| Bild | Funktion
| | Tel
_________
| | Name
.....Wenn ich aber eine Liste verwende (ein Karte = ein li) dann ist der Name nicht mehr oben bündig mit dem Bild im IE, im FF hingegen wie gewünscht.
Mittlerweile funktionierts, wenn ich den CSS-Angaben eine width hinzugefüge ...
ul#team li {clear:left;padding:0;margin:0;width:500px}
Warum das so ist weiß ich leider nicht.
@Patrick Andrieu: Dein Hinweis brachte bei mir keine Verbesserung, trotzdem Danke.
Beste Grüße
Viennamade
Hallo Viennamade!
@Patrick Andrieu: Dein Hinweis brachte bei mir keine Verbesserung, trotzdem Danke.
Ich weiß aber jetzt auch warum und ich wollte das eben noch nachreichen :)
Ich hatte zur besseren Übersicht allen Elementen einen border verpasst (mache ich grundsätzlich immer beim Testen). Da brachte mein Vorschlag Besserung. Aber noch einen Hinweis habe ich. Wenn du list-style-none angibst, brauchst Du eigentlich list-style-position nicht.
Viele Grüße aus Frankfurt/Main,
Patrick
Hallo alle!
Sind die in diesem Thread beschriebene IE-Probleme ein Fall von [hasLayout}?
Viele Grüße aus Frankfurt/Main,
Patrick