<fieldset/> Margin: Firefox=ok, IE=Fehler @ tutorials.de: Tutorials, Forum & Hilfe

Mik3e · 19.11.05 12:25

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-Code:

/* 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

Dr Dau · 20.11.05 10:49

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-Code:

<!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

Mik3e · 29.11.05 00:43

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

Maik · 29.11.05 06:18

Zitat von Mik3e

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

Dr Dau hat anhand seines Demos doch gezeigt und erläutert, wie der Conditional Comment  installiert wird.

Dr Dau · 29.11.05 07:31

Zitat von Mik3e

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

Schaue dir mal den Link in meinem vorherigem Posting an.

hpvw · 29.11.05 07:49

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

Mik3e · 29.11.05 11:47

@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

Maik · 29.11.05 12:27

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.

Mik3e · 29.11.05 12:45

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

Maik · 29.11.05 12:49

Der Conditional Comment wird auch nicht innerhalb, sondern im Anschluß an dem vorangegangenen Stylesheet notiert.

hpvw · 29.11.05 18:00

Zitat von Mik3e

Das vorsätzliche Ausnützen von Schwächen ist ein Problem, wenn ne neue Version rauskommt und der Fehler behoben ist...

Ich spekuliere darauf, das MS viele Schwächen behebt und und neue ergänzt. Daher denke ich, muss man (leider) seine Seiten im neuen IE sowieso überprüfen.

Zitat von Mik3e

(übrigens: wie gehts bei Dir voran, Stichwort MPTT und Content?)

Da schreib ich Dir noch mal 'ne Mail, das ist hier doch zuviel OT.

Gruß hpvw

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Firefox problem: margin

Firefox/Safari margin-top Problem

IE-Firefox Problem mit margin-top

Firefox schluckt margin-bottom und margin-right

margin in IE / Firefox

E-Mail:

Abonnieren Abbestellen