divs & css: firefox und netscape machen was sie wollen

Baltasar · 13.03.2005, 15:32

hallo. ich habe folgendes problem: ich erstelle gerade ein seite komplett mit divs, also ohne tabellen oder (i)frames. das problem ist nur, dass sowohl der firefox, wie auch der netscape einen div-container, der sich in einem größeren befindet immer einrücken, obwohl ich das padding und den margin auf null gesetzt habe. hier mal screenshots:
http://www.do-not-disturb.net/netscape.gif
http://www.do-not-disturb.net/firefox.gif

und der ie machts, wie ich es haben will:
http://www.do-not-disturb.net/ie.gif

und hier noch die code-auszüge. zunächst mal die html-datei:

Code:

<html>
<head>
<title>Smallville High - Alles Rund Um Smallville</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="main">
<div id="top"></div>
<div id="navtop">
<div id="navtopzelle">Startseite</div>
</div>
</div>

</body>
</html>

und dann noch der betreffende teil der css:

Code:

#main { width:760px;
        height:100%;
        border: 1px solid #193E76;
        background-color: #D2E1EB;
        padding: 2px;
        text-align: center;
        vertical-align: top;
        margin: 0px auto;
        }

#top { width: 756px;
        height: 150px;
        border: 1px solid #193E76;
        background-image: url(graphics/head.gif);
        padding: 0px;
        text-align: center;
        margin: 0px auto;
        }

#navtopzelle { width: 120px;
        border: 1px solid #193E76;
        padding: 1px;
        text-align: center;
        margin-top: 2px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 2px;
        background-color: #A4C7DD;
        float: left;
        }

#navtop { width: 756px;
          padding: 0px;
          text-align: center;
          margin:0px auto;
          }

ich weiß wie gesagt auch nicht mehr weiter...auch css4you.de hat mir nicht weiter geholfen.

15.03.2005, 08:21

Ok, ich bin kein Experte was html und css angeht und kann daher hier nur wiedergenen was ich vor einiger Zeit mal gehört habe (ohne Garantie für Fehler).
Soweit ich weiß hält sich IE nicht unbedingt an bestimmte css Standarts und berechnet dadurch die Breite von Tabellen usw. falsch. Allerdings gibt es da diverse Hacks die diese Probleme beseitigen können.

Wie gesagt, keine Garantie für Korrektheit der Aussage.

15.03.2005, 08:25

Hmmmm,
welche DIV ist denn bei Startseite ?
Bzw. was vom CSS für das DIV mit "Startseite" benutzt ?

> margin: 0px auto;

"auto" würde ich hier auch rausnehmen.

Baltasar · 15.03.2005, 09:50

Zitat:

welche DIV ist denn bei Startseite ?
Bzw. was vom CSS für das DIV mit "Startseite" benutzt ?

weiß nicht so richig, was du meinst....

Zitat:

margin: 0px auto;

die divs, bei denen das steht sollen ja auch zentriert angezeigt werden.

habe jetzt auch die ids gegen klassen ausgetauscht...bringt auch nichts...

und ich idiot habe immer gedacht css wäre dazu da einen einheitlichen formatierungsstandart zu haben...

15.03.2005, 10:37

Zitat:

und ich idiot habe immer gedacht css wäre dazu da einen einheitlichen formatierungsstandart zu haben...

Ist es auch. Nur leider hat man sich bei MS entschlossen sich malwieder nicht dran zu halten. Jedenfalls ist es so dass nach CSS Standart bei Elementen border, margin und padding zur width eines Elementes hinzugezählt werden sollen. Macht IE 5 (und 6 unter Umständen) aber nicht so. Da hilft am besten das nach Standart definieren (so dass es im FF richtig aussieht) und dann mit Hack an IE anpassen.

Und zwar indem nach der eigentlichen Styledefinition folgendes kommt:

* html #ELEMENTNAME{DEFINITIONEN}

Das funktioniert, da IE malwieder die Tatsache ignoriert, dass die zweite Definition eigentlich keinen Sinn macht.

http://www.testticker.de/testticker/...Ref=testticker

Baltasar · 15.03.2005, 11:26

