• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Darstellungsproblem im IE

Rome83

New member
Hallo

Ich möchte gerne eine 3spaltige Webseite mit Kopf darunter eine Navigationsleiste und einem Footer Bereich erstellen. dies ist mir in Verbindung mit Firefox schon ordentlich gelungen. Leider hab ich das Problem, dass der IE alle Spalten falsch anordnet und sich daher das Bild der Webseite komplett verzieht. Habe schon mehrfach über CSS Hack und IE spezielle Befehle gelesen und auch ausprobiert, das Ergebniss ist aber genauso ernüchternd.
Wäre echt schön wenn Ihr mir helfen könntet.

Gruß
Roman

Code:
<html>

<head>

<base href="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="content-language" content="de" /> 
<meta name="robots" content="index, follow" />

<title></title>

<style type="text/css">
body {background-color:#cdc49d; font:normal 100.00% Helvetica,Arial,sans-serif;}
div#logo {background-color:#8a2338;}
ul#Menue {margin:1px; padding:1px; text-align:center; background-color:#333333;}
ul#Menue li {list-style:none; display:inline; margin:1px; padding:1px;}
ul#Menue a {float:left; width:80px; margin:2px; padding:0px 16px; text-decoration:none; border:1px solid white; border-left-color:#333333; border-top-color:#333333; border-bottom-color:#333333; color:white;}
ul#Menue a:hover {border:1px solid white; border-left-color:#333333; border-top-color:#333333; border-bottom-color:#333333; color:white; background-color:gray;}
ul#Menue div {clear:left;}
#linie {border:1px solid #333333; width:800px; position:relative; left:-8px;}
#linie2 {border:1px solid #333333;}
#links {float:left; width:165px; padding:10px;}
#mitte {float:left; width:665px; padding:10px; position:relative; top:20px; bottom:30px;}
#rechts {padding:10px; margin-left:830px; background:#ffffff;}
#links, #mitte, #rechts {padding-bottom:37500px; margin-bottom:-37500px;}
#footer {text-align:center;}
#container {overflow:hidden;}
div#back1 {background-image: url(textoben.jpg); background-repeat:no-repeat; height:75px;}
div#back2 {background-image: url(textmitte.jpg);background-repeat:repeat-y;}
div#back3 {background-image: url(textunten.jpg); background-repeat:no-repeat; height:75px;}
#navi {background-image: url(linkb.jpg); background-repeat: no-repeat;}
div#navi a {text-decoration:none; color:black;}
div#navi a:hover { background-image: url(linka.jpg);color:#8a2338; background-repeat: no-repeat;text-decoration:none;}
</style>

<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
#rechts {float:left; display:inline; margin-left:0;}

#container {display:inline-block;}
</style>
<![endif]-->

</head>

<body>

<div id="header">
	<div id="logo"> /div>
	<div id="menue">
 		 <ul id="Menue">
    		<li><a href="/seite1.html">Menue1</a></li>
    		<li><a href="/seite2.html">Menue2</a></li>
    		<li><a href="/seite3.html">Menue3</a></li>
    		<li><a href="/seite4.html">Menue4</a></li>
    		<li><a href="/seite5.html">Impressum</a></li><div></div>
  		</ul>
	</div>
</div>

<div id="container">
	
	<div id="links">
    	        <div id="linie"></div> 
   	</div>

	<div id="mitte">
    		 
	</div>

	<div id="rechts">
		 
    	</div>
</div>

		<div id="footer">
			<div>
                                 <div id="linie2"></div> 
			</div>
		</div> 
</body>
</html>
 
Zuletzt bearbeitet:
Du solltest das CSS in eine externe Datei per Referenz legen. Damit hast du mehr Übersicht und verfolgst die Idee, die hinter CSS steckt. Außerdem gibt es für Fehler im Quellcode Validatoren.
 
Zurück
Oben