XHTMLforum - Overflow Problem Firefox / IE

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Overflow Problem Firefox / IE (http://xhtmlforum.de/showthread.php?t=40726)

Overflow Problem Firefox / IE

hi!

ich sitz gerade an einem skin für phpboard...

jetzt hab ich mal wieder ein problem zwischen firefox und ie!
im firefox wie zu erwarten, alles paletti und im ie alles kaputt :x

und zwar erweitert er das ein div im ie einfach, ohne die margin anweisungen der box darüber zu beachten. im firefox befolgt er brav die overflow:auto; anweisung, im ie
aber nicht :?

ich poste mal den nötigen quelltext und 2 bilder:

die template datei:

Code:

<div id="main">

  <div class="catrow"> <span class="catrowtext"> {TOPIC_TITLE} </span> </div>

  <div class="forumrows">

    <div class="maininfobox">

                {PAGE_NUMBER}

              <div>{PAGINATION}</div>

              <div>{S_WATCH_TOPIC}</div>

    </div>

    {POLL_DISPLAY}

    <!-- BEGIN postrow -->

                <div class="forumrow">

                  <div class="forumname">

                        <table>

                          <tr>

                                <td class="postavatar">

                                                {postrow.POSTER_AVATAR}<br/>

                                                {postrow.POSTER_NAME}<br/>

                                                {postrow.POSTER_RANK}<br/>

                                                {postrow.RANK_IMAGE}<br/>

                                                {postrow.POSTER_JOINED}<br/>

                                                {postrow.POSTER_POSTS}<br />

                                                {postrow.POSTER_FROM} 

                                  <div class="postdate">{L_POSTED}: {postrow.POST_DATE}</div>

                                </td>

                                <td>

                                        <table>

                                                <tr>

                                                        <td>

                                                                {postrow.PROFILE_IMG}

                                                                {postrow.PM_IMG}

                                                                {postrow.EMAIL_IMG}

                                                                {postrow.WWW_IMG}

                                                                {postrow.AIM_IMG}

                                                                {postrow.YIM_IMG}

                                                                {postrow.MSN_IMG}

                                                        </td>

                                                </tr>

                                                <tr>

                                                   <td class="post">

                                                                <div class="postdate">{postrow.EDITED_MESSAGE}</div>

                                                                <div class="posttext">{postrow.MESSAGE}{postrow.SIGNATURE}</div>

                                                        </td>

                                                </tr>

                                                <tr>

                                                  <td>

                                                          {postrow.QUOTE_IMG}

                                                          {postrow.EDIT_IMG}

                                                          {postrow.DELETE_IMG}

                                                          {postrow.IP_IMG}

                                                  </td>

                                        </table>

                                </td>

                          </tr>

                        </table>

                  </div>

                </div>

    <!-- END postrow -->

    <!-- BEGIN switch_user_logged_in -->

                   <div class="maininfobox">

                        {S_AUTH_LIST}

                </div>

    <!-- END switch_user_logged_in -->

    <div class="maininfobox">

            <form method="post" action="{S_POST_DAYS_ACTION}">

                        {L_DISPLAY_POSTS}: <br />

                        {S_SELECT_POST_DAYS} <br />

                        {S_SELECT_POST_ORDER}

                        <input type="submit" value="{L_GO}" class="barmenuentry" name="submit" />

            </form>

    </div>

    <div class="maininfobox">{JUMPBOX}</div>

    <div class="maininfobox">{PAGE_NUMBER}<br/>

      {PAGINATION}{S_TOPIC_ADMIN}</div>

  </div>

</div>

und die css (noch n bissl komisch organisiert):

Code:

#main{

        margin: 20px 200px 20px 200px;

        padding: 5px;

        border: 1px solid #FFFFFF;

        background-color: #0F0E0E;

}



.catrow{

        padding: 10px 0px 0px 0px;

        border: 1px solid #4E080E;

        border-width: 1px 1px 0px 1px;

        background-image:url(images/_button.gif);

        background-position:top;

        background-repeat:repeat-x;

        background-color:#191919;

        text-align:center;

}



