unterschiedliche divpositionen im ff und ie

des1 · 30.09.2005, 14:30

hallo zusammen,
bin grad dabei mich mit css zu beschäftigen und stehe dabei vor dem problem dass bei dieser klick hier die navigation im ff ausserhalb des grauen feldes ist und im ie innerhalb. ich finds einfach nicht raus wie ichs schaff dass sie bei beiden browsern innerhalb ist. noch ein kleiner hinweis es gehen bisher nur die zwei rechtesten links "biographie" und "navigation". wieso bei den zwei letztgennanten seiten dass layout dann nochmal um paar pixel nach oben springt ist mir auch noch ein rätsel.

schonmal danke im voraus für die hilfe!

gruß des1

Boris · 30.09.2005, 14:44

Schau mal hier:
http://www.carsten-protsch.de/zwischennetz/doctype/

des1 · 30.09.2005, 15:27

danke für den interessanten link! konnte da aber keine lösung und auch keinen ansatz finden, deshalb tappe ich weiter im dunkeln.

Boris · 30.09.2005, 23:30

Ok, dann genauer.

Da du einen alten DOCTYPE benutzt, wirfst du den IE6 in den sogenannten Quirksmodus - in diesem interpretiert er das CSS Boxmodel total falsch. Anstelle padding, margin und border zu width dazu zu rechnen, wird es im Quirksmodus abgezogen.

Der Firefox / Mozilla hingegen macht es immer richtig, auch mit altem DOCTYPE.

Das steht alles auch hier:
http://www.carsten-protsch.de/zwisch...model_bug.html

Daher sieht deine Seite bei beiden anders aus. Gib einfach einen korrekten DOCTYPE an, dann stellt der IE6 es genau so wie der Firefox / Mozilla dar. Nimm einfach diesen:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

des1 · 01.10.2005, 08:53

hallo boris,
danke für die erklärung, nur hatte ich das leider wschon ausprobiert den einen neueren doctype wie den von dir genannten zu verwenden. dass hat aber nur dazu geführt dass die seite vertikal nicht mehr zentriert dargestellt wird.
und auch wenn ich padding, margin und border mit 0 angegeben habe, so dass das addieren oder subtrahieren keine rolle gespielt hat,war die darstellung unterschiedlich.

meine bisherige lösung:
wenn ich die schrift der navigation nicht mit h1 formatiere sondern über einen neuen class-style dann ist die darstellung im ff dieselbe wie im ie! ich weiss zwar nicht warum aber irgendwie ist es so!

aber trotzdemnoch ml danke für deine hilfe!

des1 · 01.10.2005, 09:10

kleiner nachtrag:
ebenfalls eine gleiche darstellung erreiche ich wenn man für alle divs und[u] deren inhalte border, margin und padding mit "0" definiere!
deshalb jetzt meine frage ob mann nicht global für eine seite den wert "0" für alle elemente setzen kann?

Cpunkt · 01.10.2005, 10:25

Zitat:

deshalb jetzt meine frage ob mann nicht global für eine seite den wert "0" für alle elemente setzen kann?

Das hier an den Anfang der CSS-Datei setzten:

Zitat:

* {
margin:0;
padding:0

So ein Problem hatte ich gestern auch, und der Tipp vom heromaster hat geholfen

Boris · 01.10.2005, 11:48

Zitat:

dass hat aber nur dazu geführt dass die seite vertikal nicht mehr zentriert dargestellt wird.

Das liegt daran, dass sich die Browser mit dem neueren DOCTYPE an den W3C Standard halten - und da sind Höhenangaben über HTML nicht erlaubt. Du musst das dann via CSS für deine Tabelle angeben.

Allerdings braucht dein Code generell eine komplette Frischzellenkur - es ist ein ziemlicher Kauderwelsch-Mix mit Tabellen und Ebenen. Ich war mal so frei und hab deine Seite nachgebaut, komplett ohne Tabellen. Da fehlt zwar noch ein wenig, aber es entspricht deinem Grundaufbau

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Unbenannt</title>
		<style media="screen" type="text/css">
		*
		{
			margin:0;
			padding:0;
			border: 0 none;
		}

		body
		{
			font-size: 100.01%;
			height: 100%;
			text-align: center; /* Um es im IE5.x zu zentrieren */
			background-color: #fff;
			color: #000;
		}

		#zentrier
		{
			position:absolute;
			width: 600px;
			height: 400px;

			margin: -200px 0px 0px -300px;
			top: 50%;
  			left: 50%;
		}

		#inhalt
		{
			width: 600px;
			height: 400px;
			background: #E6E6E6 url(http://www.des1.de/new/images/logo.gif) no-repeat 570px 20px;

			text-align: left;
		}

		#navigation
		{
			width: 590px;
			padding-right: 10px;
			background-color: #e6e6e6;
			margin: 0 auto;
			text-align: right;
		}

		#navigation a
		{
			color: #353788;
			font-family: "Courier New", Courier, Monaco;
			text-decoration: none;
			font-weight: bold;
			font-size: 13px;
		}

		#navigation a:hover
		{
			color: #000;
		}

		</style>
	</head>

	<body>

	<div id="zentrier">
		<div id="inhalt">
			<h3>Ein Titel und so</h3>
			<p>Hier kommt dein Inhalt rein</p>
		</div>

		<div id="navigation">
			<a href="grafik/grafik.html">graphik</a> | <a href="photo/photographie.html">photographie</a> | <a href="web/website.html">internet</a> | <a href="sonst/biographie.html">biographie</a> | <a href="sonst/kontakt.html">kontakt</a>
		</div>
	</div>

	</body>
</html>

des1 · 01.10.2005, 13:49

hallo boris,
danke für die umfassende hilfe. ich sollte mich vielleicht doch wieder mehr auf dass printmedium konzentrieren als im web so rumzustöpseln, oder endlich mal vernünftig in die aktuellen webgrundlagen einarbeiten.

dass es so wie du es gelöst hast natürlich viel eleganter gelöst ist leuchtet mir sofort ein, hab nur gerade erst angefangen mich mal intensiver mit css zu beschäftigen, bin aber noch nicht so besonders weit.

deshalb noch mal vielen dank für die elegante lösung!

gruß des1

Boris · 01.10.2005, 14:06

Nun, du kannst damit ja experimentieren ... und wenn du etwas nicht verstehst, frag einfach im TP