na das erklärt einiges..damit kann sich sicher was anfangen...danke für die hilfe und den link

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fehler bei Übergabe von Variablen aus MySQL in Firefox	jensoweber	Datenbanken	0	13.07.2008 13:14
2 Div's zentrieren	pfump	HTML, Usability und Barrierefreiheit	7	24.04.2008 10:57
Firefox / IE - ungeahnte Statistik	pepe24	Off-Topic Diskussionen	10	30.04.2007 16:46
Firefox will mein 3-spaltiges Layout mit Footer nicht (CSS)!	vampsoftchef	HTML, Usability und Barrierefreiheit	1	28.02.2007 00:22
DIV's untereinander -> Problem	snatch-ic	HTML, Usability und Barrierefreiheit	1	05.02.2007 12:39
templates oder css mit firefox	rbs_phoenix	HTML, Usability und Barrierefreiheit	1	30.10.2006 15:24
Downloadskript auch für Netscape 7.x?	bicpi	PHP-Fortgeschrittene	2	20.04.2006 12:12
[code]-Darstellung Firefox und Mozilla	Magic	Off-Topic Diskussionen	9	21.01.2006 01:15
[Erledigt] window.location.href mit firefox		HTML, Usability und Barrierefreiheit	15	18.11.2005 17:49
[Erledigt] shiftKey bei Firefox abfragen		HTML, Usability und Barrierefreiheit	2	05.08.2005 15:08
Problem mit PFad Firefox - Verzeichnis löschen		PHP Tipps 2005-2	0	19.07.2005 16:05
Deer Park Alpha 1 (=Mozilla Firefox 1.1)		Off-Topic Diskussionen	15	09.07.2005 02:32
[Erledigt] verfluchter Firefox		HTML, Usability und Barrierefreiheit	5	08.07.2005 22:51
Firefox + Divs	Anubis2183	HTML, Usability und Barrierefreiheit	10	28.05.2005 16:33
Fehler mit Hintergrund bei DIV's - Im Firefox - Help me :-(		HTML, Usability und Barrierefreiheit	20	27.05.2005 10:39

13.03.2005, 15:32
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	divs & css: firefox und netscape machen was sie wollen hallo. ich habe folgendes problem: ich erstelle gerade ein seite komplett mit divs, also ohne tabellen oder (i)frames. das problem ist nur, dass sowohl der firefox, wie auch der netscape einen div-container, der sich in einem größeren befindet immer einrücken, obwohl ich das padding und den margin auf null gesetzt habe. hier mal screenshots: http://www.do-not-disturb.net/netscape.gif http://www.do-not-disturb.net/firefox.gif und der ie machts, wie ich es haben will: http://www.do-not-disturb.net/ie.gif und hier noch die code-auszüge. zunächst mal die html-datei: Code: <html> <head> <title>Smallville High - Alles Rund Um Smallville</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="main"> <div id="top"></div> <div id="navtop"> <div id="navtopzelle">Startseite</div> </div> </div> </body> </html> und dann noch der betreffende teil der css: Code: #main { width:760px; height:100%; border: 1px solid #193E76; background-color: #D2E1EB; padding: 2px; text-align: center; vertical-align: top; margin: 0px auto; } #top { width: 756px; height: 150px; border: 1px solid #193E76; background-image: url(graphics/head.gif); padding: 0px; text-align: center; margin: 0px auto; } #navtopzelle { width: 120px; border: 1px solid #193E76; padding: 1px; text-align: center; margin-top: 2px; margin-left: 0px; margin-right: 0px; margin-bottom: 2px; background-color: #A4C7DD; float: left; } #navtop { width: 756px; padding: 0px; text-align: center; margin:0px auto; } ich weiß wie gesagt auch nicht mehr weiter...auch css4you.de hat mir nicht weiter geholfen.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

15.03.2005, 08:21
Gast Beiträge: n/a	Ok, ich bin kein Experte was html und css angeht und kann daher hier nur wiedergenen was ich vor einiger Zeit mal gehört habe (ohne Garantie für Fehler). Soweit ich weiß hält sich IE nicht unbedingt an bestimmte css Standarts und berechnet dadurch die Breite von Tabellen usw. falsch. Allerdings gibt es da diverse Hacks die diese Probleme beseitigen können. Wie gesagt, keine Garantie für Korrektheit der Aussage.

15.03.2005, 08:25
Gast Beiträge: n/a	Hmmmm, welche DIV ist denn bei Startseite ? Bzw. was vom CSS für das DIV mit "Startseite" benutzt ? > margin: 0px auto; "auto" würde ich hier auch rausnehmen.

15.03.2005, 11:26
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	na das erklärt einiges..damit kann sich sicher was anfangen...danke für die hilfe und den link