.catrowtext{

        font-size: 2em;

        text-decoration:none;

        font-weight:bold;

        color:#717272;



}



.forumrows{

        padding-top: 10px;

        padding-bottom: 5px;

        margin: 0px 0px 20px 0px;        

        border: 1px solid #4E080E;

        border-top: none;

        background-color: #191919;

}



.forumrow{

        margin: 10px;

        margin-top: 0px;

        margin-bottom: 5px;

        background-color:#000000;

        border: 1px solid #4E080E;

        

}





.forumname{

        padding: 5px;

        padding-left: 5px;



        border-bottom: 1px solid #4E080E;

        

        background-color: #140103;



}



.forumname img{

        vertical-align:middle;

}



.forumdesc{

        padding: 5px 0px 5px 80px;

        border-bottom: 1px solid #4E080E;

}





.foruminfos{

        padding: 5px 0px 5px 80px;

        background-color:#000000;

}





.forumlink{

        font-size: 1.7em;

        font-weight: bold;

        vertical-align:middle;



}





#barmenu_add input{

        margin: 5px 0px 5px 0px;

}





#mainmenu form{

        margin-top: 5px;

}



#mainmenu input{

        display:block;

}



.maininfobox{

        margin: 10px 10px 10px 10px;

        background-color:#140103;

        padding: 5px;

}



.bold{



        font-weight:bold;

}



.nobr{

        display:inline;

}



.row2{

        background-color:#999999;

}



.poll{

        margin: 10px 10px 10px 10px;

        background-color:#140103;

        padding: 5px;

        text-align:center;

}



.gen{

        font-size:medium;

}



.postavatar{

        width: 170px;

        text-align:center;

        background-color: #4E080E;

        padding: 10px;

        vertical-align:top;

}



.postavatar img{

        margin-bottom:20px;

}







.postdate{

        padding: 5px;

        border: 1px dotted #4E080E;

}



td.post{

        vertical-align:top;

        overflow:scroll;



}



.posttext{

        margin: 20px;

        overflow: auto;

}



.posttext img{

        max-width: 100px;

}



.postrow{

overflow: scroll;

}



#main select{

        width: 300px;

        color: #4E080E;

        background-color: #900C00;

        border: 1px dotted #4E080E;

        padding: 3px 3px 3px 3px;

        margin: 5px 20px 5px 20px;

}

hier sieht man noch, wie im firefox der scrollbalken kommt und im ie nicht:

http://www.toxz.de/_forumstuff/skin.gif

wäre echt super, wenn jemand weiß, woran es liegt - komme nämlich einfach nich weiter :|

danke wenn du bis hierhin gelesen hast

Setzt mal für .posttext eine fixe breite.

Gibt es irgenwo eine Live-Demo?

ne leider gibts keine demo - wenn ich das skin aktiviere, sehen es gleich alle user

ja, wenn ich eine feste breite angebe gehts -

aber ich will ja keine fixe breite...
links und rechts von diesem fenster sind ja noch 2 boxen
und das mittelfenster soll sich anpassen

es ist ja im prinzip in #main begrenzt durch margin links und rechts 200px
:?

liegts vielleicht irgendwie daran, dass ich in dem mittelfenster auf tabellen zurückgreife?

wenn ich jedoch die width für das td wo das bild drin ist auf 200px setzte, passt sich der text an, das bild
knallt aber aber trotzdem über die grenzen hinaus (IE)

kann der ie nur overflow:auto; anwenden, wenn die box ne fixe breite hat???

Anstelle eines ungeparsten Codefragments und irgendwelchem CSS eine URL zu posten, würde eine Antwort schon erleichtern. Niemand will dein komplettes Template sehen, versuch doch mal, nur das Problem in einem kleinen Testcase darzustellen. Oder benutz die Forensuche, wir hatten das Problem neulich erst.

