[CSS] IE6 und IE7 ul,ol,li nicht absolute

Dieses Thema im Forum "Webdesign" wurde erstellt von raid-rush, 29. Juli 2009 .

Schlagworte:
  1. 29. Juli 2009
    Zuletzt bearbeitet: 14. April 2017
    IE6 und IE7 ul,ol,li nicht absolute

    Hallo CSS-Profies,

    No File | xup.in

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
ul,ol,li {list-style:none;}

.commentlist p, .trackbacklist {
 line-height: 20px;
}
#respond h3,h3#comments,h3#pings {
 font-weight:400;
 font-size:13px;
 text-transform:uppercase;
 border-bottom:1px solid #888;
 margin-bottom:10px;
 padding-bottom:5px;
}

.children {position:absolute;display:block;}


.comment {
 border:1px solid #ccc;
 position: relative;
 min-height:70px;
 padding: 25px 0;
 margin-bottom: 10px;
}

.even {
 border:1px solid #FFD666;
 margin-bottom: 10px;
}

.byuser {
 background:#FFFEEE;
}

.comment-author { background:#FFF1CC; }

.commentlist .children {
 overflow: hidden;
 position: relative;
 padding-left:20px;
}

.cleft {
 position:absolute;
 left:10px;
 top:25px;
 max-width:145px;
 color:#aaa;
}

.cright {
 margin-left:100px;
 min-height:70px;
}


.numero {
 font-size:60px;
 color:#FFD666;
 position:absolute;
 float:right;
 right:10px;
 bottom:20px;
 z-index:5;
 font-style:italic;
 font-family:Georgia;
 font-weight:400;
}

.texe {
 z-index:4;
 position:relative;
 padding: 6px;
 margin-right: 60px;
}
.texe abbr {
 font-size: 11px;
}
.cleft .avatar {
 height:60px;
 display:block;
 width:60px;
 border:1px solid #999;
 margin-right:10px;
 background:#fff;
 margin-left:10px;
 padding:2px;
}

.cleft .avatar:hover {
 background:#fff;
 border:1px solid #ccc;
 margin-left:10px;
 padding:2px;
}

.comment-meta {
 font-size:11px;
 line-height:14px;
 margin-bottom:10px;
}

.reply {
 font-size:11px;
 position: absolute;
 right:10px;
 bottom:10px;
}

#respond textarea {
 border:1px solid #111;
 border-bottom:1px solid #ccc;
 border-right:1px solid #ccc;
 width:100%;
 background:#fff;
 margin:10px 0;
}

#respond input#author,#respond input#email,#respond input#url {
 border:1px solid #111;
 border-bottom:1px solid #ccc;
 border-right:1px solid #ccc;
 width:100%;
 background:#fff;
 padding:5px 0;
}

.comform {
 background:#f1f1f1;
 margin-bottom:10px;
 border:1px solid #ccc;
 padding:15px;
}

#submit {
 background:#000 url(../images/bg-top.gif) 0 0 repeat-x;
 color:#fff;
 border:none;
 margin-bottom: 10px;
 padding: 5px 10px;
}
</style>


</head>
<body class="single postid-1 logged-in">

<!-- You can start editing here. -->
<h3 id="comments">
 8 Comments <a href="#respond">Add Yours ↓</a></h3>

<ol class="commentlist">
 <li class="comment even thread-even depth-1" id="comment-1">
 <div id="div-comment-1" class="thechild">
 <div class="cleft">
 <img alt='' src='http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=60' class='avatar avatar-60 photo avatar-default' height='60' width='60' /> 
 </div>
 <div class="cright"> 
 <div class="comment-author vcard by"> <span class="fn"><a href='http://wordpress.org/' rel='external nofollow' class='url'>
 Mr WordPress</a></span>&nbsp; </div>

 <div class="comment-meta commentmetadata">07.27.2009 16:51&nbsp; </div>
 <span class="numero">1</span>
 
 <div class="texe"><p>Hallo, das hier ist ein Kommentar.<br />Um 
 Kommentare zu bearbeiten, musst du dich anmelden und zur 
 Übersicht der Artikel gehen. Dort bekommst du dann die 
 Gelegenheit sie zu verändern oder zu löschen.</p>
</div>
 <div class="reply">

 <a rel='nofollow' class='comment-reply-link' href='/2009/07/hallo-welt/?replytocom=1#respond' onclick='return addComment.moveForm("div-comment-1", "1", "respond", "1")'>
 Antworten</a> </div>
 </div>
