XHTMLforum

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)

SURE612 12.07.2006 11:23

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

duessu 12.07.2006 12:54

Setzt mal für .posttext eine fixe breite.

Gibt es irgenwo eine Live-Demo?

SURE612 12.07.2006 13:36

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)

SURE612 12.07.2006 22:54

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

IChao 12.07.2006 23:25

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.

SURE612 12.07.2006 23:47

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:

IChao 13.07.2006 00:00

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

SURE612 13.07.2006 01:51

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!

IChao 13.07.2006 14:21

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.

SURE612 13.07.2006 22:55

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:30 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019