Hans: Firefox overflow padding Problem und overflow-x?

Hi,
zuerst mal eine Kurze Frage:
Seit wann beherrscht firefox die Angabe "overflow-x"?

Zumindest hat mich meine bisherigen Funstücke im Netz
vom Gegenteil überzeugen wollen.

bsp.Selfhtml

Na ja wie dem auch sei, mein eigentliches Problem liegt anders.

Ich habe ein Div, dieses hat eine Höhe von 400px.
Keine Breitenangabe, weil es sich dynamisch anpassen soll.
Und das geht in diesem Fall nicht mal mit Prozentangaben, denn
die Position ist absolute und das scheint dann nicht hinzuhauen.

Nun ja, es soll gewollt ein vertikaler Scrollbalken erscheinen.
Klappt auch durch overflow=auto.
Leider aber auch ein horizontaler Balken.
Dachte overflow-x würde das zwar im IE ändern aber nicht im
Firefox. Irrtum das klappt. Hätte also erst versuchen sollen
bevor ich die vorherrschende Literatur zu Hilfe nehme, die
das abstreitet.

In diesem Zusammenhang allerdings macht mir der FF doch Probleme,
und zwar wenn ich dem Div eine Paddingangabe verpasse.
Dann zerreisst es ihn wieder. Warum und was kann ich dagegen tun?.

Quelltext:
*******************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN">
<html>
<head>
<title>test</title>

<style type="text/css">
<!--

body{margin:0px;padding:0px;background-color:#6F6F6F;font-size:12px;}

#boxnav{
position:absolute;top:20px;left:70px;
width:200px;
height:400px;
background-color:#00AFFF;
}

#boxmain{
position:absolute;top:20px;left:280px;
margin-right:50px;
height:400px;
background-color:#C0FF00;
overflow:auto;
text-align:justify;

padding:20px;
/***  Wenn das raus ist, stimmt die Höhe auch im FF ***/

overflow-x: hidden;
/**  Wenn overflow+padding raus ist, kommt horiz. Scrollbalken auch im FF ***/
}

