Pinnwand im IE

tsbmusic

Erfahrenes Mitglied
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:
            <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:
.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;
}
 

Anhänge

  • firefox.png
    firefox.png
    14,6 KB · Aufrufe: 42
  • ie.png
    ie.png
    14,5 KB · Aufrufe: 33
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:


P.S. Um sich den Code im Browser anschauen zu können, ist hier der geparste PHP-Code, also die HTML-Ausgabe zu posten.
 
Zuletzt bearbeitet:
Achso ja also ich habs jetzt im IE 8 getestet.

Und hier noch der geparste PHP-Code:

Code:
            <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.

ff_vs_ie8.png

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:
HTML:
<!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.
 
Zuletzt bearbeitet:
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.

ff_vs_ie8_t2.png
 
Zuletzt bearbeitet:
Und hier zum Schluß das Sahnehäubchen oben drauf, bitte ;-)

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

ff_vs_ie8_t3.png


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.
 
Zuletzt bearbeitet:
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?
 

Neue Beiträge

Zurück