IE7 ignoriert Floats bei Tumbnails

learner

Hallo zusammen,

ich habe ein Seiten-Template gebaut, auf dem Exzerpte von einigen Seiten inkl. Thumbnail ausgegeben werden.

Klappt auch alles ganz gut. Außer im IE7. Obwohl ich das Bild nach links floate wird dies in der Dartelung vom IE7 ignoriert. Der text umfließt nicht das Bild. In Safari und FF wird alles richtig dargestellt.

Hier mal das relevante Stück Code:

PHP

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>


<div class="markenpost" <h2 id="post-<?php the_ID(); ?>">    
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php  the_title_attribute(); ?>"><?php the_title(); ?></a> </h2>




<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php  the_title_attribute(); ?>"> <div id="thumb"> <?php the_post_thumbnail(array(150,75), array('class' => 'alignleft'));  ?> </div> </a> <p> 


<div id="excerpttext"> <?php print do_excerpt(get_the_excerpt(), 40); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="weiterlesen"> weiterlesen</a> </p> <p>&nbsp;</p></div> 


</div>

Alles anzeigen

CSS:

#thumb {
float:left;
margin-top:0;
overflow:hidden;

}

Seltsamerweise ignoriert der IE7 auch die CSS-Formatierungsanweisung für die Überschrift.

Hat jemand einen Tipp für mich? Bin für jeden Hinweis dankbar.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

gibt es denn auch eine class "alignleft" die nach links gefloated ist?

Code

.alignleft {
float:left;
}
.alignright {
float:right;
}

learner

ja, gibt es. Wird aber ignoriert vom IE7. :(

maxe

der Link ?

learner

http://trendguide.de/alle-marken/

user: gast
pa**:gast

koslowski

Hi,

kann den Fehler leider nicht nachvollziehen. Im IE7 ist brav Text neben Bild.

[ot]Dieser schnelle Bildwechsel macht einen ganz wuschig im Hirn. Der Reflex gleich wieder abzuhauen ist deshalb kaum in den Griff zu kriegen.

Äh...., ganz unten weiße Schrift auf hellblauem Hintergrund, krieg ich einen Preis wenn ich richtig rate was da steht? :mrgreen: [/ot]

learner

Der Link war falsch. Sorry.

Schau mal hier: http://trendguide.de/alle-marken/

codestyling

Was bitteschön soll denn das hier sein?

PHP

<div class="markenpost" [COLOR=Red]<h2 id="post-<?php the_ID(); ?>[/COLOR]">

Würde mal sagen, wenn das so im Quelltext der PHP Datei steht, dass du dann ein kaputtes Markup hast und jeder Browser anders zu reparieren versucht.
Bring das mal in Ordnung, dann sollte auch alles funktionieren.

learner

Danke für den Hinweis! :-)

Überschriften werden jetzt korrekt dargestellt.

Das Problem des ignorierten Floats besteht leider immer noch.

Ich verstehe einfach nicht warum.

codestyling

div in einem a ist nicht zulässig. Ein Block-Container in einem Inline-Container.
Jag mal deine Seite hier durch und behebe die Fehler: http://validator.w3.org/

learner

Zitat

div in einem a ist nicht zulässig. Ein Block-Container in einem Inline-Container.

Was meinst Du damit genau?

Hab die Seite durch den Validator gejagt. Der spuckt mir aber recht absurde Hinweise aus. Ich dürfe keine divs mehrfach nutzen heißt es da zum Beispiel.

Sachdienliche Hinweise habe ich nicht finden können. :???:

codestyling

Beispiel, umgebrochen für Lesbarkeit:

PHP

<[COLOR=Red][B]a[/B][/COLOR] href="<?php the_permalink() ?>" 
 rel="bookmark" title="<?php  the_title_attribute(); ?>"
> 
   <[B][COLOR=Blue]div[/COLOR][/B] id="thumb"> 
     <?php the_post_thumbnail(array(150,75), array('class' => 'alignleft'));  ?>  
   <[B][COLOR=Blue]/div[/COLOR][/B]> 
<[COLOR=Red][B]/a[/B][/COLOR]>

Das ist kein valides Markup, denn ein div kann nicht innerhalb eines Ankers (Link) sein. Wirf das div da raus.

learner

Danke, jetzt hab ich kapiert was Du meintest. :D

Nützt aber leider auch nichts. Es ist zum Haare raufen...:(

codestyling

Dann wäre es ja noch eine Option, einen Link zur Seite bereitzustellen, damit man sich das verbleibende Problem noch genauer ansehen kann.
Bis hierhin kann man per Code unterstützen, alles Weitere ist ohne die betreffende Seite "fischen im Trüben".

learner

Hatte ich schon gepostet.

Hier nochmal:

http://trendguide.de/alle-marken/

user: gast
pa**: gast

codestyling

Da stimmt was nicht im Excerpt (rot markiert, weiter rechts). Wird der generiert oder händisch eingegeben?

Code

<div id="excerpttext"> DIE KREATIVEN LOTSEN VOM HAFENBECKEN h1 ist eine von Marc Hillen inhabergeführte Kommunikations-Agentur in Neuss, die Kunden am gesamten Niederrhein betreut. „Wir sind kompetente Lotsen in den Bereichen Werbung, Corporate Identity und Öffentlichkeitsarbeit. Unsere Kunden genießen umfassende Betreuung von der...<a href="[URL="http://forum.wordpress-deutschland.org/view-source:http://trendguide.de/marken-produkte/h1/"]http://trendguide.de/marken-produkte/h1/[/URL]" rel="bookmark" title="weiterlesen"> weiterlesen</a> [COLOR=Red][B]</p> <p>&nbsp;</p>[/B][/COLOR]</div>

Das kann IE nicht korrigieren und das excerpttext div floated auch nicht mit, ist also ein Block unterhalb des Links.

learner

Habe jetzt

#excerpttext mit display:inline; und

#thumb mit display:inline-block;

versehen und es FUNKTIONIERT! :mrgreen:

Vielen Dank für die Hilfe! :-D:-D:-D

Willkommen! Melden Sie sich an oder registrieren Sie sich.

IE7 ignoriert Floats bei Tumbnails

Jetzt mitmachen!