| Autor |
Nachricht |
cank1090
Threadersteller
Dabei seit: 18.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 04.08.2007 00:51
Titel Div-Layer in Firefox und IE unterschiedlich dargestellt |
  |
|
Hallo,
hab ein kleines aber nerviges Problem mit Div-Layern im Firefox. Bei der Positionierung mit position:absolute wird der Inhalt ein wenig eingerückt. Beim Internet Explorer ist das nicht der Fall und mich wundert es zum ersten Mal, dass der Firefox gegenüber dem IE etwas falsch darstellt.
Hab schon bei Google und hier im Forum nach ähnlichen Problemen gesucht, bin allerdings auf keine Antworten gestoßen, die mir helfen konnten.
Hier der vorläufige Test-Link:
http://n-sidr.110mb.com/index.html
Und eine weitere Seite, die ich nur zum Test angefertigt habe, aber an der ich feststellen konnte, dass es wirklich nur am CSS-Tag position:absolute liegt:
http://n-sidr.110mb.com/test.html
Die Stylesheet-Datei liegt hier:
http://n-sidr.110mb.com/css/css.css
Wie gesagt, der Inhalt der Div-Layer ist beim Firefox immer ein wenig eingerückt, beim Internet Explorer wird er dagegen so dargestellt, wie er soll. Benutzt habe ich die Versionen Firefox 2.0.0.6 und Internet Explorer 7.0.7530.11.
Würde mich über eine Lösung (und eventuelle sonstige Kritik/Vorschläge) sehr freuen!
|
|
| |
  |
 |
