CSS Problem mit tt_news

  • Bishop Bishop
    R2-D2
    0 x
    57 Beiträge
    0 Hilfreiche Beiträge
    22. 05. 2007, 10:47

    Hallo zusammen,

    ich habe auf meiner Seite ein massives Problem mit der Ext. News und dem Internet Explorer.
    Mein News-Item wird komplett zerschossen. Im Firefox sieht es dagegen korrekt aus.

    Hier ist mein CSS für das news-items
    [HTML].news-list-item {
    /* IE hack */
    height: 1%;
    line-height: 1.3;
    /* IE hack end */
    padding:3px;
    margin:3px;
    padding-left: 8px;
    border: none;
    border-left: 8px solid #003399;
    background-color:#FFFFFF;
    }[/HTML]

    Hat jemand eine Idee woran das liegen kann?
    Hier ist der Link zur Seite, dann könnt ihr euch das Problem mal selber anschauen
    [url]www.thw-villingen.de[/url]

    Danke schonmal!

    Gruß
    Bishop


  • 1
  • vince123 vince123
    R2-D2
    0 x
    115 Beiträge
    0 Hilfreiche Beiträge
    22. 05. 2007, 11:12

    sieht doch ok aus. im ie7 allerdings.

    ich wüsste ehrlich gesagt auch nicht, was "height:1%;" an der stelle bringen soll...

    gruß,
    guido

  • Bishop Bishop
    R2-D2
    0 x
    57 Beiträge
    0 Hilfreiche Beiträge
    22. 05. 2007, 11:44

    hallo vince123,

    danke erstmal für die Antwort. Das mit dem height:1% hab ich jetzt mal rausgenommen, dann siehts gut aus.
    Was mich jetzt noch stört ist der zu große abstand der so nur im ie kommt sowie der graue rahmen.
    beide sind im firefox nicht zu sehen.

    Gruß
    Bishop

  • vince123 vince123
    R2-D2
    0 x
    115 Beiträge
    0 Hilfreiche Beiträge
    22. 05. 2007, 12:06

    wegen der abstände um das datum herum, müsstest du dich mit den formatierungen für news-list-date beschäftigen. "float:left;" wird dort z.b. so nicht funktionieren. news-list-date ist bei dir kein blockelement.

    der graue rahmen kommt vielleicht vom clearer.

    gruß,
    guido

  • Bishop Bishop
    R2-D2
    0 x
    57 Beiträge
    0 Hilfreiche Beiträge
    22. 05. 2007, 13:49

    Das komische daran ist das es im Firefox korrekt aussieht, nur der IE macht da Probleme.
    Könnte das evtl. noch am Doctype oder ähnlichem liegen?

  • vince123 vince123
    R2-D2
    0 x
    115 Beiträge
    0 Hilfreiche Beiträge
    22. 05. 2007, 13:59

    Der IE mag das <hr>-Tag schon anders darstellen. Da musst du nochmal die css-Angaben überprüfen/ändern. keine Border, noshade o.ä., wenn man gar nichts davon sehen soll.

    Die Abstände können auch durch die <p>-Tags an der Stelle entstehen. Einfach mal Elemente aus dem News-Template herausnehmen und das Ergebnis überprüfen... ;-)

    doctype schließe ich mal aus.

    Etwas mehr Code hier posten, wäre wohl auh nicht schlecht, damit man nicht alles selbst raussuchen muss... An den css-Angaben für ".news-list-item" liegt es ja nicht.

    Gruß,
    Guido

  • Bishop Bishop
    R2-D2
    0 x
    57 Beiträge
    0 Hilfreiche Beiträge
    22. 05. 2007, 14:17

    Erstmal Danke für die Antwort.
    Hier ist mal der Code vom News-Template.

    [TS]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <?xml version="1.0" encoding="utf-8"?>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css"></style>
    <title>Test</title>
    <meta name="generator" content="TYPO3 3.8 CMS" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <link href="tt_news.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <!-- ###TEMPLATE_LIST### begin
    This is the template for the list of news in the archive or news page or search
    -->
    <div class="news-list-browse">###BROWSE_LINKS###</div>
    <div class="news-list-container">
    <!-- ###CONTENT### begin
    This is the part of the template substituted with the list of news:
    -->
    <!-- ###NEWS### begin
    Template for a single item
    -->
    <div class="news-list-item">
    <div class="news-list-rubrik">###NEWS_CATEGORY###</div>
    <table cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td valign="top" class="news-list-image"><!--###LINK_ITEM###-->###NEWS_IMAGE###<!--###LINK_ITEM###--></td>
    <td valign="top">
    <h1>###NEWS_TITLE###</h1>
    <p class="bodytext">###NEWS_SUBHEADER###</p>
    <span class="news-list-date">(###NEWS_DATE###)</span>
    </td>
    </tr>

    <tr>
    <td colspan="2">
    <div class="news-list-morelink"><!--###LINK_ITEM###-->###MORE###<!--###LINK_ITEM###--></div>
    </td>
    </tr>
    </table>
    <hr class="clearer" />
    </div>
    <!-- ###NEWS### end-->
    <!-- ###CONTENT### end -->
    </div>
    <!-- ###TEMPLATE_LIST### end -->

    <br />
    <br />
    <br />
    <br />
    <hr />
    <br />
    <br />
    <br />
    <h3>TEMPLATE_SINGLE</h3>
    <em>This subpart is used to display single news items</em><br />
    <br />
    <br />

    <!-- ###TEMPLATE_SINGLE### begin
    This subpart is used to display single news items
    -->

    <div class="news-single-item">
    ###NEWS_CATEGORY_ROOTLINE###
    <h2>###NEWS_TITLE###</h2>
    <!--###CATWRAP_B### ###TEXT_CAT### ###NEWS_CATEGORY### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E### -->
    ###NEWS_SUBHEADER###
    ###NEWS_IMAGE###
    ###NEWS_CONTENT###
    <div class="news-single-timedata">
    ###NEWS_DATE###
    ###NEWS_AUTHOR###
    </div>
    <hr class="clearer" />
    <!--###ADDINFO_WRAP_B###-->

    ###TEXT_RELATED###
    ###NEWS_RELATED###

    ###TEXT_FILES###
    ###FILE_LINK###

    ###TEXT_LINKS###
    ###NEWS_LINKS###

    ###TEXT_RELATEDBYCATEGORY###
    ###NEWS_RELATEDBYCATEGORY###

    <!--###ADDINFO_WRAP_E###-->
    ###NEWS_SINGLE_PAGEBROWSER###
    </div>
    <!-- ###TEMPLATE_SINGLE### end -->

    </body>
    </html>[/TS]

    Vielleicht hilft das weiter. Das mit den <p> Tags hab ich mal getestet. Ist nur eines drinne (siehe oben) und das gehört da auch hin. Alles andere ist mir da echt ein Rätsel.
    Ich werd mich jetzt mal mit dem clearer beschäftigen, vielleicht ergibt sich da noch was.
    Trotzdem nochmals vielen Dank!

    Gruß
    Bishop

  • vince123 vince123
    R2-D2
    0 x
    115 Beiträge
    0 Hilfreiche Beiträge
    22. 05. 2007, 15:08

    setz mal bei new-list-date an:

    statt:
    [TS]<td valign="top">
    <h1>###NEWS_TITLE###</h1>
    <p class="bodytext">###NEWS_SUBHEADER###</p>
    <span class="news-list-date">(###NEWS_DATE###)</span>
    </td>
    [/TS]

    neu:
    [TS]<td valign="top">
    <h1>###NEWS_TITLE###</h1>
    <p class="bodytext">###NEWS_SUBHEADER###</p>
    <p class="new-list-date">(###NEWS_DATE###)</p>
    </td>
    [/TS]

    Und dann im css nur:
    [TS].news-list-date {
    color: #3E551C;
    font-weight: normal;
    font-size:11px;
    }
    [/TS]

    alle anderen css-Angaben an der Stelle weg.

    Problem HR: mal noshade probieren.
    [TS]<hr class="clearer" noshade="noshade" />
    [/TS]

    Gruß
    Guido[/TS]

  • 1