dann beschreib ichs mal mit worten

ich hab links und rechts 2 boxen mit float:left und float:right mit width: 150px;

dann hab ich im prinzip noch ne box, die ich mit margin: 0px 200px 0px 200px;
mittig zwischen der linken und rechten box positioniere.
diese box passt sich breitenmäßig ja dem fenster an.
wenn ich nun ein bild in dieser box habe, das breiter ist, als die box selbst, erweitert es die mittige box im internet explorer, obwohl ich overflow auf auto hab.

ich hoffe, dass das verständlicher ist :oops:

Prima. Dann bau das doch bitte mal, und stell eine URL dazu zur Verfügung.

gut, jetz hab ichs mal in ein beispiel gepackt

http://www.toxz.de/_temp/css/test.html

da passierts dann auch im ie
die css sachen sind gleich mit in der html!

Zumindest für dieses Testcase im Quirksmode sollte width:100% in #main funktionieren; dies ist vor den anderen Browsern per Conditional Comment zu verstecken. Lässt du dein Template denn im Quirksmode laufen?

Ich fürchte, dieser Thread wird noch länger.

du meinst, wenn ich den doctype komplett weglasse?

ich nutz für das forum html 4.01

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

wenn ich die doctype definition raus lasse:
beim test-bespiel passt er das bild an im ie, in meinem forum wieder blöder weise nich...

das liegt dann wohl an den ganzen verschachtelungen!?!?

arghh

Ich will dich mit meiner Fragerei ja nicht verunsichern. Vielleicht noch eine letzte Frage, bevor ich mal wieder etwas Schlaf suche in dem zerwühlten, doch kalten Bett: Wenn du ein Testcase bastelst, warum dann nicht eins, was die Situation auch abbildet? Ich meine, wenn du in deiner Seite eine Tabelle und dein Doctype nimmst, warum dann nicht auch in deinem Testcase? Es mag für dich jetzt erstaunlich klingen, aber ich denke doch, dass ein Testcase exakt den Fehler nachbilden sollte, wenn du schon nicht die wirkliche Seite posten willst, die ja so geheim ist. Lies dir doch bitte noch mal den Hinweistext zu diesem Forum durch. Sieh mal dein Codeschnipsel an. Man kann kein Doctype sehen. Dann sieh dir dein Testcase an. Auch kein Doctype. Woher soll ich annehmen, dass du überhaupt eins verwendest? Nun zitierst du dein Doctype, in dem zehnten Posting zu diesem Thread. Und nun? Ich bastele kein Testcase für dich. Und nun stell dir mal vor, es gäbe keine Lösung in deiner Tabelle. Und dann? Du denkst jetzt vielleicht, ich wüsste die Lösung, aber wollte sie nur nicht verraten. Irrtum. Ich kann eine Lösung immer nur an einer wirklichen Seite erarbeiten.

die seite bzw. skin ist nicht geheim, nur unvollständig...
ich kann es also für mein forum noch nicht einstellen, da sonst die hälfte
der seiten völlig unformatiert sind.

ich hab auch nicht von dir erwartet, dass du mir die lösung baust oder so,
ich dachte nur: "ich komm hier irgendwie nich vorran, frag ich mal hier im forum".

ich hatte vielmehr erwartet, dass es vielleicht leichter zu lösen ist, oder jemand einen groben fehler sieht...

na ja - wie auch immer :lol:

falls du noch lust hast, kannst du dir ja hier das komplette skin ziehen und reingucken.

leider wirst du natürlich nix sehen, außer du hast auch phpboard installiert.
aber dafür sind natürlich die html und css angaben komplett.

der kopf steht in overall_header.tpl
mein problem befindet sich in viewtopic_body.tpl
und zum schluss kommt dann noch der overall_footer.tpl

und die css sachen sind in der botb.css

www.toxz.de/_temp/botb.zip

danke aber für deine geduld mit mir :mrgreen:

(und nich über das zusammengemurkste css wundern - is nich gerade optimiert)