CSS Darstellungsproblem mit dem IE

Ibkiz · 24. Oktober 2008

Hallo ihr lieben. Ich hab da mal ein Problem.
Ein anderer Azubi und ich sollen für einen Kunden (außerplanmäßig) eine Webseite erstellen. Wir beide sind aber leider nicht allzu bewandert, was das CSS und PhP angeht. (er kann etwas mit php umgehn.. ich mit css)

Nur stehen wir jetzt .. kurz vor ende der Layouterstellung vor einem Problem.
Unsere Site sieht in Chrome, FF und anderen Browsern wunderbar aus. Alles ist da wo es hinsoll.
Nur wenn wir es im IE versuchen (bei uns 6.0 und 7) zerschreddert es die komplette Darstellung.
Was sollen wir tun? Hier als Beispiel unsere Seite bis jetzt:

www.der-didi.com/test

PS: Umlaute werden noch verändert.. der Inhalt noch eingefügt

abulafia · 24. Oktober 2008

Ich kann euch technisch nicht helfen, aber "gewährleisten" solltet ihr dringend in "gewähren" ändern.

Jyskall · 24. Oktober 2008

Habe leider keine volle Einsicht in deine CSS Datei, aber ich vermute mal einfach das ihr dem DIV nicht die korrecte "position" Eigenschaft gegeben habt.

einfach folgendermasen:

<style...>
div#mainleft
{
position: static;
float: left;
}
div#content
{
psoition: static;
float: right;
}
</style>

<div id="main">

</div>

wiked · 24. Oktober 2008

Wenn du uns noch deine CSS Datei zeigen würdest, könnten wir dir vielleicht etwas mehr helfen

und ist es absicht, dass das Logo oben fast unleserlich ist? Schaut mir etwas zu stark verkleiner aus...

ag3nt · 24. Oktober 2008

Wieder ein Fall von: Da ist noch Spielraum für Verbesserungen!

BITTE BEHEBT ERST ALLE SICHERHEITSPROBLEME BEVOR IHR DIE SEITE INS NETZ STELLT - BENUTZEREINGABEN WERDEN VON EUCH NICHT AUSREICHEND GEPRÜFT!

Zu deinem CSS-Problem:
Zunächst ist die Seitenstruktur sehr viel komplexer als es notwendig wäre, gerade der IE mag sowas nicht unbedingt. Ich habe aber auch keine Lust mich da jetzt mühsam einzulesen, da so ein Design in 30min von Null aufgesetzt ist.
Da ihr die Zeit aber unbedingt nutzen solltet um die Sicherheitslecks zu stopfen gibt ausnahmsweise mal ein funktionierendes Beispiel, dass in den meisten Browsern funktionieren sollte, natürlich ohne Garantie etc.

Code:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Didier Bourgois</title>
	<style type="text/css">
		body {
			width: 800px;				
			border: 1px solid #000;
			margin: auto;
			margin-top: 12px;				
			font-family: Arial,Helvetica,sans-serif;
			color: #fff;				
			text-align: left;				
		}
			
		#logo {
			position: absolute;				
			top: -102px; 
			left: 170px;
			width: 200px;
			height: 92px;
			background: url('http://www.der-didi.com/test/Bilder/logo.gif') no-repeat right bottom;
		}
		
		#main {
			position: relative;				
			height: 400px;				
			margin: 0;	
			padding: 0;			
			border-bottom: 1px solid #000;
			border-top: 1px solid #000;				
			background: #910F13 url('http://www.der-didi.com/test/Bilder/start_quadrat.jpg') no-repeat 35px 35px;				
			margin-top: 105px;
		}
		
		#didi {
			position: absolute;				
			width: 220px;				
			left: 5px;
			bottom: 5px;
			top: 0px;						
			margin:0;									
			background: url('http://www.der-didi.com/test/Bilder/didi.gif') no-repeat left bottom;					
			z-index:99;
		}
			
		#content {
			position: absolute;									
			left: 170px;
			bottom: 0px;
			right: 0px;
			top: 0px;					
			padding-left: 75px !important;
			padding: 35px;					
			background: #4E6476;
			border-left: 1px solid #000;					
			overflow: auto;
		}
			
		#content h1 {
			margin-top: 0;
			margin-left: -55px;				
		}
			
		#menu {				
			margin: 0;
			padding: 0;		
			margin-top: 15px;						
			height: 35px;
			width: 800px;				
			list-style-position: outside;
			list-style-type: none;				
		}
			
		#menu li {
			float: left;
			padding-left: 16px; 
			padding-right: 15px; 				
			border-left: 1px solid #000;
			border-right: 1px solid #000;				
			margin-left: -1px;
		}
			
		#language,
		#menu img,
		#menu li:first-child {
			border: 0 !important;
			float: left;
		}
			
		#language {
			margin-top: -2px;
		}
			
		#menu a {
			text-decoration: none;
			color: #000;
		}
		
			
	</style>
</head>
	
<body>	
<div id="main">
	<div id="logo"></div>	
	<div id="didi"></div>			
	<div id="content">								
		<h1>Willkommen</h1>
				
		<p>Herzlich Wilkommen auf meiner Webseite.</p>
		<p>Ich möchte Ihnen hier einen kleinen Einblick in meinen Betrieb gewähren. Hier sehen sie ein paar meiner Angebote und wo sie mich finden können. Ich würde mich freuen, bald von Ihnen zu hören!</p>
				
	</div>			
</div>
<ul id="menu"> 
	<li><a href="#">Startseite</a></li>
	<li><a href="#">Angebot</a></li>
	<li><a href="#">Kontakt</a></li>
	<li><a href="#">Impressum</a></li>
	<li><a href="#">Disclaimer</a></li>
	<li id="language"><a href="#"><img src="http://www.der-didi.com/test/Bilder/fr.jpg" alt="French"/></a></li>
</ul>
</body>
	
</html>

Suche

CSS Darstellungsproblem mit dem IE

Ibkiz

Newbie

abulafia

Gast

Jyskall

Lieutenant

wiked

Ensign

ag3nt

Lieutenant

Ähnliche Themen