Moin moin,

auf meiner Seite hab ich jetzt ne Art Pinnwand so ähnlich wie bei Facebook. Das funktioniert auch super, nur das das im IE nicht so aussieht wie es aussehen soll.

Im Anhang hab ich das mal als Bild.

Und hier jetzt noch der Code:

HTML und PHP

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<li class="uiWallPost uiWallPost_<?php echo $wall_post['id'] ?>">              <div class="uiBlock clearfix">               <?php echo $GLOBALS['USER']->avatar_link($wall_post['poster'], 50) ?>               <div class="uiImageBlock_Content">                <h6 class="wall_post_text">                 <div class="uiBold uiActionHeader">                  <?php echo $GLOBALS['USER']->profile_link($wall_post['poster']) ?>                 </div>                 <span><?php echo $wall_post['message'] ?></span>                 <div class="uiSubtitle clearfix">                  <span class="uiTime"><?php echo time_ago($wall_post['date']) ?></span>                  <span class="uiSpacer">|</span>                  <span><a href="javascript: void(0);" class="comment">Kommentieren</a></span>                  <span class="uiSpacer">|</span>                  <span><?php echo $GLOBALS['LIKE']->likeLink($wall_post['type'], $wall_post['id']) ?></span>                 </div>                </h6>                <ul class="uiList">                 <li class="uiListItem likeBox_<?php echo $wall_post['type'] ?>_<?php echo $wall_post['id'] ?> uiBox clearfix <?php if($GLOBALS['LIKE']->count($wall_post['type'], $wall_post['id']) < 1): ?>uiHidden<?php endif; ?>">                  <?php echo $GLOBALS['LIKE']->likeBox($wall_post['type'], $wall_post['id'], false) ?>                 </li>                 <li class="uiListItem">                  <ul class="uiList uiCommentList clearfix">                   <?php $GLOBALS['COMMENTS']->show_comments($wall_post['type'], $wall_post['id']); ?>                  </ul>                 </li>                 <li class="uiListItem uiBox clearfix">                  <?php echo $GLOBALS['COMMENTS']->comment_form($wall_post['type'], $wall_post['id']) ?>                 </li>                </ul>               </div>              </div>             </li>

CSS:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