div a{
display:block;
color:#FF9F00;
background-color:#ffffff;
text-decoration:none;}
div * h1{color:#0000BF;}
div a* h1:hover{color:#007F00;}
-->
</style>

</head>
<body scroll="auto">

<div id="boxnav">
nav
<a href="http://google.de"><p><h1>Google</h1></p>Suchen, finden usw</a>
<a href="http://google.de"><p><h1>Google</h1></p>Suchen, finden usw</a>
<a href="http://google.de"><p><h1>Google</h1></p>Suchen, finden usw</a>
</div>

<div id="boxmain">
<h1>EDMUND STOIBER</h1> tritt auf als ein Mann, der seine Sache noch
lange nicht verloren gibt, auch wenn die Nachrichten voll mit politischen
Nachrufen auf ihn sind. Er scheint entschlossen, mit allen Mitteln dafür
zu kämpfen, dass ihn die CSU noch einmal auf einem Parteitag zum Spitzenkandidaten für die Landtagswahl 2008 kürt. Selbst wird er den Weg für Nachfolger nicht so schnell frei
machen - darauf deuteten alle Vorzeichen am Wochenende hin. Für seine Rede beim Neujahrsempfang in der
<br>
Münchner Residenz hatten seine Berater ihn vorsichtshalber schon einmal in eine Reihe mit dem früheren amerikanischen Präsidenten Truman gestellt, dem das Wort zugeschrieben wird, dass die Küche verlassen soll, wer Hitze nicht verträgt. Stoibers Einsicht, dass das biologische Alter nicht immer mit dem politischen Alter zusammenfällt, ist auch in den medialen Fegefeuern der vergangenen Tage nicht gewachsen.

<p>
Münchner Residenz hatten seine Berater ihn vorsichtshalber schon einmal in eine Reihe mit dem früheren amerikanischen Präsidenten Truman gestellt, dem das Wort zugeschrieben wird, dass die Küche verlassen soll, wer Hitze nicht verträgt. Stoibers Einsicht, dass das biologische Alter nicht immer mit dem politischen Alter zusammenfällt, ist auch in den medialen Fegefeuern der vergangenen Tage nicht gewachsen.</p>

<br>
Münchner Residenz hatten seine Berater ihn vorsichtshalber schon einmal in eine Reihe mit dem früheren amerikanischen Präsidenten Truman gestellt, dem das Wort zugeschrieben wird, dass die Küche verlassen soll, wer Hitze nicht verträgt. Stoibers Einsicht, dass das

<p>
Münchner Residenz hatten seine Berater ihn vorsichtshalber schon einmal in eine Reihe mit dem früheren amerikanischen Präsidenten Truman dem politischen Alter zusammenfällt, ist auch in den medialen Fegefeuern der vergangenen Tage nicht gewachsen.</p>

<br>
Münchner Residenz hatten seine Berater ihn vorsichtshalber schon einmal in eine Reihe mit dem früheren amerikanischen Präsidenten Truman gestellt, dem das Wort zugeschrieben wird, dass die Küche verlassen sollFegefeuern der vergangenen Tage nicht gewachsen.

<p>
Münchner Residenz hatten seine Berater ihn vorsichtshalber schon einmal in eine Reihe mit dem früheren amerikanischen Präsidenten Truman gestellt Fegefeuern der vergangenen Tage nicht gewachsen.</p>

<br>
Münchner Residenz hatten seine Berater ihn vorsichtshalber schon einmal in eine Reihe mit dem früheren amerikanischen Präsidenten Truman gestellt, dem das Wort zugeschrieben wird, dass die Küche verlassen soll, wer dem politischen Alter zusammenfällt, ist auch in den medialen Fegefeuern der vergangenen Tage nicht gewachsen.

<p>
Münchner Residenz hatten seine Berater ihn vorsichtshalber schon einmal in eine Reihe mit dem früheren amerikanischen Präsidenten Truman Fegefeuern der vergangenen Tage nicht gewachsen.</p>

<br>
Münchner Residenz hatten seine Berater ihn vorsichtshalber schon einmal in eine Reihe mit dem früheren amerikanischen Präsidenten Truman gestellt, dem der vergangenen Tage nicht gewachsen.

<p>
Münchner Residenz hatten seine Berater ihn vorsichtshalber schon einmal in eine Reihe mit dem früheren amerikanischen Präsidenten Truman gestellt, dem das Wort zugeschrieben wird, dass die Küche verlassen soll, wer Hitze nicht verträgt. Stoibers Einsicht, dass das biologische Alter nicht immer mit dem politischen Alter zusammenfällt, ist auch in den medialen Fegefeuern der vergangenen Tage nicht gewachsen.</p>
</div>

</body>
</html>

*************************

Hans

  1. Hallo,

    zuerst mal eine Kurze Frage:
    Seit wann beherrscht firefox die Angabe "overflow-x"?

    Seit Version 1.5

    Zumindest hat mich meine bisherigen Funstücke im Netz
    vom Gegenteil überzeugen wollen.

    Dann wurde dort nicht in 1.5-er getestet, sondern im Firefox 1.0

    Übrigens wird die Eigenschaft auch in der CSS3-Spezifikation enthalten sein, ist also in Zukunft nicht mehr proprietär.

    Dachte overflow-x würde das zwar im IE ändern aber nicht im
    Firefox. Irrtum das klappt. Hätte also erst versuchen sollen
    bevor ich die vorherrschende Literatur zu Hilfe nehme, die
    das abstreitet.

    ;-)

    In diesem Zusammenhang allerdings macht mir der FF doch Probleme,
    und zwar wenn ich dem Div eine Paddingangabe verpasse.
    Dann zerreisst es ihn wieder. Warum und was kann ich dagegen tun?.

    Der Firefox macht's richtig! Du solltest dich mit dem Box-Modell auseinandersetzen.
    Normalerweise gilt: Gesamtbreite = margin+border+padding+width+padding+border+margin

    Aber auch das kann man mit einigen CSS3-Eigenschaften schon beeinflussen:

    im Firefox:
    -moz-box-sizing:border-box

    andere Browser (Opera und so) unterstützen dagegen schon:
    box-sizing:border-box

    Nur der IE kennt nix davon und muss bei dir wohl leider auch weiterhin im Quirksmode bleiben :-(

    mfg. Daniel

    1. Hallo Daniel,

      Seit Version 1.5

      das wissen bestimmt nicht Viele ;-)
      Wird oft gefragt aber nie erwähnt.

      Nur der IE kennt nix davon und muss bei dir wohl leider auch weiterhin im Quirksmode bleiben :-(

      Ja immer das gleiche, CSS könnte so schön sein, wenn alles in jedem Browser gleich aussehen würde.

      Vielen Dank
      Hans

      1. Hallo,

        Ja immer das gleiche, CSS könnte so schön sein, wenn alles in jedem Browser gleich aussehen würde.

        Du würdest dir schon einiges erleichtern, wenn du den IE in den standardkonformen Modus versetzen würdest. Dann würden alle Browser das selbe Box-Modell verwenden und du bräuchtest nicht die ganzen halbimplementierten box-sizing-Angaben.

        Gruß;

        1. Hallo,

          Du würdest dir schon einiges erleichtern, wenn du den IE in den standardkonformen Modus versetzen würdest. Dann würden alle Browser das selbe Box-Modell verwenden und du bräuchtest nicht die ganzen halbimplementierten box-sizing-Angaben.

          Ist ganz schön und gut, aber für manche Dinge ist das Border-Box-Modell einfach besser geeignet. Insbesondere in Verbindung mit %-Angaben

          mfg. Daniel

          1. Hallo,

            Ist ganz schön und gut, aber für manche Dinge ist das Border-Box-Modell einfach besser geeignet. Insbesondere in Verbindung mit %-Angaben

            Spieltst du damit auf eine Höhen- oder Breitenangabe für 100% + padding, border und margin an?
            Das wäre der einzige EInsatz, den ich mir momentan für border-box vorstellen kann. Er wird zwar häufig benutzt. Aber meist kommt man doch drum herum. - Zumindest ich ;-)

            Gruß;

            1. Hallo,

              Ist ganz schön und gut, aber für manche Dinge ist das Border-Box-Modell einfach besser geeignet. Insbesondere in Verbindung mit %-Angaben

              Spieltst du damit auf eine Höhen- oder Breitenangabe für 100% + padding, border und margin an?

              Ja, und anscheinend will der OP genau das erreichen.

              Das wäre der einzige EInsatz, den ich mir momentan für border-box vorstellen kann. Er wird zwar häufig benutzt. Aber meist kommt man doch drum herum. - Zumindest ich ;-)

              Wie denn?

              mfg. Daniel

              1. Hallo,

                Ja, und anscheinend will der OP genau das erreichen.

                Wirklich? Ich habe gelesen, dass Peozentangaben für die Breite eben nicht verwendet werden. Durch die automatische Anpassung dürfte padding dabei keinen Einfluss haben.
                Das Problem scheint mir eher, dass padding für alle vier Seiten anstatt nur für links und rechts gegeben wurde. So lese ich es zumindest aus den Kommentaren.

                Wie denn?

                Ich benutze es nicht ;-) Ich halte nicht viel von Prozentangaben in Webseiten, habe sie bisher auch nicht benötigt. Wenn ich mir die Seite des OP ansehe, sehe ich dafür auch keinen Bedarf.

                Das genannte Problem könnte man durch ein drumherum gewickeltes Extraelement lösen, aber das wäre nicht schön.

                Gruß;

                1. Hallo,

                  Ja, und anscheinend will der OP genau das erreichen.

                  Wirklich? Ich habe gelesen, dass Peozentangaben für die Breite eben nicht verwendet werden. Durch die automatische Anpassung dürfte padding dabei keinen Einfluss haben.

                  Stimmt. Ich hatte angenommen, dass der OP versucht, eine Box auf die volle Höhe zu strecken. Das scheint aber doch nicht der Fall zu sein…

                  Wie denn?

                  Ich benutze es nicht ;-) Ich halte nicht viel von Prozentangaben in Webseiten, habe sie bisher auch nicht benötigt. Wenn ich mir die Seite des OP ansehe, sehe ich dafür auch keinen Bedarf.

                  Wenn es um die Breite geht, stimme ich dir zu. Will man ein Element dagegen auf die volle Höhe strecken, braucht man Height:100% eben…

                  mfg. Daniel

                  1. Hallo,

                    Wenn es um die Breite geht, stimme ich dir zu. Will man ein Element dagegen auf die volle Höhe strecken, braucht man Height:100% eben…

                    Was ich auch nie mache ;-), aber ich will dir natürlich nicht das recht strittig machen, die Gestaltung nach *deinen* Wünschen zu realisieren.
                    Ich bin außerdem der Meinung, wenn es nicht wirklich irgendo Bedarf geben würde, wäre es nicht in CSS 3.

                    Gruß;