nicht angemeldet
fieldset formatieren: background-color und IE...
MudGuardHallo liebes Forum,
ich habe den <fieldset>-TAg mit CSS formatiert, u.a. hat es eine Hintergrundfarbe bekommen.
Hier der Code / CSS:
fieldset {
border: #002E85 1px solid;
background-color: #EBF5FD;
padding: 10px 0 16px 16px;
}
fieldset legend {
font-weight: bold;
padding: 0;
font-size: 1.1em;
color: #002E85;
letter-spacing: 1px;
}
Auszug html:
<fieldset><legend>Ich bin Neukunde:</legend>
<p id="anrede"><label for="anrede">*Anrede: <input type="radio" id="frau" name="radiogroup" value="radioValue">Frau <input type="radio" id="herr" name="radiogroup" value="radioValue">Herr</label></p>
... etc.
</fieldset>
Der Ie färbt nun aber auch den Bereich oberhalb der umgebenden Linie ein, siehe bild.
Kann man das irgendwie lösen, umgehen?
Vielen Dank für Eure Hilfe,
mel
-
Hi,
Auszug html:
<fieldset><legend>Ich bin Neukunde:</legend>
<p id="anrede"><label for="anrede">*Anrede: <input type="radio" id="frau" name="radiogroup" value="radioValue">Frau <input type="radio" id="herr" name="radiogroup" value="radioValue">Herr</label></p>Seltsame Verwendung des label-Elementes.
label-Elemente dienen dazu, form-controls ein Label zu verpassen.
p ist keine form-control.
Sinnvoll wäre es hier m.E., den Text für den jeweiligen Radiobutton (also "Frau" bzw. "Mann") als Label zu definieren - damit ist auch der Text des jeweiligen Buttons anklickbar.Für die Gruppierung, wie Du sie hier per p-Element vornimmst, würde ich eher ein weiteres Fieldset nutzen (den Rahmen kann man - zumindest in einigermaßen aktuellen Browsern per CSS entfernen, gleiches gilt für die Positionierung des legend-Elements).
Der Ie färbt nun aber auch den Bereich oberhalb der umgebenden Linie ein, siehe bild.
Setze für legend relative Positionierung (ca. -0.5em für top) ein.
(ggf. mit margin für das fieldset wieder den nötigen Abstand herstellen.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo,
Seltsame Verwendung des label-Elementes.
label-Elemente dienen dazu, form-controls ein Label zu verpassen.
p ist keine form-control.
Sinnvoll wäre es hier m.E., den Text für den jeweiligen Radiobutton (also "Frau" bzw. "Mann") als Label zu definieren - damit ist auch der Text des jeweiligen Buttons anklickbar.Ja, das werde ich so ändern. Danke.
Für die Gruppierung, wie Du sie hier per p-Element vornimmst, würde ich eher ein weiteres Fieldset nutzen (den Rahmen kann man - zumindest in einigermaßen aktuellen Browsern per CSS entfernen, gleiches gilt für die Positionierung des legend-Elements).
Würde ich nicht gerne machen. WAs spricht dagegen, <p> zu lassen? Sorry das habe ich noch nicht verstanden...
Setze für legend relative Positionierung (ca. -0.5em für top) ein.
(ggf. mit margin für das fieldset wieder den nötigen Abstand herstellen.fieldset {
border: #002E85 1px solid;
background-color: #EBF5FD;
padding: 10px 0 16px 16px;
position: relative;
top: -0.5em;
}..bringt leider gar nix.
Wie hattest DU das gemeint?-
Hi,
Setze für legend relative Positionierung (ca. -0.5em für top) ein.
fieldset {
position: relative;
top: -0.5em;
}..bringt leider gar nix.
Wie hattest DU das gemeint?So wie ich es geschrieben hatte: setze für legend ...
legend ist nicht gleich fieldset.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
So wie ich es geschrieben hatte: setze für legend ...
legend ist nicht gleich fieldset.Entschuldige, mein Fehler. MAn sollte eben genau lesen ;(
ES klappt leider trotzdem nicht so wirklich. Der Rand oben verschwindet ganz.-
So Problem gelöst.
fieldset bekommt -wie Du Andreas es geschrieben hast - position:relative . Mit padding-top wird der Inhalt des fieldsets wieder geradegerückt.
legend wird dann mit position:absolute an den richtigen Platz gezwungen und erhält einen negativen Rand nach oben.
Das ganze dann mittels star-html-hack nur für den nervenaufreibendsten Browser der WElt und fertig.merci für die hilfe,
vg mel
-
-
-
-
Hallo Andreas,
(den Rahmen kann man - zumindest in einigermaßen aktuellen Browsern per CSS entfernen, gleiches gilt für die Positionierung des legend-Elements).
Genau: Was für eine Art der Positionierung meinst Du? Doch wohl nur dämliches über position:relative; und nicht wirklich anspruchsvolles wie display:block? Habe ich irgendwas übersehen?
(Ich habe vor zwei Tagen entnervt herumrecherchiert, weswegen man fieldset/legend nicht wirklich toll formatieren kann. Anscheinend stellen sie im Browsern (z.B. Mozilla) keine wirklich vollwertigen CSS-Boxen dar, stattdessen kommt es darauf hinaus, daß sie zumindest im Mozilla-Kontext replaced Elements sind, wegen „der besonderen Art der Darstellung, die sich nicht mittels CSS darstellen ließe“.)
Tim
-
Hi,
(den Rahmen kann man - zumindest in einigermaßen aktuellen Browsern per CSS entfernen, gleiches gilt für die Positionierung des legend-Elements).
Genau: Was für eine Art der Positionierung meinst Du? Doch wohl nur dämliches über position:relative; und nicht wirklich anspruchsvolles wie display:block? Habe ich irgendwas übersehen?z.B. float:left
Der IE stellt sich da als einziger zickig an.
(Ich habe vor zwei Tagen entnervt herumrecherchiert, weswegen man fieldset/legend nicht wirklich toll formatieren kann. Anscheinend stellen sie im Browsern (z.B. Mozilla) keine wirklich vollwertigen CSS-Boxen dar, stattdessen kommt es darauf hinaus, daß sie zumindest im Mozilla-Kontext replaced Elements sind, wegen „der besonderen Art der Darstellung, die sich nicht mittels CSS darstellen ließe“.)
??? Versteh ich nicht.
Im Mozilla lassen sich die beiden Teile doch wunderbar formatieren.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo Andreas,
Im Mozilla lassen sich die beiden Teile doch wunderbar formatieren.
Ja? Mein Textcase ist eine Umwandlung in normale Blockelement-Formatierung mittels display:block. Diese beiden HTML Codeschnipsel ...
<fieldset> <legend>Titel</legend> <p>bla</p> </fieldset> <div id="fieldset"> <div id="legend">Titel</div> <p>bla</p> </div>... sollten also mit dieser CSS-Formatierung dieselbe Anzeige ergeben.
fieldset, div#fieldset { display:block; } legend, div#legend { display:block; }Passiert aber nicht, zu bewundern auch hier. Auch rummurksen mit position:static und Important bringt nichts. Für mich ist das ein Fehlverhalten.
Tim
-
Hi,
Passiert aber nicht, zu bewundern auch hier.
hehe, als ich über die Webdeveloper Toolbar die Seite gerade editieren wollte, änderte sich die Darstellung promt so, daß legend die volle Breite einnahm und innerhalb von fieldset dargestellt wurde - nur *unten*.
Aber das wundert mich nicht. Schließlich ist nur die Funktion dieser Elemente definiert und es den Browsern freigestellt, wie sie diese - insb. legend - anzeigen sollen.freundliche Grüße
Ingo-
Hallo Ingo,
Aber das wundert mich nicht. Schließlich ist nur die Funktion dieser Elemente definiert und es den Browsern freigestellt, wie sie diese - insb. legend - anzeigen sollen.
Ja, genau das werfe ich den Browserherstellern vor. Daß sie ihre Default-Präsentation an etwas dämlichen orientieren und sich dadurch die Chance verscherzen, die Elemente wie echte CSS Boxen nutzen zu können. Es gibt wohl Hoffnung, zumindest gibt es immer wieder Initiativen, das derzeitige Verhalten von legend in CSS 3 festzuschreiben, zuletzt hier:
http://lists.w3.org/Archives/Public/www-style/2005May/0000.htmlTim
-
-
-
-
-