Sebastian: Problem mit CSS -- FF/Opera und IE

SELF-Forum

Problem mit CSS -- FF/Opera und IE

Sebastian
– Informationen zu den Bewertungsregeln

Ich beschäftige mich gerade mit CSS und versuche mich in diesem Rahmen an der Positionierung der Layout Elemente einer relativ einfachen Homepage.

Nun bin ich direkt auf 2 Probleme gestossen, welche ich selber nicht begreife. Eines im Zusammenhang mit dem IE, eines liegt wohl an mir selber... ich hoffe, ihr könnt mir vllt. bei beiden ein wenig helfen.

Erstes Problem: Der Fuß des Layouts, repräsentiert durch ein abschliessendes Bild welches ich im CSS mit passender Höhe gesetzt habe, wird im FF und Opera richtig angezeigt. Im IE wiederholt es sich. Hier einmal Bilder des Problems, HTML und CSS Quellen. Ich verstehe nicht warum...  könnt ihr mir helfen?

www.omnicomput.de/pics_css/fehler_footer_ie.jpg
www.omnicomput.de/pics_css/ff_no_prob.jpg

  
  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
<meta name="language" content="german, de, deutsch" />  
<meta http-equiv="content-type" content="text/html; charset=utf-8" />  
<link rel="stylesheet" media="screen" href="basic_style.css" />  
  
<title>DESIGN ROHLING!</title>  
</head>  
<body>  
<div id="main">  
         <div id="header"></div>  
         <div id="banner"></div>  
         <div id="navi"></div>  
         <div id="content">  
                 <div id="watermark"></div>  
         </div>  
         <div id="footer"></div>  
</div>  
</body>  
</html>

  
body  
{  
	background-color: #CCCCCC;  
}  
  
#main  
{  
text-align: center;  
margin: 0px auto;  
width: 980;  
}  
  
#header  
{  
	background-image: url(header.jpg);  
	width: 980px;  
	height: 71px;  
}  
  
#banner  
{  
	background-image: url(banner.jpg);  
	width: 980px;  
	height: 204px;  
}  
  
#navi  
{  
	background-image: url(navi.jpg);  
	width: 980px;  
	height: 31px;  
}  
  
#content  
{  
	background-image: url(hintergrund.jpg);  
	width: 980px;  
	height: 560px;  
	repeat-y;  
	text-align: left;  
}  
  
#watermark  
{  
	background-image: url(watermark.jpg);  
	height: 508;  
	width: 223;  
	margin-left: 7px;  
}  
  
#footer  
{  
	background-image: url(footer.jpg);  
	width: 980px;  
	height: 15px;  
}

Das zweite Problem hat dann mit der Positionierung im Dokument zu tun.
Ich hatte versucht das "Wasserzeichen" mit margin-top: 20px um eben 20pixel in der Darstellung nach unten zu versetzen. Opera und Firefox reagieren hierauf jedoch mit einer Spalte zwischen Navi Leiste und Content Bereich von 20px, wo man dann den grauen  Hintergrund sieht. Beim IE rutscht dann das Watermark Bild einfach runter und hängt am unteren Rand über den Footer, obwohl hier noch reichlich platz ist... ?? o_o

Vielen Dank schonmal für eure Hilfe.

Gruß
Sebastian

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem mit CSS -- FF/Opera und IE

    apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, Sebastian!

    Die unterschiedliche Behandlung von FF und IE liegt wohl am fehlenden Doctype. Hierzu gibt es viele Threads und auch in der Doku kann man suchen: Grundgerüst.

    Zur Positionierung kann ich dir dieses Tutorial anbieten.

    Matthias

    --
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln