[css] div - height

[weserweb]

hallo,

weshalb wird mit dem folgenden code der div-container nicht mit einer höhe von 1x, sondern mit mindestens ca. 20px höhe dargestellt?

höher als 20px ist kein problem.

<div style="background-color:#efefef; width:200px; height:1px"></div> 

gibt es ein internes limit oder wo mache ich den fehler?

danke, wolfgang

[Wurzel]

setz mal ein "font-size:0px;" mit ein, dann gehts (IE6). liegt vielleicht daran, dass trotz leerem inhalt ein text erwartet und dmait auch der platz freigehalten wird.

[mrhappiness]

warum nimmst du nicht <hr /> dafür?

[schmalle]

selbst der ie müsste eigentlich mucken machen. ein div darf ja ned leer sein! somit eher font-size 1px und ein & nbsp; mit rein ... oder irre ich mich jetzt total?

EDIT:

---

@happy gute frage

---

[mrhappiness]

warum darf ein div nicht leer sein?

es is zwar imho extremst sinnfrei, aber korrekt


aber in diesem fall, sollte eine geeignete css-formatierung für das dafür vorgesehene element hr besser geeignet sein. logischer isses - will ich meinen - auch

[Wurzel]

wenn ich ne hübsche trennlinie haben will, steh ich aber vor dem problem, dass selfHTML sagt:

Das <hr>-Tag können Sie auch mit CSS gestalten. Das ist strikt HTML-konform und Sie haben noch deutlich mehr Gestaltungsmöglichkeiten als mit HTML-Attributen. Leider interpretiert jedoch der Netscape-Browser CSS-Eigenschaften in Verbindung mit Trennlinien noch nicht (Stand: Version 6.1), und auch der Internet Explorer noch nicht so lange. Die Verwendung ist also mit Vorsicht zu genießen.

da finde ich den div-layer designer-freundlicher, auch wenns nicht 100% sauber ist.

[mrhappiness]

irgendwas der art

hr
{
  height:0px; 
  border-width:0 0 1px 0;
  border-style:dotted;
  border-color:#123;
}

/* oder */

hr
{
  height:1px; 
  border:0;
  background-color:#f0a;
  color: #f0a;
}

wird er ja verstehen


oder, da man trennlinien meist zwischen zwei absätzen hat, man formatiert den absatz mit border-top...

[weserweb]

danke für die schnellen antworten!

1) ich möchte eine farbige trennlinie erzeugen, deshalb leer

2) <hr> geht nicht, weil die info für die hintergrundfarbe aus einem css kommt. bei folgendem code wird die hintergrundfarbe nicht dargestellt

echo "<hr class='back-line' style='width:400px; height:1px'>"; 

3) wurzel liefert den grund noch einmal

4) font-size 0 ist nicht nötig - ich hatte eine falsche testplattform, sorry

5) ich test unter ie6

mrhappiness,
die farb-info kommt wie gesagt aus einem style-sheet aus einer ganz bestimmten zeile. die struktur des stylesheets kann nicht geändert werden, da teil eines cms. die class "back-line" enthält nur die farbinfo.

ich werde es wohl mal mit "border-top" versuchen.
danke für die rege beteiligung!

[php-sebi]

ich will auch eine Trennlinie machen, hatte sie bisher auch mit nem div gemacht doch da sie beim ie net angezeigt wird bin ich auf die idee gekommen das ganze mit hr zumachen jetzt hab ich aber folgendes Problem:

beim IE is der Abstand zw. dem Text über der Trennlinie und der Trennlinie zu groß und ich kriegs mit css net gebacken hr so zu formatieren dass es im Abstand von 3px angezeigt wird.

Wie geht das?

Gruß Sebi

[RanzigeMilch]

Original geschrieben von weserweb


mrhappiness,
die farb-info kommt wie gesagt aus einem style-sheet aus einer ganz bestimmten zeile. die struktur des stylesheets kann nicht geändert werden, da teil eines cms. die class "back-line" enthält nur die farbinfo.

wo ist das problem hr.black-line oder ne neue klasse hinzuzufügen??

@sebi
wie hast du denn versucht den abstand kleiner zu gestalten?

[Benny-one]

mach mal line-height: 1px;

[php-sebi]

Danke! line-height funtzt.

Hab bisher was ganz anderes ausprobiert gehabt:

<table cellspacing='0'width='180'>
 <tr>
    <td colspan=3 style='border-top: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0;border-right: 1px solid #C0C0C0;'>
      <span class='headi'>
        ".$Name [$i]."
      </span>
    </td>
  </tr>


  <tr style='border-left: 1px solid #C0C0C0;border-right: 1px solid #C0C0C0;'>
    <td colspan=3 style='border-left: 1px solid #C0C0C0;border-right: 1px solid #C0C0C0;'>
      <span class='head'>
        schrieb am ".$Date [$i]." um ".$Time [$i]."
      </span>
    </td>
  </tr>



____________________________________________________
<!-- dieser Abschnitt war die linie -->

  <tr>
    <td style='border-left: 1px solid #C0C0C0; width:5px; height:2px; '>
    </td>
    
    <td style='border-left: 1px solid #C0C0C0;border-right: 1px solid #C0C0C0;' align='center' height='1px' background='pixel.jpg'>
    </td>

    <td style='width:5px; height:1px; border-right: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0;'>
    </td>
  </tr>
 
_____________________________________________________
  <tr>
    <td colspan=3 style='margin-bottom:2px; border-left: 1px solid #C0C0C0;border-right: 1px solid #C0C0C0;border-bottom: 1px solid #C0C0C0;'>
      <p class='text'>
        ".$Text [$i]."
      </p>
    </td>
  </tr>
  <tr>
    <td height='3'>


    </td>
  </tr>
</table> 

Oh man und da is mir grad aufgefallen das ich das ganze auch viel einfacher hätte machen können. einfach border um die ganze table

Na ja jetzt mach ichs mit hr.

Und mal noch was für mein verständnis: Was bedeutet bzw ist cms?

[Benny-one]

Ein CMS ist ein Content-Management-System http://de.wikipedia.org/wiki/Content-Management-System