<div class="clear"></div>
 </div>
<div class="clear"></div>

</li>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="comment-5">
 <div id="div-comment-5" class="thechild">
 <div class="cleft">

 <img alt='' src='http://www.gravatar.com/avatar/e63baa377bf9048ea81a8e1d981fc61e?s=60&amp;d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&amp;r=PG' class='avatar avatar-60 photo' height='60' width='60' /> 
 </div>
 <div class="cright"> 
 <div class="comment-author vcard by"> <span class="fn">raidrush</span>&nbsp; </div>
 <div class="comment-meta commentmetadata">07.27.2009 20:34&nbsp; </div>
 <span class="numero">2</span>

 
 <div class="texe"><p>warum ist die erste box anders?</p>
</div>
 <div class="reply">
 <a rel='nofollow' class='comment-reply-link' href='/2009/07/hallo-welt/?replytocom=5#respond' onclick='return addComment.moveForm("div-comment-5", "5", "respond", "1")'>
 Antworten</a> </div>
 </div>
<div class="clear"></div>
 </div>
<div class="clear"></div>

</li>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor even depth-3" id="comment-8">
 <div id="div-comment-8" class="thechild">
 <div class="cleft">
 <img alt='' src='http://www.gravatar.com/avatar/e63baa377bf9048ea81a8e1d981fc61e?s=60&amp;d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&amp;r=PG' class='avatar avatar-60 photo' height='60' width='60' /> 
 </div>
 <div class="cright"> 
 <div class="comment-author vcard by"> <span class="fn">raidrush</span>&nbsp; </div>

 <div class="comment-meta commentmetadata">07.28.2009 19:54&nbsp; </div>
 <span class="numero">3</span>
 
 <div class="texe"><p>antwort auf commentar 5</p>
</div>
 <div class="reply">
 <a rel='nofollow' class='comment-reply-link' href='/2009/07/hallo-welt/?replytocom=8#respond' onclick='return addComment.moveForm("div-comment-8", "8", "respond", "1")'>
 Antworten</a> </div>

 </div>
<div class="clear"></div>
 </div>
<div class="clear"></div>

</li>
</li>
</ul>
</li>
</ul>
</li>
<li class="comment byuser comment-author-admin bypostauthor odd alt thread-odd thread-alt depth-1" id="comment-2">
 <div id="div-comment-2" class="thechild">
 <div class="cleft">

 <img alt='' src='http://www.gravatar.com/avatar/e63baa377bf9048ea81a8e1d981fc61e?s=60&amp;d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&amp;r=PG' class='avatar avatar-60 photo' height='60' width='60' /> 
 </div>
 <div class="cright"> 
 <div class="comment-author vcard by"> <span class="fn">raidrush</span>&nbsp; </div>
 <div class="comment-meta commentmetadata">07.27.2009 20:08&nbsp; </div>
 <span class="numero">4</span>

 
 <div class="texe"><p>Um Spam zu vermeiden, geh doch gleich mal in 
 den Pluginbereich und aktivier die entsprechenden Plugins. So, 
 und nun genug geschwafelt – jetzt nichts wie ran ans Bloggen!</p>
</div>
 <div class="reply">
 <a rel='nofollow' class='comment-reply-link' href='/2009/07/hallo-welt/?replytocom=2#respond' onclick='return addComment.moveForm("div-comment-2", "2", "respond", "1")'>
 Antworten</a> </div>
 </div>
<div class="clear"></div>
 </div>
<div class="clear"></div>

</li>
</li>
<li class="comment byuser comment-author-crack02 even thread-even depth-1" id="comment-3">
 <div id="div-comment-3" class="thechild">
 <div class="cleft">
 <img alt='' src='http://www.gravatar.com/avatar/69cf2a101da4c9ca84f0e00127cbed98?s=60&amp;d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&amp;r=PG' class='avatar avatar-60 photo' height='60' width='60' /> 
 </div>
 <div class="cright"> 
 <div class="comment-author vcard by"> <span class="fn">hans</span>&nbsp; </div>

 <div class="comment-meta commentmetadata">07.27.2009 20:19&nbsp; </div>
 <span class="numero">5</span>
 
 <div class="texe"><p>mkey</p>
</div>
 <div class="reply">
 <a rel='nofollow' class='comment-reply-link' href='/2009/07/hallo-welt/?replytocom=3#respond' onclick='return addComment.moveForm("div-comment-3", "3", "respond", "1")'>
 Antworten</a> </div>

 </div>