.clearfix {     display: block; } .clearfix:after {   content: ".";   display: block;   clear: both;   font-size: 0;   height: 0;   visibility: hidden; } *:first-child+html .clearfix {     min-height: 0; } * html .clearfix {     height: 1%; } .uiList { } .uiList .uiListItem {   } .uiBox {     padding: 5px;     width: 440px;     background: #EDF7FF;     border-bottom: 1px solid #E1EAF2; } .uiImageBlock {     float: left;     display: block;     margin-right: 10px; } .uiImageBlock_Content {     display: table-cell;   } h6.wall_post_text {     font-weight: normal;     font-size: 11px;     text-shadow: none;     color: #555;   } .uiWallPost {     display: block;     padding: 20px;     border-bottom: 1px solid #EBEBEB; } .uiSubtitle {     margin: 5px 0;     color: #777; }

IE ist mit seinen diversen Versionen (5.x - 8) und ihrer untereinander unterschiedlicher W3C-Kompatibiltät ein dehnbarer Begriff.

Deshalb gibt's dazu auch einen Sticky-Thread im Board:

• Wichtig: Bei CSS-Problemen mit dem IE bitte die Version angeben

P.S. Um sich den Code im Browser anschauen zu können, ist hier der geparste PHP-Code, also die HTML-Ausgabe zu posten.

Achso ja also ich habs jetzt im IE 8 getestet.

Und hier noch der geparste PHP-Code:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

<li class="uiWallPost uiWallPost_254">              <div class="uiBlock clearfix">               <a href="profile.php?id=1" class="uiImageBlock"><img class="uiBlock" src="http://localhost/meinstein/uploads/avatars/no-avatar_50.png" /></a>              <div class="uiImageBlock_Content uiLeft">                <h6 class="wall_post_text">                   <div class="uiBold uiActionHeader">                  <a href="profile.php?id=1">Max Mustermann</a>                </div>                 <span>Test...</span>                 <div class="uiSubtitle clearfix">                  <span class="uiTime">vor 21 Tagen</span>                  <span class="uiSpacer">|</span>                    <span><a href="javascript: void(0);" class="comment">Kommentieren</a></span>                  <span class="uiSpacer">|</span>                  <span><span class="likeLink_1_254"><a href="javascript: void(0);" onclick="unlike('1', '254');">Gef&auml;llt mir nicht mehr</a></span></span>                 </div>                </h6>                <ul class="uiList">                 <li class="uiListItem likeBox_1_254 uiBox clearfix ">                    Dir gef&auml;llt das                </li>                 <li class="uiListItem clearfix">                  <ul class="uiList uiCommentList">                               <li class="uiBox uiComment uiComment_72">              <div class="clearfix">               <a href="profile.php?id=2" class="uiImageBlock"><img class="uiBlock" src="http://localhost/meinstein/uploads/avatars/no-avatar_40.png" /></a>               <div class="uiImageBlock_Content">                 <a href="profile.php?id=2">Max Mustermann</a>                 <span>Lorem Ipsum</span>                   <div class="uiSubtitle">                  <span class="uiTime">vor 4 Tagen</span>                  <span class="uiSpacer">|</span>                  <span><span class="likeLink_1_72"><a href="javascript: void(0);" onclick="like('1', '72');">Gef&auml;llt mir</a></span></span>                 </div>               </div>              </div>               </li>                         <li class="uiBox uiComment uiComment_71">              <div class="clearfix">               <a href="profile.php?id=1" class="uiImageBlock"><img class="uiBlock" src="http://localhost/meinstein/uploads/avatars/no-avatar_40.png" /></a>               <div class="uiImageBlock_Content">                 <a href="profile.php?id=1">Max Mustermann</a>                 <span>Lorem Ipsum</span>                 <div class="uiSubtitle">                    <span class="uiTime">vor 5 Tagen</span>                  <span class="uiSpacer">|</span>                  <span><span class="likeLink_1_71"><a href="javascript: void(0);" onclick="like('1', '71');">Gef&auml;llt mir</a></span></span>                 </div>               </div>              </div>             </li>                                      </ul>                 </li>                 <li class="uiListItem uiBox clearfix">                  <textarea></textarea>                </li>                </ul>               </div>              </div>             </li>

Kann ich nicht reproduzieren.



Einen Unterschied in der Darstellung gegenüber FF & Co registriere ich erst, wenn die Browser beim Laden des Docs in den Darstellungsmodi "Quirks Mode" schalten (= kein Doctype, falscher Doctype).

Für den standardkonformen Modus deklariere ich grundsätzlich diesen Doctype:

Code xhtml:

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Und welchen gibst du in deinen Seiten an?

Nutze auch mal das Entwicklertool des IE8 (Aufruf mit "F12"-Taste), um z.B. darin seinen Browser- und/oder Dokumentmodus zu wechseln, und die einzelnen Darstellungsunterschiede innerhalb der IE-Family nachzuspielen.

Mit einer kleinen ergänzten Code-Fassung, die wohl nur hier im Thread unvollständig vorliegt, sieht's auch nicht anders aus. Vorne hab ich auch (m)ein Avatar eingebunden, um die korrekte Ausrichtung / Einrückung zu visualisieren.

1. HTML: Fehlende <ul> </ul>-Tags für <li> in Zeile 1 deklariert.
2. CSS: * { margin:0; padding:0; } zum Resetten der Initialwerte.

Und hier zum Schluß das Sahnehäubchen oben drauf, bitte

Die IE8-Interpretation deines CSS im angesprochenen "Quirks Mode":

• Der »DOCTYPE-Switch« und seine Auswirkungen

Merke: IE8 ist mit FF & Co. auf einer Höhe, was die W3C-Kompatibilität angeht. Wenn solche eklatanten Unterschiede auftreten, ist zunächst mal der HTML-Quellcode auf mögliche Fehler zu überprüfen (keine/falsche Doctypeangabe, Syntax-Fehler, wie z.B. fehlende schliessende </Tagname> oder ein nicht geschlossener HTML-Kommentar) und zu validieren.

Ist dies erledigt, ein valides (X)HTML-Doc liegt nun vor, und IE8 verhält sich noch immer nicht besser, kann man sich dem CSS zuwenden.

Ich muss dieses Thema nochmal ansprechen. Also ich hab jetzt das ganze verstanden und weiß was da abläuft, aber aus irgendeinem Grund ist der Standard-Dokumentmodus bei meiner Seite IE7 bei anderen Seiten aber der normale IE8. Kann man den irgendwie mit HTML oder JS setzen?