✔ Darstellung im IE falsch, aber im O und FF richtig!

Status
Nicht offen für weitere Antworten.
cille

cille

Erfahrenes Mitglied
Hallo,
stehe gerade bei einem Problem. Finde die Lösung nicht.
Hier mal ein Paar Screenshots mit den Makierten Problemen:

IE6 & IE7:
IE6 Fehler
IE7 Fehler

OP & FF:
OP Richtig
FF Richtig


Das ist mein Problem und komme da leider nicht weiter.
Hoffe Ihr wisst eine Lösung.

Hier mal der code:

index.html
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="umriss">
	<div class="header"></div>
	<div class="clearer"></div>
	<div class="content">
		<div class="inhalt">
			<?php include("show/switch.php"); ?>
		</div>
	</div>
	<div class="sidenav">
		<h2>Verein</h2>
		<ul>
			<li><a href="index.html?site=startseite">Startseite</a></li>
			<li><a href="index.html?site=chronik">Chronik</a></li>
		</ul>
		<h2>Sport</h2>
		<ul>
			<li><a href="index.html?site=fussball">Fu&szlig;ball</a></li>
			<li><a href="index.html?site=tischtennis">Tischtennis</a></li>
			<li><a href="index.html?site=billard">Billard</a></li>
		</ul>
		<h2>Community</h2>
		<ul>
			<li><a href="index.html?site=guestbook">Gästebucht</a></li>
			<li><a href="index.html?site=forum">Forum</a></li>
			<li><a href="index.html?site=fanshop">Fanshop</a></li>
			<li><a href="index.html?site=download">Download</a></li>
		</ul>
		<h2>Information &amp; Kontakt</h2>
		<ul>
			<li><a href="index.html?site=kontakt">Kontakt</a></li>
			<li><a href="index.html?site=partner">Partner</a></li>
			<li><a href="index.html?site=presse">Presse</a></li>
			<li><a href="index.html?site=links">Links</a></li>
			<li><a href="index.html?site=impressum">Impressum</a></li>
		</ul>
		<h2>Login</h2>
		<ul>
			<li>Hier kommt das Login hin!</li>
		</ul>
		<h2>Suchen</h2>
		<ul>
			<li>Hier kommt die Suche hin!</li>
		</ul>
	</div>
	<div class="clearer"><span></span></div>
</div>
</body>
</html>

style.css
CSS: 
html { min-height: 100%; }
* {	margin: 0px; padding: 0px; }
a { color: #963; }
p { margin: 0px; padding: 0px; }
body { margin: 5px 0; background-color: #0099FF; background-image: url(images/bg.jpg); background-repeat: no-repeat; }
h1,h2 { padding-top: 6px; }
code,ul { padding-bottom: 12px; }

li { list-style: none; }

/* Design */
.umriss { background-color: #FFFFFF; position: absolute; width: 710px; left: 50%; margin-left: -355px; }
.header { background-image: url(images/header.jpg); height: 250px; width: 700px; margin-top: 5px; margin-left: 5px; }
.clearer { height: 2px; }
.content { width: 490px; float: left; margin-left: 5px; background-color: #FFFFFF; margin-bottom: 5px; }
.inhalt { margin: 5px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }

/* Navigation */
.sidenav { float: right; width: 210px; }
.sidenav h2 { background-color: #F9FCFF; color: #5A5A43;	font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 30px; margin: 0px; padding-left: 12px; }
.sidenav ul {	padding: 0;	border-top: 1px solid #EAEADA; }
.sidenav li { border-bottom: 1px solid #EAEADA; }
.sidenav li a { background-color: #F9FCFF; color: #999999; display: block; padding: 8px 0 8px 5%; text-decoration: none;	width: 95%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
.sidenav li a:hover {	background-color: #D2E9FF; color: #000000; }

/* Sonstiges */
.clearer { clear: both; }

Sonnige Grüße,
cille
 
Zuletzt bearbeitet:
Hi,

das Problem im IE6 (= Double Margin Bug) bekommst du folgendermaßen in den Griff:

Code: 
.content { 
width: 490px; 
float: left; 
margin-left: 5px !important;
margin-left: 2.5px;
background-color: #FFFFFF; 
margin-bottom: 5px;
}
 
Danke für die schnelle antwort :).
Habe Dein code mal probiert, löst aber Irgendwie die Fehlanzeige immernoch nicht :(.
Hier mal die Seite, dann könnt Ihr es besser überschauen:
[ Klick Mich ]
[ Style.css ]

Wie gesagt, es sollte eigentlich so ausschen wie im OP und FF.

Danke nochmals :)
 
Wie es scheint, liegt es an dem clearer-DIV zwischen dem Header und den beiden Spalten, dessen Einsatz ich an dieser Stelle im Markup nicht nachvollziehen kann, da der Header ja keine float-Eigenschaft besitzt.

Wenn ich das DIV rausnehme, wandern die Spalten im IE6 ein Stück nach oben.

Ansonsten erweiter die Regel für das Element folgendermaßen, damit es keinen Platz im Textfluss beansprucht:

Code: 
.clearer { 
clear: both;
height:0;
line-height:0;
font-size:0;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück