Viennamade: Abstand li - FF vs. FF

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

  1. 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

    --

    _ - jenseits vom delirium - _
    <hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
    Nichts ist unmöglich? Doch!
  2. Hallo wiederum,

    _________
    |       |  Name
    | Bild  |  Funktion
    |       |  Tel
    +-------+  Mail
    _________
    |       |  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

    1. 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

      --

      _ - jenseits vom delirium - _
      <hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
      Nichts ist unmöglich? Doch!
      1. Hallo alle!

        Sind die in diesem Thread beschriebene IE-Probleme ein Fall von [hasLayout}?

        Viele Grüße aus Frankfurt/Main,
        Patrick

        --
        [image:http://www.atomic-eggs.com/clubsig.gif](http://onhavinglayout.fwpf-webdesign.de/)
        _ - jenseits vom delirium - _
        <hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
        Nichts ist unmöglich? Doch!