<fieldset/> Margin: Firefox=ok, IE=Fehler

Status
Nicht offen für weitere Antworten.
Mik3e

Mik3e

Erfahrenes Mitglied
Hi,

Habe eine Fieldset, in dem eine Tabelle gehalten wird. Das Filedset hat ein padding von 10px, das Label des Fieldsets ein Bottom-Margin von 5px. Entweder ich habe einen Definitionsfehler in meinem Stylesheet oder der IE hat Probleme mit der Darstellung eines Fieldset-Margins...!?

Habe ein Bild angehägt, wo Ihr den Fehler sehen könnt. Der "Boxing-Fehler" im IE kann es eigentlich nicht sein..

Hier der Code des Stylesheets:
HTML: 
/* Fieldset in dem Content gehalten wird */
.fieldSetContent
{
	border-style:solid;
	border-width:1px;
	border-color:#808080;
	padding:10px;
}

/* Label des Fieldsets */
.fieldSetContentLegend
{
	background-color:#808080;
	color:#FFFFFF;
	font-weight:bold;
	padding-top:4px;
	padding-bottom:4px;
	padding-left:6px;
	padding-right:6px;
	border-style:solid;
	border-color:#808080;
	border-width:1px;	
	margin-bottom:5px;
}

Ich muss zu meiner Schande gestehen, dass ich bisher nie mit <fieldsets> gearbeitet habe...

Bin Euch für jeden Tipp wirklich dankbar,
Ciao,
Mike
 

Anhänge

  • boxingError.jpg
    boxingError.jpg
    31,5 KB · Aufrufe: 384
Hallo!

Der IE hat praktisch grundsätzlich Probleme Elemente so darzustellen wie z.b. der FF.
Unterschiedlicher Abstand zum Seitenrand, unterschiedlicher Abstand zum Tabellenrahmen, unterschiedliche Zeilenhöhe..... und und und.
Mit anderen Worten, um so mehr Angaben Du machst, um so gleichmässiger wird das Ergebnis in den verschiedenen Browsern.
Bei einigen Dingen musst Du für den IE aber differenzierte Angaben machen.

Kleines Beispiel (ist allerdings noch nicht perfekt, zeigt aber deutlich was Korrekturangaben für den IE bewirken können):
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Elemente gruppieren</title>
 
<style type="text/css">
/* Fieldset in dem Content gehalten wird */
.fieldSetContent
{
	 border-width:1px;
	 border-style:solid;
	 border-color:#808080;
	 padding-top:4px;
	 padding-right:10px;
	 padding-bottom:4px;
	 padding-left:10px;
	 margin-top:10px;
	 margin-bottom:10px;
}
/* Label des Fieldsets */
.fieldSetContentLegend
{
	 background-color:#808080;
	 color:#FFFFFF;
	 font-weight:bold;
	 border-width:1px;
	 border-style:solid;
	 border-color:#808080;
	 padding-top:4px;
	 padding-bottom:4px;
	 padding-left:10px;
	 padding-right:6px;
	 margin-top:0px;
	 margin-right:2px;
	 margin-bottom:0px;
	 margin-left:2px;
}
</style>
 
<!--[if IE]>
<style type="text/css">
.fieldSetContent
{
	 margin-top:5px;
	 margin-bottom:5px;
}
.fieldSetContentLegend
{
	 margin-right:0px;
	 margin-left:-4px;
}
</style>
<![endif]-->
 
</head>
<body>
<h1>W&uuml;nschen Sie sich was!</h1>
 
<form action="fieldset_legend.htm">
 
<fieldset class="fieldSetContent">
<legend class="fieldSetContentLegend"><b>Absender</b></legend>
<table>
<tr>
	<td>Ihr Vorname:</td>
	<td><input type="text" size="40" maxlength="40" name="Vorname"></td>
</tr>
<tr>
	<td>Ihr Zuname:</td>
	<td><input type="text" size="40" maxlength="40" name="Zuname"></td>
</tr>
</table>
</fieldset>
 
<fieldset class="fieldSetContent">
<legend class="fieldSetContentLegend"><b>Wunsch</b></legend>
<table>
<tr>
	<td>Ihr Hauptwunsch:</td>
	<td><input type="text" size="40" maxlength="40" name="Hauptwunsch"></td>
