E-Mail-Adressen bei iPhone falsch

Wuffi

Hallo,

ich habe ein Problem, das ich gar nicht nachvollziehen kann, denn es tritt ausschließlich beim iPhone auf und ich habe keins.

Kurz die Beschreibung der Situation:
Ich habe (aus einer heruntergeladenen Vorlage) eine Seite mit Mitgliedern erstellt, und es befinden sich mehrere Mitglieder jeweils in einem Container. Diese werden von links nach rechts angezeigt (wenn der Platz zuende ist, beginnt eine neue Zeile).
Jedes Mitglied ist mit einer E-Mail-Adresse versehen, Bild und Vorstellungstext sind damit verlinkt.
Neuer Verantwortungsbereich -> neuer Container.

Das Problem:
Auf dem iPhone wird nur die E-Mail-Adresse des jeweils ersten Mitglieds richtig angzeigt und verwendet. Das zweite Mitglied hat die Andresse von irgendwem, meist vom nächsten Mitglied. Sogar von einem bereits gelöschten Mitglied wurde noch die E-Mail-Adresse verwendet, obwohl die nirgends mehr stand (Cache-Problem?)
Jedenfalls weiß ich nicht, wodurch diese Verschiebung entsteht.

Ich poste hier mal einen Container als Beispiel:

HTML

<!-- Mitglied 1 -->            
            <div class="container">
                <div class="row row-bottom-padded-md">
                    <div class="col-lg-4 col-md-4 col-sm-6">
                        <div class="fh5co-blog animate-box">
                            <a  href="mailto:mitglied1@gmail.de"><img class="img-responsive"  src="images/mitglied1.jpg" alt="Mitglied 1, Vorstandsvorsitzender">
                            <div class="blog-text">
                                <div class="prod-title">
                                    <h3>Mitglied 1</h3>
                                    <span class="posted_by">Vorstandsvorsitzender</span>
                                    <p>Tel.: xxx/xxxxx-xx<br>
                                    E-Mail: mitglied1 @ mailanbieter.de</p>
                                </div>
                            </div> 
                            </a>
                        </div>
                     </div>


<!-- Mitglied 2 -->
                     <div class="col-lg-4 col-md-4 col-sm-6">
                        <div class="fh5co-blog animate-box">
                            <a  href="mailto:mitglied2@gmail.de"><img class="img-responsive"  src="images/mitglied2.jpg" alt="Mitglied 2, 1. Stellvertreter">
                            <div class="blog-text">
                                <div class="prod-title">
                                    <h3>Mitglied 2</h3>
                                    <span class="posted_by">2. Stellvertreter</span>
                                    <p>Tel.: xxx/xxxxx-xx<br>
                                    E-Mail: mitglied2 @ mailanbieter.de</p>
                                </div>
                            </div>
                            </a> 
                        </div>
                    </div>

<!-- Mitglied 3 -->                    
                    <div class="col-lg-4 col-md-4 col-sm-6">
                        <div class="fh5co-blog animate-box">
                            <a  href="mailto:mitglied3@gmail.de"><img class="img-responsive"  src="images/mitglied3.jpg" alt="Mitglied 3, 2. Stellvertreter">
                            <div class="blog-text">
                                <div class="prod-title">
                                    <h3>Mitglied 3</h3>
                                    <span class="posted_by">2. Stellvertreter</span>
                                    <p>Tel.: xxx/xxxxx-xx<br>
                                    E-Mail: mitglied3 @ mailanbieter.de</p>
                                </div>
                            </div> 
                            </a>
                        </div>
                    </div>
                </div>
            </div>

Alles anzeigen

Hat jemand irgendeine Idee, was da falsch läuft? Auf sämtlichen Browsern und Android-Handys wird das richtig angezeigt. Was kann ich machen, um diese Verschiebungen zu verhindern?

Viele Grüße und danke an die, die sich damit auseinandersetzen.
Wuffi

Knud

Du machst bei jedem Mitglied sechs <div> auf, aber nur vier zu </div>
Ist das vielleicht das Problem?

Gastl

Evtl., aber eher der Code selber.

Wuffi

Vielen Dank für eure Antworten!
Knud: Nach dem 3. Mitglied gehen sie alle wieder zu - das soll so, weil sie alle in einem Container sind und nebeneinander dargestellt werden.

