<div>-Leiste wird im IE zu breit, wenn <form> drin

[Peter]

Hallo !

Folgendes Problem: Ich brauche eine ca.35px hohe, horizontale Leiste, in der sich ein 'Suche'-Feld befindet (folglich ist dieses umschlossen von einem <form>-Tag). Sie erstreckt sich über die gesamte Site-Breite und liegt in einem <div>-Kasten. Nun passiert es aber, dass das <form>-Tag die Leiste breiter 'spreizt' als nötig bzw. angegeben, aber nur im IE. Heißt also, im IE sieht sie 50px groß aus, in Opera jedoch richtigerweise 35px...Was tun??
Über einen guten Rat würde ich mich freuen !

Viele Grüße, Peter

[wahsaga]

hi,

Ich brauche eine ca.35px hohe, horizontale Leiste,

was denn jetzt, hoch oder breit?

kleiner tipp: etwas weniger alkohol, dann klappt's auch mit dem dimensionsverständnis besser :-)

Nun passiert es aber, dass das <form>-Tag die Leiste breiter 'spreizt' als nötig bzw. angegeben, aber nur im IE. Heißt also, im IE sieht sie 50px groß aus, in Opera jedoch richtigerweise 35px...Was tun??

form ist ein block level element, mit eigenen default-werten für margin.

also entweder per display:inline als inline element formatieren, oder aber margin explizit auf 0 setzen.

gruß,
wahsaga

[Michael - Hannover]

also entweder per display:inline als inline element formatieren, oder aber margin explizit auf 0 setzen.

das klingt jetzt so, als wäre die Eigenschaft Block-Element gleichbedeutend mit diversen margin/padding Werten und umgekehrt ?

Ich dachte das wäre ohne Beziehung zueinander ;-)

[wahsaga]

hi,

das klingt jetzt so, als wäre die Eigenschaft Block-Element gleichbedeutend mit diversen margin/padding Werten und umgekehrt ?

Ich dachte das wäre ohne Beziehung zueinander ;-)

nein, so war's ja auch nicht gemeint.

aber die browser haben ja ihre eigenen defaults für die margins von block level elementen wie form, h1, p etc. (kann sogar sein, dass die in den specs auch vorgeschlagen werden ...)

und wenn du dann aus einem block level element per display ein inline element machst, dann fallen diese margins natürlich unter den tisch - denn für inline elemente ist ein margin ja nun mal nicht definiert.

gruß,
wahsaga

[MudGuard]

Hi,

denn für inline elemente ist ein margin ja nun mal nicht definiert.

Wo siehst Du in den Property-Definitions Einschränkungen auf nicht-inline-Elemente?

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
    Value:   <margin-width> | inherit
    Initial:   0
    Applies to:   all elements

'margin'
    Value:   <margin-width>{1,4} | inherit
    Initial:   not defined for shorthand properties
    Applies to:   all elements

siehe http://www.w3.org/TR/REC-CSS2/box.html#margin-properties

cu,
Andreas

[wahsaga]

hi,

Wo siehst Du in den Property-Definitions Einschränkungen auf nicht-inline-Elemente?

weiß ich erhlich gesagt auch nicht ...

kleiner blackout, wo ich wohl irgendwas anderes im kopf gehabt haben muss.

gruß,
wahsaga

[Axel Richter]

Hallo,

Ich brauche eine ca.35px hohe, horizontale Leiste,
was denn jetzt, hoch oder breit?

Ähm.

<-----------------------horizontal----------------------->

----------------------------------------------------------
|                   horizontale Leiste                   |
----------------------------------------------------------

Also ich würde die vertikale Dimension auch als Höhe bezeichnen.

kleiner tipp: etwas weniger alkohol, dann klappt's auch mit dem dimensionsverständnis besser :-)

Ja, nicht wahr? ;-))

viele Grüße

Ax*prost*el

[Peter]

was denn jetzt, hoch oder breit?

Hey, doch nicht gleich so garstig, war ja nicht bös gemeint ;)
Und ehrlich gesagt, habe ich lange gezögert, ob denn nun hoch oder breit, und bin zu dem Schluß gekommen, dass ich unter breit ein vertikal ausgedehnte Linie verstehen würde, also hab ich halt hoch geschrieben, auf jeden Fall war woihl klar was gemeint war, denn dass 'display:inline' war ganz hervorragend :) Vielen Dank!
Könnte mir nochmal jemand kurz und bündig de Unterschied zwischen inline und block Element erläutern und wieso das dann hier der entscheidende Punkt war? Das würde mich sehr freuen !

Peete

[wahsaga]

hi,

Hey, doch nicht gleich so garstig, war ja nicht bös gemeint ;)

meins doch auch nicht - wollte jetzt nur wissen, was genau sache ist.

Und ehrlich gesagt, habe ich lange gezögert, ob denn nun hoch oder breit, und bin zu dem Schluß gekommen, dass ich unter breit ein vertikal ausgedehnte Linie verstehen würde, also hab ich halt hoch geschrieben,

^
na hoch ist eben in die | richtung, und breit in die < - >

• dachte ich bisher zumindest :-)

auf jeden Fall war woihl klar was gemeint war, denn dass 'display:inline' war ganz hervorragend :)

na dann is' ja gut ...

gruß,
wahsaga

[Peter]

^
na hoch ist eben in die | richtung, und breit in die < - >

Na dann waren wir uns ja schon von Anfang an eigentlich einig :)