nicht angemeldet
1 Pixel Divider
Folgendes Problem:
Zwischen zwei übereinander liegenden Artikeln soll eine 1 Pixel hohe Linie erscheinen. Ein Artikel besteht aus zwei nebeneinander liegenden Divs, die variablen Inhalt bekommen und daher nicht in der Höhe fixiert sind. (Ich will das auch nicht mit JavaScript angleichen. Jedenfalls nicht wenn es nicht unbedingt nötig ist.)
Die Linie darf wirklich nur 1 Pixel hoch sein, da die Artikel-Divs genau anliegen müssen.
Im Mozilla kein Problem mit dieser Klasse:
.orangeBorder {
clear: both;
height:1px;
background-color:#F7B862;
margin:0;
padding:0;
}
HTML: <div class="orangeBorder"> </div>
Im IE 6 komme ich mit der zusätzlichen Angabe von font-size:1px immerhin auf eine 2 Pixel dicke Linie. Wenn ich das Div mit einem Spacer-Gif fülle geht es zwar. Aber es gibt hoffentliche eine bessere Lösung.
Semantisch am geeignetesten wäre sicher eine HR. Die erwies sich allerdings als noch weitaus sperriger. Nach Möglichkeit sollte die Lösung als XHTML 1.0 Strict validieren, wenn auch eher aus sportlichen Gründen.
-
Hallo Piet
Versuchs mal mit: line-height:1px;
Oder, eventuell die zwei nebeneinander liegenden Divs in ein drittes packen und dort einen Border setzen.
MFG
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Versuchs mal mit: line-height:1px;
Hilft gar nicht. Font-Size auf 1px oder 0.001 ems bringt die Höhe auf 2 Pixel im IE 6.
Oder, eventuell die zwei nebeneinander liegenden Divs in ein drittes packen und dort einen Border setzen.
Yep. Das funktioniert. Falls es keine andere Lösung gibt, werde ich es so machen. Allerdings macht eine weitere Verschachtelung der DIVs den Code nicht gerade überschaubarer und das Gerüst insgesamt etwas starrer.
-
Hallo Piet
Versuchs mal mit: line-height:1px;
Hilft gar nicht. Font-Size auf 1px oder 0.001 ems bringt die Höhe auf 2 Pixel im IE 6.
^
Hast du es mit "line-height:1px" probiert?Allerdings macht eine weitere Verschachtelung der DIVs den Code nicht gerade überschaubarer und das Gerüst insgesamt etwas starrer.
Wie breit sind die nebeneinanderliegenden Divs?
Haben diese einen Margin, ein Padding, eine Hintergrundfarbe, einen Border?Je nach den Antworten könnte sich noch eine Lösung ergeben.
MFG
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hast du es mit "line-height:1px" probiert?
Ja.
Wie breit sind die nebeneinanderliegenden Divs?
Haben diese einen Margin, ein Padding, eine Hintergrundfarbe, einen Border?Da ich nicht erkennen kann, worauf du mit deiner Frage hinaus willst, hier einfach mal ein Auszug aus dem Quelltext:
#content { /*wrapper for 2-collumn articles */
width: 544px;
float:left;
background-color: #FCF0E3;
border: 1px solid #CCCCCC;
padding: 0px;
}.article {
width: 386px;
padding: 0;
border-right: 1px solid #F7B862;
margin:0;
float:left;
}.contextual {
float:left;
width: 118px;
padding: 5px;
}.divider {
clear: both;
height:1px;
font-size:1px;
background-color:#F7B862;
margin:0;
padding:0;
}<div id="content">
<div class="article">foo</div>
<div class="contextual">bar</div>
<div class="divider"> </div><div class="article">foo</div>
<div class="contextual">bar</div>
<div class="divider"> </div></div>
-
Hallo Piet
Ich habe mal ein bisschen herumgebastelt, schai es dir an:
http://d-graff.de/demos/selfhtml/piet.htmlMFG
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hi Detlev,
hast du dir das mal im IE 6 angesehen? Dort sind die Divider leider immer noch zwei Pixel hoch. An ähnliche Effekte errinnere ich mich noch aus der Zeit der Tabellenlayouts ;) Dort musste man auch immer ein 1Pixel Gif ohne Leerzeichen drumrum in eine TD legen, damit die tatsächlich nur 1 Pixel hoch war.
Anscheinend geht IE davon aus, das wenn nichts anderes in dem DIV liegt Text drin sein muss und der darf vielleicht nicht nur 1 Pixel hoch sein???
-
Hallo Piet
hast du dir das mal im IE 6 angesehen?
Ja http://d-graff.de/demos/selfhtml/piet.gif
Anscheinend geht IE davon aus, das wenn nichts anderes in dem DIV liegt Text drin sein muss und der darf vielleicht nicht nur 1 Pixel hoch sein???
Welche IE-Version, unter welchem Betriebssystem?
MFG
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
oh, welche Version vom IE ist das?
Welche IE-Version, unter welchem Betriebssystem?
IE 6 (alle aktuellen Updates) auf Win 2000
-
Hallo Piet
oh, welche Version vom IE ist das?
6.0.2800.1106 auf Win68
Ohne line-height macht der auch mindestens 2 Pixel.
MFG
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Ohne line-height macht der auch mindestens 2 Pixel.
Jau, funktioniert. Vielen Dank. Das blöde ist, dass ich das schon ausprobiert hatte, aber mich wohl offensichtlich dabei verschrieben hatte. Greez, Piet
-
Hallo Piet
Jau, funktioniert. Vielen Dank. Das blöde ist, dass ich das schon ausprobiert hatte, aber mich wohl offensichtlich dabei verschrieben hatte. Greez, Piet
Dann verstehe ich aber [pref:t=76123&m=438588] nicht.
Hattest du dir mein Beispiel gar nicht im IE angesehen?MFG
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Dann verstehe ich aber [pref:t=76123&m=438588] nicht.
Hattest du dir mein Beispiel gar nicht im IE angesehen?Doch hatte ich. Du meinst doch deine Testseite? http://d-graff.de/demos/selfhtml/piet.html Hier sind die Divider im IE 6 2 Pixel hoch. Der Unterschied ist, dass in deiner Version in dem DIV kein Inhalt ist "<div class="divider"> </div>", in meiner Version in der es jetzt ebdlich geklappt hat ist ein drin "<div class="divider"> </div>"
Jetzt könnte man sich noch fragen "Warum ist das so?" oder es lassen ;)
Schönen Sonntag,
Piet-
Hallo Piet
Jetzt könnte man sich noch fragen "Warum ist das so?" oder es lassen ;)
Warum der IE leere DIVs so groß darstellt? Da spinnt der wohl.
Warum ein DIV mit 1px großer Schrift 2px hoch wird ist logisch.
Der IE erweitert DIVs auf die Größe des Inhaltes (Zeilenhöhe) und der ist bei 1px Schrift etwas größer als genau 1px. Die anderen Browser tun dies standardmäßig nicht, wodurch die Größe eingehalten wird, egal wie groß der Inhalt ist.MFG
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-
-
-
-
-
-
-
-
-
-
Hallo,
Zwischen zwei übereinander liegenden Artikeln soll eine 1 Pixel hohe Linie erscheinen. Ein Artikel besteht aus zwei nebeneinander liegenden Divs, die variablen Inhalt bekommen und daher nicht in der Höhe fixiert sind. (Ich will das auch nicht mit JavaScript angleichen. Jedenfalls nicht wenn es nicht unbedingt nötig ist.)
warum so kompliziert ? Benutze doch einfach eine Tabelle...
<head>
<style type=text/css>
td{border-bottom:solid 1px black;}
</style>
</head>
<body>
<table border=0>
<tr>
<td>Linke Seite des 1.Artikels</td>
<td>Rechte Seite des 1.Artikels</td>
</tr>
<tr>
<td>Linke Seite des 2.Artikels</td>
<td>Rechte Seite des 2.Artikels</td>
</tr>
</table>
</body>CU Christoph
-
warum so kompliziert ? Benutze doch einfach eine Tabelle...
Weil Tabellen für tabellarische Daten gedacht sind und nicht für Layouts. Allerdings wäre es damit auch völlig einfach, da muss ich dir recht geben. Ich suche aber nun mal nach einem möglichst eleganten und standardkonformen Weg diese Seite hinzubekommen.
-
-
wieso benutzt du denn nicht einfach ein nach deinen Wünschen formartiertes <hr>?
-
wieso benutzt du denn nicht einfach ein nach deinen Wünschen formartiertes <hr>?
Das habe ich versucht, aber damit keinen Erfolg gehabt. Da alle HR-speziellen Attribute deprecated sind, bleibt nur CSS und damit habe ich es nicht hinbekommen. Auch selfhtml warnt vor allzuviel Vertrauen in die Brwoser-Unterstützung von CSS formatierten HRs:
http://selfhtml.teamone.de/html/text/trennlinien.htm#definieren
-