oliver_mahlke
Gesperrt
Dabei seit: 25.12.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 04.08.2007 06:00
Titel
|
|
|
Die Standardeinstellungen für Padding/Margin unterscheiden sich von Browser zu Browser.
Abhilfe schafft das zurücksetzen der gesamten Werte auf Null. Ein gutes Beispiel hierfür ist der erste Abschnitt des YAML-base.css:
| Code: | /* ######################################################################################################
** ### Vorbereitende Maßnahmen | Reset ##################################################################
** ######################################################################################################
*/
/* Hiermit werden die Randabstände und border aller HTML-Elemente auf Null gesetzt. Damit wird das
** Aussehen der Webseite in unterschiedlichen Browsern vereinheitlicht.
*/
* { margin:0; padding: 0; }
/* Das zurücksetzen der Innen- und Außenabstände verursacht zu kleine Selectboxen. Dies wird korrigiert */
option {padding-left: 0.4em}
/*
** Die nachfolgenden Angaben entstammen dem Artikel 'Useful Code Snippets' von Mike Foskett
** [http://www.websemantics.co.uk/tutorials/useful_css_snippets/]
*/
/* Vertikalen Scrollbalken im Netscape & Firefox erzwingen. Dies verhindert, dass zentrierte Layouts
** um 10 Pixel springen wenn der Seiteninhalt kleiner wird als die Höhe des Browserfensters. */
html { height: 100% }
body {
min-height: 101%;
/* Beseitigung des Rundungsfehlers bei Schriftgrößen im Opera sowie Standardformatierungen */
font-size: 100.01%;
/* FIX: Verhindert, dass positionierte Elemente nicht verschoben werden when die Größe des Browser
Fensters geändert wird. */
position: relative;
/* Vorgabe der Standardfarben und Textausrichtung*/
color: #000;
background: #fff;
text-align: left;
}
/* Standardrahmen zurücksetzen */
fieldset, img { border:0; }
/* Anpassung für Safari Browser. font-size:100% ist für den Safari in Formularen zu groß */
select, input, textarea { font-size: 99% }
/* ###################################################################################################### |
|
|
| |
|
|
|
Anzeige
|
|
|
Impigra
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht: 
|
Verfasst Sa 04.08.2007 15:11
Titel
|
|
|
solange Du keinen padding:wert angegeben hat kann der Browser einrücken was in den default Einstellungen hinterlegt ist.
Das ist kein fehler sondern ein Feature 
Zuletzt bearbeitet von Impigra am Sa 04.08.2007 15:11, insgesamt 1-mal bearbeitet
|
|
| |
 |
|
cank1090
Threadersteller
Dabei seit: 18.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 04.08.2007 17:06
Titel
|
|
|
| Impigra hat geschrieben: | solange Du keinen padding:wert angegeben hat kann der Browser einrücken was in den default Einstellungen hinterlegt ist.
Das ist kein fehler sondern ein Feature |
Leider existiert dieses "Feature" auch dann noch, wenn ich einen Padding-Wert eingebe. Wenn ich beispielsweise padding:10px festlege, wird im Internet Explorer auch wirklich nur ein Innenabstand von 10px angezeigt. Beim Firefox ist es aber trotzdem noch ein bisschen mehr als die erwünschten 10px. Das kann aber leider ganze Layouts verunstalten!
| oliver_mahlke hat geschrieben: | | Abhilfe schafft das zurücksetzen der gesamten Werte auf Null. Ein gutes Beispiel hierfür ist der erste Abschnitt des YAML-base.css: |
Ich schätze mal, dass der für mich relevante Teil dieser ist:
| Code: | ** Aussehen der Webseite in unterschiedlichen Browsern vereinheitlicht.
*/
* { margin:0; padding: 0; } |
Frage: Wo soll ich das einfügen? Ich habs probiert mit | Code: | body {
padding:0px;
} |
, hat aber nicht geholfen. Dann habe ich für den Div-Layer, in dem der Inhalt ist, den Wert für padding auf 0px gesetzt, aber selbst das hat beim Firefox nicht geholfen! Das Problem ist ja eigentlich, wie oben beschrieben, dass ich ja einen Innenabstand will. Aber der wird beim Firefox in Verbindung mit position:absolute (worauf ich angewiesen bin) in jedem Fall anders dargestellt als beim IE.
Auf der Seite css4you.de gibt es ein Beispiel mit position:absolute, das sowohl im Firefox als auch im IE gleich aussieht. Leider blicke ich nicht durch, wie die das gemacht haben:
http://www.css4you.de/example/position_absolute.html
Aber danke schonmal für eure Antworten!
|
|
| |
|
|
oliver_mahlke
Gesperrt
Dabei seit: 25.12.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 04.08.2007 17:33
Titel
|
|
|
In deinem konkreten Beispiel ist es nicht das padding, sondern das voreingestelle margin für Absätze welches für die unterschiedlichen Abstände sorgt.
Ergänz einfach mal dein CSS um folgendes, dann siehst du es selbst:
| Code: | .navigation
{
margin: 0;
...
} |
All diese Werte auf 0 zu setzen - für alle Elemente - ist die Aufgabe eines solchen »Reset-Stylesheets«. Das gezeigte aus dem YAML-Framework berücksichtigt sämtliche bekannten Eigenheiten, und stellt alle denkbaren Einflüsse auf Null. Das solltest du einfach komplett einbinden in all deine Projekte, um in sämtlichen Browsern auf gleicher Grundlage zu arbeiten.
Zuletzt bearbeitet von oliver_mahlke am Sa 04.08.2007 17:34, insgesamt 1-mal bearbeitet
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
|
| |
|
|
oliver_mahlke
Gesperrt
Dabei seit: 25.12.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 04.08.2007 22:25
Titel
|
|
|
 Ich hatte das vor kurzem auf dem Screen, hab es aber auf die schnelle nicht finden können. Dabei hätte ich mir doch denken können das es direkt vom CSS-Miterfinder Eric Meyer stammt - Danke!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
PowerPoint - Text unterschiedlich dargestellt
fotos werden in browsern unterschiedlich dargestellt
Ordered List wird im IE und FF unterschiedlich dargestellt.
Firefox & Explorer Darstellung unterschiedlich?
firefox und layer
div-layer. Border mit Firefox?
|
|
Willkommen auf dem Portal für Mediengestalter
