IE: Positionierung der Elemente

Haris

Hallo, ich bin neuling in Sachen HTML & CSS etc - aber ich habe mir da was zusammengeschrieben...
Es funktioniert bei Google Chrome sowie bei FireFox problemlos (darauf habe ich auch aufgebaut), jedoch wenn ich es z.B im IE 8 öffne ist fehlt die ganze Positionierung und die ganze Seite klebt am linken Bildschirmrand. Bild unten zeigt was ich meine...

Das zweite Problem: siehe Bild unten

Ich habe bereits gegoogelt, aber kein Ergebniss gefunden dass mir hilft....

Hier der Quelltext zum HTML

Code

html
	head
	title EVON title
	link rel=stylesheet type=textcss href=stylesheet.css 
	 script type=textjavascript src=pluginsjquery.jsscript
     script type=textjavascript src=pluginscycle-plugin.jsscript
	script type=textjavascript
		$(document).ready(function(){
		$('#fade').cycle();	});script



	head


	body
		div id=container
		div id=site
		div id=emroslogo
			a href=httpwww.envosbau.at
				img src=picturelogo-emros-group.jpg alt=Evoslogoa
		div
	div id=topmenu
		a href=.Galerie.htm title=Galeriea


		


		a href=.Partner.htm title=Partnera


		


		a href=.Anfahrtsplan.htm title=Anfahrtsplana


		


		a href=.Kontakt.htm title=Kontakta
	div
div


div id=fade style=float-left; 
	img src=pictureheader_1.jpg width=1000       
	img src=pictureheader_2.jpg width=1000 
	img src=pictureheader_3.jpg width=1000 
	img src=pictureheader_4.jpg width=1000 
divdiv


	div id=menuoverall
	div id=menu
		a href=.envos.htm title= class=menuactiveHOMEa
		a href=.1Blabla.htm title= class=1BlablaBlablaa
		a href=.2blabla.htm title= class=2BlaBla2Blablaa
		a href=.3blabla.htm title= class=3blabla3Blablaa
		a href=.4blabla.htm title= class=4Blabla4BlaBlaa
	div
	div
	div id=containerdiv id=fieldoverall
	div id=field


	div id=field1 class=box
		h1 Hier die Überschrift 1 h1
		p Hier kommt der Text rein p
	div
	div id=field2 class=box
		h1 Hier die Überschrift 2 h1
		p Hier kommt der Text rein p
	div
	div id=field3 class=box
		h1 Hier die Überschrift 3 h1
		p Hier kommt der Text rein p
	div
	div
	div
div
	body
html

Alles anzeigen

und hier zu CSS

Code

html, body {
	margin:0;
	padding:0;
	height:100%;
}
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	background-color: white top center;
}




h1, h2, h3, h4, h5, h6 {
	font-size: 14px;
	font-color: #000000;
}


p {
	font-size: 13px;
	font-color: #000000;
}


#topmenu {

	text-align:right;
	text-transform:uppercase;
	color:#8a8a8a;
	font-size:10px;
	margin-top:-28px;
	margin-bottom:10px;


}
#topmenu a, {
	color:#FFFFFF;
	text-decoration:none;
}
#topmenu a {
	padding:0 7px;
	color:#000000;
	text-transform:uppercase;
}
#topmenu a:hover, #topmenu a:focus, #topmenu a.active {
	color:#000000;
}


#site {
	width:1000px;
	margin:0 auto ;
	padding-top:15px;
}
#container {
	 width: 1000px; 
	 margin: 0 auto; 
}


#menuoverall {
	background:url("designpicture/menu_bg/menu_bg.png") top left repeat-x;
	margin-top:-40px;
	position:relative;
	z-index:5;

}


#menu {
	width: 1000px;
	margin:0 auto;
	font-size: 15px;
	font-weight:bold;
	overflow:hidden;
	height:30px;


	
}


#menu a {
	float:left;
	width:198px;
	text-align:center;
	height:30px;
	line-height:30px;
	border-right: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	color:#FFFFFF;
	text-decoration:none;
}




#menu a:hover, #menu a.active {
	background:url("designpicture/menu_bg/menu_over_bg.gif") top left repeat-x;
	color:#000000;
}


#field1 {
	float: left;
	margin-top: 50px;
	margin-right: 50px;
}


#field2 {
	float: left;
	margin-top: 50px;
	margin-left: -15;
}


#field3 {
	float: right;
	margin-top: 50px;
}


#Blabla1 {
	float: left;
	margin-top: 50px;
	margin-left: 500px;
}


table {
	font-size:11px;
}


.box {
	background:url(designpicture/box/box-small.jpg) top left no-repeat;
	width:260px;
	height:250px;
	padding:0 25px;
}


.box h1 {
	margin-top:10px;
}


.BoxTop_L {
	background:url(designpicture/box/boxTop_L.gif) top left no-repeat;
	height:31px;
	text-align:left;
	padding-left:25px;
	overflow:hidden;
}


.BoxBG_L {
	width:920px;
	background:url(designpicture/box/boxBG_L.gif) top left repeat-y;
	float:left;
}


.BoxBottom_L {
	background:url(designpicture/box/boxBottom_L.gif) bottom left no-repeat;
}


.BoxTop_L_short {
	background:url(designpicture/box/boxTop_L_short.gif) top left no-repeat;
	height:31px;
	text-align:left;
	padding-left:25px;
	overflow:hidden;
}


.BoxBG_L_short {
	width:800px;
	background:url(designpicture/box/boxBG_L_short.gif) top left repeat-y;
	float:left;
}


.BoxBottom_L_short {
	background:url(designpicture/box/boxBottom_L_short.gif) bottom left no-repeat;
}


.BoxTop_L_partner {
	background:url(designpicture/box/boxTop_L_short.gif) top left no-repeat;
	height:31px;
	text-align:left;
	padding-left:25px;
	overflow:hidden;
}


.BoxBG_L_partner {
	width:700px;
	background:url(designpicture/box/boxBG_L_short.gif) top left repeat-y;
	float:left
}


.BoxBottom_L_partner {
	background:url(designpicture/box/boxBottom_L_short.gif) bottom left no-repeat;
}


.content {
	padding:10px 25px 20px 25px;
}


.kontent {

	padding: 20px 30px 20px 25px;
}


#contentbox {
	margin-top: 30px;
	margin-left: 50px;
}


#fade {


	margin-top: 25px;
	width: 1000px;  
	height: 300px; 
	border: 0px solid orange;
	padding: 5px;


}

Alles anzeigen

Würd mich freuen wenn ihr mir helfen könnt

Bilder:
Firefox (Funktioniert)

Code

http://i.imgur.com/P4n1H.png


IE Problem 1
http://i.imgur.com/1nBzy.png


IE Problem 2
http://i.imgur.com/e5eyL.jpg

Bandit

Was soll das sein? HTML-Code auf jeden Fall nicht. Poste bitte einen Link zur Seite.

Haris

Da gabs ein Fehler...hier der echte:

Sie ist nicht online...

hab aber Bilder dazugespostet wie es aussieht

HTML

<html>
	<head>
	<title> EVON </title>
	<link rel="stylesheet" type="text/css" href="stylesheet.css" />
	 <script type="text/javascript" src="plugins/jquery.js"></script>
     <script type="text/javascript" src="plugins/cycle-plugin.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		$('#fade').cycle();	});</script>



	</head>


	<body>
		<div id="container">
		<div id="site">
		<div id="emroslogo">
			<a href="http://www.envosbau.at">
				<img src="picture/logo-emros-group.jpg" alt="Evoslogo"></a>
		</div>
	<div id="topmenu">
		<a href="./Galerie.htm" title="">Galerie</a>


		|


		<a href="./Partner.htm" title="">Partner</a>


		|


		<a href="./Anfahrtsplan.htm" title="">Anfahrtsplan</a>


		|


		<a href="./Kontakt.htm" title="">Kontakt</a>
	</div>
</div>


<div id="fade" style="float-left;"> 
	<img src="picture/header_1.jpg" width="1000" >      
	<img src="picture/header_2.jpg" width="1000" >
	<img src="picture/header_3.jpg" width="1000" >
	<img src="picture/header_4.jpg" width="1000" >
</div></div>


	<div id="menuoverall">
	<div id="menu">
		<a href="./envos.htm" title="" class="menuactive">HOME</a>
		<a href="./1Blabla.htm" title="" class="1Blabla">Blabla</a>
		<a href="./2blabla.htm" title="" class="2BlaBla">2Blabla</a>
		<a href="./3blabla.htm" title="" class="3blabla">3Blabla</a>
		<a href="./4blabla.htm" title="" class="4Blabla">4BlaBla</a>
	</div>
	</div>
	<div id="container"><div id="fieldoverall">
	<div id="field">


	<div id="field1" class="box">
		<h1> Hier die Überschrift 1 </h1>
		<p> Hier kommt der Text rein </p>
	</div>
	<div id="field2" class="box">
		<h1> Hier die Überschrift 2 </h1>
		<p> Hier kommt der Text rein </p>
	</div>
	<div id="field3" class="box">
		<h1> Hier die Überschrift 3 </h1>
		<p> Hier kommt der Text rein </p>
	</div>
	</div>
	</div>
</div>
	</body>
</html>

Alles anzeigen

Bandit

Zitat von Haris

Sie ist nicht online...

Dann ändere das, zur Not mit einem Freehoster

Zitat von Haris

hab aber Bilder dazugespostet wie es aussieht

Das hilft herzlich wenig

Unregistriert

Verstehe - Kennst du da einen guten?

sejuma

Ich vermute, deiner Seite fehlt ein standardkonformer Doctype.
Den braucht der Internetexplorer zur korrekten Darstellung des CSS-Boxmodells.

Link wäre jedoch hilfreich.

Tags