formular im IE

[planet4]

Hallo,

ich hab ein Problem mit fieldset/legend im IE, siehe Anhang.
Es sollte eigentlich so aussehen wie im Firefox, im IE6 ragt der
background oben raus, background und border des fieldset hab ich mal
etwas kräftiger gemacht, damit man's besser sieht, der css-Code sieht so aus:

form, fieldset, legend, dl, dt, dd {
	padding: 0;
	margin: 0;
	font-weight: normal;
}

#kontaktform {
	position: relative;
}

fieldset {
	padding: 0 1.0em;
	background-color: #bdbdbd;
	border: 1px solid #ff0000;
}

legend {
	padding: 0 0.5em;
}

HTML einfach so:

<form id="kontaktform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<fieldset>
<legend>Nehmen Sie Kontakt mit uns auf</legend>
<!-- ... der Inhalt hier spielt keine Rolle, wenn ich ihn weglösche, besteht das Problem weiter -->
</fieldset>
</form>

ich habe bei fieldset und legend schon viel mit padding und margin herumprobiert,
selbst wenn es auf 0 gesetzt wird, bleibt dieser Überhang des backgrounds beim IE


planet4.

 

[sanchez]

hallo,

ich hab zwar keine direkte Lösung, aber man könnte ja den hintergrund mit einem Bild machen und dann mit background-position ein wenig nach unten verschieben...

 

[dkdenz]

Blöd nur, das man dann zwei Versionen machen muss.
Eine für richtige Browser und eine für den vermaledeiten IE...

Edit:
Guck mal hier: paul-kroening.de - Beipiele
Ich weiss jetzt zwar nicht, wie das im IE aussieht, aber da steht irgendwas mit html > body fieldset

 

[planet4]

Ich weiss jetzt zwar nicht, wie das im IE aussieht, aber da steht irgendwas mit html > body fieldset

: im IE haben die fieldsets in diesem Beispiel gar keine Hintergrundfarbe...
(also dieser child-Selektor schließt einfach den IE aus) (ob auch den IE7, weiß ich nicht)
das ist also nicht wirklich eine Lösung, wäre ein Notbehelf... mit Hintergrundbilder will ich gar nicht erst anfangen...
aber es muss eine Lösung geben, das Formular auf dieser Seite hier sieht z.B. im Firefox 2.0 genauso aus wie im IE 6, aber ich sehe nicht, wie das erreicht wird...
wahrscheinlich ist es ganz einfach

planet4.

 

[dkdenz]

Also das ist das CSS vom formarea:

/* Fieldsets
************************************************/

fieldset.formarea {
    border: 1px solid #ccc;
    background-color: #f2f2f2;
    padding: 1.0em 1.0em;
    margin-bottom: 1.5em;
    /*width: 46.5em;*/
}

fieldset.formarea legend {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: normal;
    /*color: #4c4c4c;*/
    color: #333;
    padding: 0 0.5em;
}

fieldset.mediabox {
    /*border: 1px solid #ccc;
    background-color: #f2f2f2;*/
    border: 1px solid #b7d4eb;
    background: #f6fafe url(/templates/images/mediabox.gif) repeat-x 0 0;
    padding: 1.0em 1.0em;
    margin-bottom: 1.5em;
}

fieldset.mediabox legend {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: normal;
    /*color: #4c4c4c;*/
    color: #333;
    padding: 0 0.5em;
}

Vielleicht bringt ja tüfteln was...

 

[planet4]

jaaaa, das kenn ich ja schon, hab ich schon ausführlich herumgetüftelt


planet4.

 

[dkdenz]

Sorry!
Manchmal ist es blöd, wenn man keinen IE zum Testen hat. Manchmal...

 

[planet4]

hallooo... ich hab's gefunden:

* html fieldset {
    position: relative;
    padding-top: 1em;
    margin-top: 1.5em;
}

* html fieldset legend {
    position: absolute;
    top: -0.75em;
    left: 0.5em;
}

...Extrawurst für IE also wieder mal...

planet4.

 

[sanchez]

Blöd nur, das man dann zwei Versionen machen muss.
Eine für richtige Browser und eine für den vermaledeiten IE...

Wieso zwei Versionen..im Firefox und co. sollte das mit den Hintergründen auch gehen...ansonsten eben *html und html>body nutzen...geht ja leider manchmal nicht anders...habt ihr das mit dem hintergrundbild mal getestet???

 

[planet4]

...habt ihr das mit dem hintergrundbild mal getestet???

mit einem Hintergrundbild ist es ganz genauso wie mit einer Hintergrundfarbe, es "verrutscht" im IE und braucht Extra-Anweisungen...

planet4.