<div class="clear"></div>
 </div>
<div class="clear"></div>

</li>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="comment-4">
 <div id="div-comment-4" class="thechild">
 <div class="cleft">
 <img alt='' src='http://www.gravatar.com/avatar/e63baa377bf9048ea81a8e1d981fc61e?s=60&amp;d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&amp;r=PG' class='avatar avatar-60 photo' height='60' width='60' /> 
 </div>

 <div class="cright"> 
 <div class="comment-author vcard by"> <span class="fn">raidrush</span>&nbsp; </div>
 <div class="comment-meta commentmetadata">07.27.2009 20:34&nbsp; </div>
 <span class="numero">6</span>
 
 <div class="texe"><p>joa das geht ab :D</p>

</div>
 <div class="reply">
 <a rel='nofollow' class='comment-reply-link' href='/2009/07/hallo-welt/?replytocom=4#respond' onclick='return addComment.moveForm("div-comment-4", "4", "respond", "1")'>
 Antworten</a> </div>
 </div>
<div class="clear"></div>
 </div>
<div class="clear"></div>

</li>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor even depth-3" id="comment-6">

 <div id="div-comment-6" class="thechild">
 <div class="cleft">
 <img alt='' src='http://www.gravatar.com/avatar/e63baa377bf9048ea81a8e1d981fc61e?s=60&amp;d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&amp;r=PG' class='avatar avatar-60 photo' height='60' width='60' /> 
 </div>
 <div class="cright"> 
 <div class="comment-author vcard by"> <span class="fn">raidrush</span>&nbsp; </div>
 <div class="comment-meta commentmetadata">07.27.2009 20:35&nbsp; </div>

 <span class="numero">7</span>
 
 <div class="texe"><p>dritte ebene für kommentare <b>haha wie toll</b></p>
</div>
 <div class="reply">
 <a rel='nofollow' class='comment-reply-link' href='/2009/07/hallo-welt/?replytocom=6#respond' onclick='return addComment.moveForm("div-comment-6", "6", "respond", "1")'>
 Antworten</a> </div>
 </div>
<div class="clear"></div>

 </div>
<div class="clear"></div>

</li>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-4" id="comment-7">
 <div id="div-comment-7" class="thechild">
 <div class="cleft">
 <img alt='' src='http://www.gravatar.com/avatar/e63baa377bf9048ea81a8e1d981fc61e?s=60&amp;d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&amp;r=PG' class='avatar avatar-60 photo' height='60' width='60' /> 
 </div>
 <div class="cright"> 
 <div class="comment-author vcard by"> <span class="fn">raidrush</span>&nbsp; </div>

 <div class="comment-meta commentmetadata">07.27.2009 20:35&nbsp; </div>
 <span class="numero">8</span>
 
 <div class="texe"><p>geht noch einer?</p>
</div>
 <div class="reply">
 </div>
 </div>

<div class="clear"></div>
 </div>
<div class="clear"></div>

</li>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ol>
<div class="navigation">
 <div class="alignleft">

 </div>
 <div class="alignright">
 </div>
</div>
<br class="clear" />
<br class="clear" />
<div id="respond" class="comform">
 <h3>
 Your Comment </h3>
 <form action="" method="post" id="commentform">

 <div class="secondform">
 <p>
 <textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>
 </p>
 </div>
 <p>
 <input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
 <input type='hidden' name='comment_post_ID' value='1' id='comment_post_ID' />

<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
 </p>
 </form>
 </div>

</div>

<div class="dp40">

 

</div>
 
 <br class="clear" />

