Anzeige im IE korekt, aber im Firefox verschoben

djchaos

Hallo,

habe vor ein paar tagen erst mit dem Html angefangen. Mittels dem Ebook Html Seminar habe ich schon meine erste Hompage zusammengebastelt.

Nun aber habe ich das Problem das die Site im IE so aussieht wie sie aussehen sollte, aber im Firefox ist alles verschoben.

Wer kann mir da helfen?

Hier mal die Seite http://www.html-seminar.de/www.zauberhafte-n%C3%A4gel.de

Schon mal vielen dank

djchaos

Denke ich habe mist mit dem Doctype gebaut.

Funzt nun auch nicht mal mehr im IE. :(((

NeoAramis

Ein kleiner Tipp bevor du beginnst. Schon mal von HTML5 gehört? Wenn ja, spring auch auf den Zug und lerne es gerade von Beginn. Weil HTML5 ist momentan das A und O in der Webtechnik. Wer es nicht verwendet ist definitiv nicht auf dem aktuellsten Stand. Vor allem aber: es vereinfacht vieles enorm.

Und nun zum Code. Bevor du mit Bilder und dergleichen herumspielst, schau dass du eine mehrspaltige Seite zuerst korrekt floatest. Oder noch nie von Floating gehört? Ich sage das immer wieder gern. Zuerst schauen das man ein solides Grundgerüst hat und dann kann man darauf aufbauen. Später Änderungen und Korrekturen vorzunehmen ist mühsam und kostet enorm Nerven, weil der Fehler aufgrund der Codemenge meistens unauffindbar wird.

Das gleiche gilt beim CSS. Vorher ein Reset-Stylesheet einzubinden, verhindert auch viele Fehler.

Hier ein einfaches Beispiel:

HTML

<!DOCTYPE html>
<html>
	<head>
	    <title>Titel</title>
	    <meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" media="screen" href="css.css"/>
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<div id="page">
			<header>
				<h1>title h1</h1>
			</header>
			<nav>
				<ul>
					<li><a href="#"title="title">nav</a></li>
					<li><a href="#"title="title">nav</a></li>
					<li><a href="#"title="title">nav</a></li>
					<li><a href="#"title="title">nav</a></li>
					<li><a href="#"title="title">nav</a></li>
				</ul>
			</nav>
			<article>
				<p>article</p>
			</article>
			<aside>
				<p>aside</p>
			</aside>
			<footer>
				<p>footer</p>
			</footer>
		</div>
	</body>
</html>

Alles anzeigen

Code

/*	css.css */
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
	}

	:focus {
		outline: 0;
	}

	body {
		line-height: 1;
		color: black;
		background: white;
	}

	ol, ul {
		list-style: none;
	}

	table {
		border-collapse: separate;
		border-spacing: 0;
	}

	caption, th, td {
		text-align: left;
		font-weight: normal;
	}

	blockquote:before, blockquote:after, q:before, q:after {
		content: "";
	}

	blockquote, q {
		quotes: "" "";
	}

	html {

	}

	body {
	}

	div#page {
		width: 960px;
		margin: 0 auto;
		margin-top: 20px;
	}

	header {
		background-color: #ddd;
		margin-bottom: 20px;
	}

	nav {
		background-color: #ddd;
		margin-bottom: 20px;
	}

	article {
		float: left;
		width: 300px;
		background-color: #ddd;
		margin-bottom: 20px;
	}

	aside {
		float: right;
		width: 620px;
		background-color: #ddd;
		margin-bottom: 20px;
	}

	footer {
		clear: both;
		background-color: #ddd;
		margin-bottom: 20px;
	}

Alles anzeigen

Jetzt mitmachen!