DIV-Element lässt sich per CSS im IE nicht auf 1px Höhe setzen

[Malki]

Hallo,

ich hab testweise in meiner HTML-Datei ein ganz einfaches DIV-Element.

<div id="test"></div>

In meiner CSS-Datei wollte ich dies jetzt 1px hoch und 99% breit machen.

#test {
padding:0 0 0 0;
margin:0 0 0 0;
height:1px;
width:99%;
margin-left:10px;
margin-top:10px;
background-color:#000000;
}

Es funzt in Netscape und allen anderen Browser einwandfrei ausser im IE... bei dem lässt sich das DIV nur auf eine Höhe von 14px setzen, alles was kleiner wird, bleibt trotzdem 14px hoch.

Wie umgehe ich das Problem?

(PS: Ziel ist es, eine Haarlinie zu erstellen... das wollte ich mit diesem schwarzen DIV-Element, welches nur 1px hoch ist, machen)

[Sönke Tesch]

<div id="test"></div>

In meiner CSS-Datei wollte ich dies jetzt 1px hoch und 99% breit machen.

#test {
height:1px;
}

Es funzt in Netscape und allen anderen Browser einwandfrei ausser im IE... bei dem lässt sich das DIV nur auf eine Höhe von 14px setzen, alles was kleiner wird, bleibt trotzdem 14px hoch.

Putzig, solche Sachen kommen meistens eher im Netscape/Mozilla vor. Probier mal, die Schriftgröße zu verkleinern.

(PS: Ziel ist es, eine Haarlinie zu erstellen... das wollte ich mit diesem schwarzen DIV-Element, welches nur 1px hoch ist, machen)

<hr> ist Dir bekannt? Wenn ja, warum benutzt Du es nicht?

Gruß,
  soenk.e

[Malki]

Putzig, solche Sachen kommen meistens eher im Netscape/Mozilla vor. Probier mal, die Schriftgröße zu verkleinern.

Es ist ja gar keine Schrift festgelegt. Aber ich kanns versuchen.... aber selbst wenn ich sie verkleinere, so werde ich damit wohl nie auf 1px Höhe kommen...

(PS: Ziel ist es, eine Haarlinie zu erstellen... das wollte ich mit diesem schwarzen DIV-Element, welches nur 1px hoch ist, machen)

<hr> ist Dir bekannt? Wenn ja, warum benutzt Du es nicht?

Ich möchte ja nur eine schwarze Linie mit 1px höhe... die <hr>-linien sind mindestens 3 pixel und grau (was sich auf meinem grauen hintergrund gar nicht gut macht)... oder kann man die hr-linien auch per CSS verändern?

[Sönke Tesch]

Putzig, solche Sachen kommen meistens eher im Netscape/Mozilla vor. Probier mal, die Schriftgröße zu verkleinern.

Es ist ja gar keine Schrift festgelegt.

Das ist manchmal unerheblich.

(PS: Ziel ist es, eine Haarlinie zu erstellen... das wollte ich mit diesem schwarzen DIV-Element, welches nur 1px hoch ist, machen)

<hr> ist Dir bekannt? Wenn ja, warum benutzt Du es nicht?

Ich möchte ja nur eine schwarze Linie mit 1px höhe... die <hr>-linien sind mindestens 3 pixel und grau (was sich auf meinem grauen hintergrund gar nicht gut macht)... oder kann man die hr-linien auch per CSS verändern?

Sicher. IIRC sind die Attribute allerdings nicht einheitlich festgelegt, so daß einige Browser auf die Vordergrundfarbe und height ansprechen, andere es lieber mit den border-Attributen machen.

Gruß,
  soenk.e

[Sascha Mandelkow]

Hallo Malki.

Pack einfach ein transparentes, 1 Pixel großes Bild rein.

<div id="test"><img src="transparent.gif" width="1" height="1"></div>

Das tuts dann auch im IE...

Grüße
Sascha

[Malki]

<div id="test"><img src="transparent.gif" width="1" height="1"></div>

Hm stimmt, das könnte gehen... aber dann kommen wir ja wieder zu den ganzen blank.gif's, die man im Table-Layout auch so oft für pixelgenaues arbeiten verwendet... und grade deshalb bin ich ja auf CSS ausgewichen ;)

[Norbert Klein]

n'Abend.

Wie umgehe ich das Problem?

overflow:hidden; ist dein Freund.

Gruß
Norbert

[Malki]

overflow:hidden; ist dein Freund.

Juhu, es klappt... danke ;)(

[mcmoe]

versuch das mal:

<div style="height:1px; width:99%; border:1px solid black;"></div>

gruß,
mcmoe

[HarryS]

Hallo Malki

<div id="test"></div>

In meiner CSS-Datei wollte ich dies jetzt 1px hoch und 99% breit machen.

#test {
padding:0 0 0 0;

margin:0 0 0 0;<----------- hmmm, zuerst margin 0 rundherum

height:1px;
width:99%;

margin-left:10px;<--------- dann doch 'n margin
   margin-top:10px;<---------- und noch eins

background-color:#000000;
}

(PS: Ziel ist es, eine Haarlinie zu erstellen... das wollte ich mit diesem schwarzen DIV-Element, welches nur 1px hoch ist, machen)

ääääh also nur für ne einfache 1px Linie erscheint mir obiges style doch etwas overkill zu sein,

versuch doch einfach mal:

#test { border-bottom:1px solid #000000; width:99%}

dann könntest Du wenn Du wilst auch noch dashed, oder dotted usw als Linienstil verwenden.

Grüße aus Nürnberg, HarryS