</body>
</html>
    diese wird in firefox 3.0.x und opera 9.6 sowie IE8 korrekt angezeigt.
    im IE6 und IE7 schaut das leider anders aus.

    Ich hoffe ihr könnt mir helfen das zu fixen damit es auch mit IE6-7 funktioniert.

    als kleinen anreiz, wer es hinbekommt kriegt eine deftige belohnung
     
    + Multi-Zitat Zitieren
  3. 30. Juli 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: IE6 und IE7 ul,ol,li nicht absolute

    nabend

    habs mir grad mal angeschaut und glaub alles gefunden zu haben... jedenfalls siehts jetzt im ie6 und 7 recht ähnlich aus.

    https://www.xup.in/dl,30780808/index.htm/

    der fehler bei der verschachtelung war dass du in einem ul oder ol element immer ein li und darin dan das nächste ul brauchst...

    das mit den zahlen rechts hab ich auf relative position gemacht dan gings

    hoff ma ich hab nix übersehen so spät^^
     
    + Multi-Zitat Zitieren
  4. 30. Juli 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: IE6 und IE7 ul,ol,li nicht absolute

    @ Gado -> Deins sieht im Firefox auch nicht wirklich richtig aus...

    @RAiD: Welches Verhalten erwartest du? Du sagst FF zeigt es richtig an, aber eigentlich glaube ich das die Verschachtelung (so wie im IE) richtig ist -> nur die Nummern eben nicht...

    (FF 3.5 und IE 7)

    Bild
     
    + Multi-Zitat Zitieren
  5. 30. Juli 2009
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: IE6 und IE7 ul,ol,li nicht absolute

    nummern sind ja nich soo schwer zu fixen.
    einfach das "position:absolute;" bei .numero und .reply entfernen und das "float:right;" belassen.
    Musst es dann halt noch beides neu ausrichten bzw. das .reply auf flot:right setzen.

    wenns um die Verschachtelung geht, wie coksnuss sagt, ist es denke ich auch im IE7 richtig angezeigt. Aber kenn mich mit uls und lis nicht aus...


    gruß
    gl


    also, nochmal als bild:
    Bild
     
    + Multi-Zitat Zitieren
  6. 30. Juli 2009
    AW: IE6 und IE7 ul,ol,li nicht absolute

    <ul><li></li><ul><li>...</li></ul></ul>

    geht nicht.
    du musst mit <ul> innerhalb von <li> weitermachen.
    SELFHTML: HTML/XHTML / Referenz /HTML-Elementreferenz

    schau dir mal <dl> an, eignet sich (meiner meinung nach) besser.

    // und irgendwie find ich <li> als layer (position: != static) ungeeignet, macht keinen sinn irgendwie

    HTML:
    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Formular</title>
 <meta http-equiv="Content-type" content="application/xhtml+xml; Charset=iso8859-1" />
 <style type="text/css">
 * { 
 font-size: 11px;
 font-family: sans-serif;
 }
 
 dl.commentList dt { 
 height: 70px; 
 overflow: hidden;
 border: 1px solid #000;
 border-bottom: 0px none;
 }
 
 dl.commentList dt span.counter {
 float: right;
 font-size: 30px;
 font-weight: bold;
 font-style: italic;
 margin: 5px;
 }
 
 dl.commentList dt img.avatarImage {
 border: 1px solid #000;
 padding: 1px;
 float: left;
 margin: 5px;
 }
 
 dl.commentList dt span.author {
 display: block;
 font-weight: bold;
 margin-top: 5px;
 }
 
 dl.commentList dd.message { 
 margin-left: 0; 
 padding-left: 75px;
 border: 1px solid #000;
 border-top: 0px none;
 margin-bottom: 10px;
 }
 </style>
 </head>
 <body>
 <div id="main">
 <dl class="commentList">
 <dt class="even">
 <span class="counter">1</span>
 <img class="avatarImage" src="avatar.png" alt="" />
 <span class="author">Murdoc</span>
 <span class="date">12.12.2009 @ 12:12 Uhr</span>
 </dt>
 <dd class="message">Text auf Ebene 1</dd>
 <dd class="replys">
 <dl>
 <dt class="even">
 <span class="counter">2</span>
 <img class="avatarImage" src="avatar.png" alt="" />
 <span class="author">Murdoc</span>
 <span class="date">12.12.2009 @ 12:12 Uhr</span>
 </dt>
 <dd class="message">Text auf Ebene 2</dd>
 <dd class="replys">
 <dl>
 <dt class="even">
 <span class="counter">3</span>
 <img class="avatarImage" src="avatar.png" alt="" />
 <span class="author">Murdoc</span>
 <span class="date">12.12.2009 @ 12:12 Uhr</span>
 </dt>
 <dd class="message">Text auf Ebene 3</dd>
 </dl>
 </dd>
 </dl>
 </dd>
 <dt class="odd">
 <span class="counter">4</span>
 <img class="avatarImage" src="avatar.png" alt="" />
 <span class="author">Murdoc</span>
 <span class="date">12.12.2009 @ 12:12 Uhr</span>
 </dt>
 <dd class="message">Text #2 auf Ebene 1</dd>
 </dl>
 </div>
 </body>
</html>
     
    + Multi-Zitat Zitieren
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten