Stefen: min. Höhe einer Box

Hi Leutz,

ich habe eine Box mit einer Höhe von 5px. Im IE ist diese Box viel höher als im Mozilla/Firefox. Wieso?

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
     "http://www.w3.org/TR/html4/transitional.dtd">  
  
<html>  
<head>  
<title>Test</title>  
<style type="text/css">  
<!--  
  .box {  
    background-color:#000000;  
    height:5px;  
    width:100%;  
  }  
-->  
</style>  
</head>  
<body>  
  <div class="box"></div>  
</body>  
</html>  

MfG Stefen

  1. Versuch Mal die line-height:5px; oder kleiner zu setzen.

    mfg
    Anschinsan

    .box {
        background-color:#000000;
        height:5px;
        width:100%;
      }
    -->
    </style>
    </head>
    <body>
      <div class="box"></div>
    </body>
    </html>
    [/code]

    MfG Stefen

    1. Hallo Anschinsan,

      Versuch Mal die line-height:5px; oder kleiner zu setzen.

      Oder auch mit anderen Worten: Die Zeilenhöhe ist zu groß, und deshalb skaliert der IE das div viel höher, obwohl noch gar kein Text drinnen steht.
      Aber eine line-height von 1 oder 0 Pixeln wäre sogar besser, für den Fall dass jemand auf die Idee kommt und die Schrift skalieren möchte. ;-)

      Grüße

      Marc Reichelt || http://www.marcreichelt.de/

      --
      Linux is like a wigwam - no windows, no gates and an Apache inside!
      Selfcode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
      http://emmanuel.dammerer.at/selfcode.html
      1. Hallo,

        Versuch Mal die line-height:5px; oder kleiner zu setzen.

        Oder auch mit anderen Worten: Die Zeilenhöhe ist zu groß,...

        aha, und wie kann ich die Zeilenhöhe verändern?

        Aber eine line-height von 1 oder 0 Pixeln wäre sogar besser, für den Fall dass jemand auf die Idee kommt und die Schrift skalieren möchte.

        bringt nix.

        Gruß

      2. Aber eine line-height von 1 oder 0 Pixeln wäre sogar besser, für den Fall dass jemand auf die Idee kommt und die Schrift skalieren möchte. ;-)

        Hallo Marc,

        Tatsache: Ich bin jetzt innerhalb von 1 Woche auf 2 Kunden gestoßen die im Mozilla ihre Schriftart prinzipiell auf 125% eingestellt haben - Dank der vielen tollen Designer die mit 10px Schriften arbeiten ...

        Leider zerschießen schon die 125% ein grafisches Layout ziemlich! War recht peinlich vor den Kunden ;-( ... Ich werde mich wieder etwas mehr im Minimalismus üben ;-)

        Grüße
        Anschinsan

        1. Hallo Anschinsan,

          Tatsache: Ich bin jetzt innerhalb von 1 Woche auf 2 Kunden gestoßen die im Mozilla ihre Schriftart prinzipiell auf 125% eingestellt haben - Dank der vielen tollen Designer die mit 10px Schriften arbeiten ...

          Leider zerschießen schon die 125% ein grafisches Layout ziemlich! War recht peinlich vor den Kunden ;-( ... Ich werde mich wieder etwas mehr im Minimalismus üben ;-)

          welches Schriftformat ist zu empfehlen?

          Gruß
          Stefen

          1. welches Schriftformat ist zu empfehlen?

            Hallo Stefen,

            kann man so allgemein nicht sagen. Wen möchtest du denn mit deiner Seite ansprechen?

            mfg
            Anschinsan

          2. Tach,

            welches Schriftformat ist zu empfehlen?

            Das ist recht eindeutig 1em (für IE dank eines Bugs 101%).

            mfg
            Woodfighter

    2. Hallo Anschinsan,

      Versuch Mal die line-height:5px; oder kleiner zu setzen.

      ne, bringt nichts.
      Im Firefox kann ich sogar die Höhe auf 1px setzten, im IE scheint die min. Höhe irgendwo zwischen 10- und 15px zu liegen. Das muss doch auch für den IE gehn !?

      Gruß
      Stefen

      1. Hallo Stefen,

        Versuch Mal die line-height:5px; oder kleiner zu setzen.

        ne, bringt nichts.
        Im Firefox kann ich sogar die Höhe auf 1px setzten, im IE scheint die min. Höhe irgendwo zwischen 10- und 15px zu liegen. Das muss doch auch für den IE gehn !?

        Hmmm. Versuch mal, dem IE das mit einer sehr kleinen font-size beizubringen.
        Was willst du mit einem <div>-Tag, das keinen Inhalt hat, eigentlich genau bezwecken? Da gibt es bestimmt auch leichtere Methoden.

        Grüße

        Marc Reichelt || http://www.marcreichelt.de/

        --
        Linux is like a wigwam - no windows, no gates and an Apache inside!
        Selfcode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
        http://emmanuel.dammerer.at/selfcode.html
        1. Hi Reichelt,

          Hmmm. Versuch mal, dem IE das mit einer sehr kleinen font-size beizubringen.
          Was willst du mit einem <div>-Tag, das keinen Inhalt hat, eigentlich genau bezwecken? Da gibt es bestimmt auch leichtere Methoden.

          Mit font-size tut sich zwar was, sind aber immer noch leicht verschieden hoch. Ach wie ich dieses Sch*** IE doch liebe! Wer macht es eigentlich richtig, der IE oder Firefox?

          Das leere Div-Element verwende ich eigentlich nur für Designtechnische Zwecke. Was könntest Du mir denn stattdessen empfehlen, hr?

          Gruß
          Stefen

          1. Das leere Div-Element verwende ich eigentlich nur für Designtechnische Zwecke. Was könntest Du mir denn stattdessen empfehlen, hr?

            Ich empfehle Dir Inhalt! Mit HTML unweigerlich verknüpft ist INHALT. Und CSS lohnt sich erst, wenn INHALT mit einer semantischen STRUKTUR vorhanden ist.

            Ach so, jetzt verstehe ich, Du willst nur eine Linie?

            Da gibts nur zwei semantisch korrekte Methoden:

            1. <hr>, das einen inhaltlichen Separator darstellt, also nur da eingesetzt werden sollte, wo eine Inhaltliche Trennung bezweckt wird.
            2. border (CSS) an jedem anderen beliebigen Element mit Inhalt. Soll nur eine optische Linie ohne semantische Bedeutung zwischen zwei Textabsätze gestellt werden, so erhält einer der beiden Absätze (<p>) eine border an einer Seite.

            Ein <div> als gestalterisches Element zu benutzen ist semantisch gesehen absolut sinnfrei um nicht zu sagen, falsch. Gestaltung, sprich Layout/Design macht man ohnehin nicht mit HTML, sondern mit CSS.

            1. Das leere Div-Element verwende ich eigentlich nur für Designtechnische Zwecke. Was könntest Du mir denn stattdessen empfehlen, hr?

              Ich empfehle Dir Inhalt! Mit HTML unweigerlich verknüpft ist INHALT. Und CSS lohnt sich erst, wenn INHALT mit einer semantischen STRUKTUR vorhanden ist.

              meine güte, dass hätt ich jetzt aber echt nich gedacht, danke vielmals für deinen hinweis...

              Ach so, jetzt verstehe ich, Du willst nur eine Linie?

              nein keine linie!

              Da gibts nur zwei semantisch korrekte Methoden:...

              was ich für methoden verwende musst du schon mir überlassen, obs dir nun gefällt oder nicht...

              1. was ich für methoden verwende musst du schon mir überlassen, obs dir nun gefällt oder nicht...

                Ja, natürlich. Jeder ist seines eigenen Glückes (oder Pechs) Schmied.

                Entschuldige, ich wusste nicht, dass Du keine kompetente Hilfe wolltest.

              2. Hallo Stefen,

                Das leere Div-Element verwende ich eigentlich nur für Designtechnische Zwecke. Was könntest Du mir denn stattdessen empfehlen, hr?

                Ach so, jetzt verstehe ich, Du willst nur eine Linie?
                nein keine linie!

                Das was du zuerst gepostet hast, sieht aber nach nichts anderem aus:
                https://forum.selfhtml.org/?t=111868&m=705588

                Da gibts nur zwei semantisch korrekte Methoden:...
                was ich für methoden verwende musst du schon mir überlassen, obs dir nun gefällt oder nicht...

                Ich würde mich Efchens Vorschlag anschließen und einfach dem folgenden Blockelement ein border-top von 5px zuweisen, oder dem aktuellen Blockelement ein entsprechendes border-bottom. Das ist doch viel eleganter, in aller Regel auch eleganter als <hr>.

                Fühl dich mal nicht gleich auf den Schlips getreten, wenn dir hier konstruktive Vorschläge gemacht werden, dafür ist das Forum doch da!

                Gruß Gernot

                1. was ich für methoden verwende musst du schon mir überlassen, obs dir nun gefällt oder nicht...

                  Ich würde mich Efchens Vorschlag anschließen

                  Hey, was er macht oder nicht, musst Du schon ihm überlassen!!

                  Auch wenns Dir nicht gefällt! ;-)

                  SCNR,
                  -Efchen

                2. Das ist doch viel eleganter, in aller Regel auch eleganter als <hr>.

                  Vor allem, weil das <hr> auch einen inhaltlichen Break macht und nicht nur optisches Beiwerk ist.

          2. Hallo Stefen,

            Das leere Div-Element verwende ich eigentlich nur für Designtechnische Zwecke. Was könntest Du mir denn stattdessen empfehlen, hr?

            Ich finde, das würde strukturell besser passen, aber wie auch immer, ob <hr> oder DIV-Element, du wirst wohl nicht umhinkommen, für den IE mittels Hack oder Conditional-Comment eine Extrawurst in Form eines margin-top von ca. -7px zu braten.

            Gruß Gernot

            1. Ich finde, das würde strukturell besser passen, aber wie auch immer, ob <hr> oder DIV-Element, du wirst wohl nicht umhinkommen, für den IE mittels Hack oder Conditional-Comment eine Extrawurst in Form eines margin-top von ca. -7px zu braten.

              Den Aufwand für eine gestalterische Linie?
              Oder hab ich was missverstanden?

              1. Den Aufwand für eine gestalterische Linie?
                Oder hab ich was missverstanden?

                das habe ich mich auch gefragt, habs mir aber verkniffen, overflow machst ohne großen aufwand!

                1. das habe ich mich auch gefragt, habs mir aber verkniffen, overflow machst ohne großen aufwand!

                  overflow:hidden auf ein div, das nur eine Linie erzeugen soll, ist aber völlig sinnfrei.

                  Aber semantisch korrekte Lösungen habe ich ja bereits vorgeschlagen.

  2. Hallo Stefan,

    versuch es zusätzlich mal mit
    overflow:hidden

    Bei mir gehts (IE 6). Der IE hat die Angewohnheit, Blockelemente zu vergrößern, wenn die Angegebene Größe (seiner Meinung nach) nicht ausreicht, um den Inhalt darzustellen. Er interpretiert also das height so wie andere Browser das min-height (welches er leider gar nicht interpretiert).

    Schöne Grüße
    adapter

    1. Hallo,

      versuch es zusätzlich mal mit
      overflow:hidden

      tatsache, mit overflow gehts! Danke!

      Gruß
      Stefen