Gastl: Was genau meinst du mit dem Code selber?

Gastl

Wenn du das nicht siehst, ist es schon etwas traurig.

Du zerlegst und kastrierst einen Link in verschieden DIVs.

Das machst du:

Zitat

<div...><a href="link">
<div...>
<div...> Text sonstwie
</div>
</div></a>
</div>

Alles anzeigen

Dir fällt da nichts auf?

Arne Drews

Geht schicker, ist aber nach W3C nicht verboten...

Wuffi

Arne Drews: Verboten vielleicht nicht, aber wenn's nicht funktioniert, bringt das Nicht-Verboten auch nix...

Gastl: Doch, war mir nach deinem kleinen Hinweis dann doch noch aufgefallen und hab' das ziemlich gleich geändert. Danke! Ich wollte auch eine Erfolgsmeldung abgeben, aber es funktioniert leider nur teilweise. Es gibt jetzt keine Verschiebungen der Adressen mehr, aber dafür werden die Telefonnummern bei manchen Mitgliedern in in der Linkfarbe angezeigt, und dann lässt sich die E-Mail-Adresse nicht anklicken. Wie gesagt, nur bei iPhone, und auch da wohl nicht bei allen. Ich kann allerdings absolut keinen Unterschied erkennen, der Code bei jedem einzelnen Mitglied sieht jetzt so aus:

HTML

<div class="col-lg-4 col-md-4 col-sm-6">
                       <div class="fh5co-blog animate-box">
                            <img class="img-responsive" src="images/mitglied1.jpg" alt="Mitglied 1, Vorstandsvorsitzender">
                            <div class="blog-text">
                                <div class="prod-title">
                                    <h3>Mitglied 1</h3>
                                    <span class="posted_by">Vorstandsvorsitzender<br>
                                    &nbsp;</span>
                                    <p>Tel.: xxx/xxxxxxx-x<br>
                                     <a href="mailto:mitglied1@mailailanbieter.de">E-Mail: mitglied1@mailanbieter.de</a><br>
                                    &nbsp;</p>
                                </div>
                          </div>
                    </div>
              </div>

Alles anzeigen

Das kann doch jetzt nicht sein, dass irgendeine iPhone-Version rumzickt, vielleicht weil die Telefonnummer und der Mailbefehl im gleichen <p>-Befehl stehen? Zumal auch wirklich nur die Telefonnummern in der Mailfarbe erscheinen. Das "Tel.:" selber nicht. Ich habe kein iPhone und konnte es bisher auch nicht auf einem Simulator reproduzieren. Kann das irgendjemand nachvollziehen und hat vielleicht eine Erklärung dafür?

Vielen Dank für eure Mühe, mir fällt zu dem Ganzen echt nix ein.
Wuffi

Gastl

Zitat von Wuffi

der Code bei jedem einzelnen Mitglied sieht jetzt so aus:.....

Der funktioniert so.

Zitat von Wuffi

Das kann doch jetzt nicht sein, dass irgendeine iPhone-Version rumzickt, vielleicht weil die Telefonnummer und der Mailbefehl im gleichen <p>-Befehl stehen?

Ich vermute das iPhone sorgt auf Grund seines Betriebssystems selber dafür, dass die Nummer als Link erscheint. Ist bei SMS bei meinem Samsung und Huawei ebenso. Nummern innerhalb der SMS werden auch als Link dargestellt. Das hat den Sinn, diese Nummer ganz einfach als Kontakt aufzunehmen.
Ich denke, das ist keine Fehlfunktion, sondern gewollt.

Deine Emailzeile, da würde ich das E-Mail aus dem Link rausnehmen:

Zitat

E-Mail: <a href="mailto:mitglied1@mailailanbieter.de">mitglied1@mailanbieter.de</a>

Arne Drews

Zitat von Wuffi

Arne Drews: Verboten vielleicht nicht, aber wenn's nicht funktioniert, bringt das Nicht-Verboten auch nix...

Jo, aber an dem Part liegt es nun mal nicht, der ist korrekt und würde in einem ansonsten ebenfalls korrekten DOM problemlos funktionieren.

Tags