</tr>
<tr>
	<td>Ihr Zusatzwunsch:</td>
	<td><input type="text" size="40" maxlength="40" name="Zusatzwunsch"></td>
</tr>
</table>
</fieldset>
 
</form>
 
</body>
</html>
Wichtig ist dass die Korrekturangaben für den IE erst nach den übrigen Angaben vorgenommen werden, da die Angaben der Reihenfolge nach abgearbeitet werden.
Die Angaben bei [if IE] werden von anderen Browsern ignoriert, dadurch nehmen diese nur die übrigen Angaben.
Der IE hingegen nimmt zwar auch zuerst die übrigen Angaben (weil diese ja zuerst kommen), aber überschreibt von denen die Angaben die auch in [if IE] vorkommen.
Du brauchst für den IE also nur die Angaben zusätzlich machen, die ein anderen Wert haben.
[if IE] bezieht sich auf alle IE Versionen ab 5.0.
Man kann dies aber auch noch zusätzlich nach der jeweiligen IE Version differenzieren.
Näheres zu diesen so genannten "conditional comments" findest Du hier.

Du solltest die Seitenangaben (Top, Right, Bottom, Left) auch in dieser Reihenfolge angeben.
Stell es dir wie eine Uhr vor, 12Uhr=top 3Uhr=right 6Uhr=bottom 9Uhr=left, dann wirst Du auch Angaben wie z.b. margin: 0px 2px 0px 2px; leichter verstehen. ;)

Gruss Dr Dau
 
Hi,

Danke für die Info! Habe mich bisher eigentlich nur mit dem Boxing-error des IE beschäftigt... Mir fällt der Padding Fehler hier eigentlich zum ersten mal auf...

Hast Du vielleicht eine Idee, wie ich die IF Verzweiung direkt in das Stylesheet implementieren kann?

Danke & Ciao,
Mike
 
Mik3e hat gesagt.:
Hast Du vielleicht eine Idee, wie ich die IF Verzweiung direkt in das Stylesheet implementieren kann?
Zum Vergrößern anklicken....
Dr Dau hat anhand seines Demos doch gezeigt und erläutert, wie der Conditional Comment <!--[if IE]> ... <![endif]--> installiert wird.
 
Du kannst auch andere Schwächen des IE im Stylesheet nutzen. Beispiel:
Code: 
direktesElternElement zuDefinierendesElement {
    /* Angaben für den IE und gemeinsame Angaben */
}
direktesElternElement > zuDefinierendesElement {
    /* Angaben für andere Browser, die mit denen 
       für den IE kollidieren */
}
Dann gibt es auch noch so einen Trick mit * html, den ich schon häufig gesehen habe, aber da müssten andere was zu sagen.

Gruß hpvw
 
@Maik:
Genau schauen und erst dann meckern... Im Beispiel war es kein externes CSS (dort funktioniert es nicht auf diesem Wege nicht) :)

@HP:
Das vorsätzliche Ausnützen von Schwächen ist ein Problem, wenn ne neue Version rauskommt und der Fehler behoben ist... Die Lösung mit der IF-Verzweigung finde ich schon ganz nett :) (übrigens: wie gehts bei Dir voran, Stichwort MPTT und Content?)

@Dr. Dau:
Dankeschön, ich werde mich mal durch selfhtml wühlen, gestern war es einfach schon zu spät ;)

Ciao,
Mike
 
Erstens habe ich nicht gemeckert, und zweitens spielt es beim Installieren des Conditional Comments keine Rolle, ob das Stylesheet mittels <style type="text/css"> ... </style>, oder über <link rel="stylesheet" type="text/css" href="..."> als externe CSS-Datei in das Dokument eingebunden wird.
 
:) War auch keine Beleidigung.. Klang nur nach "lies doch mal was da steht"...
Das es prinzipiell egal ist, ob man die Style extern oder direkt im Header definiert ist mir klar. Dennoch funktioniert es direkt im Stylesheet (aus welchem Grund auch immer) nicht.. Wie gesagt werde ich mir mal Selfhtml zu Gemüte führen...

Ciao,
Mike
 
Der Conditional Comment wird auch nicht innerhalb, sondern im Anschluß an dem vorangegangenen Stylesheet notiert.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück