✔ Problem mit Webseiten Layout und IE7

Nerolein · 27. April 2010

Hallo,

monentan hab ich das problem, das meine rechte div verschoben ist. Das problem ist komischerweise nur im IE so. Ich bin schon die ganze Zeit an probieren, aber ne richtige lösung konnte ich nicht finden. Nur wenn ich margin-right:-6% setze kommt es mein ziel etwas näher. Aber dennoch ist es nicht so wie ich es will. Desweiteren ist im IE rechts neben den News, so ein häßlicher vertikaler balken... Im Firefox dagegen passt alles so wie es sein sollte.

Wäre über jeden Ratschlag dankbar =)

main.css:

Code:

* {
	padding: 0;
	margin: 0;
	border: 0;
	font-family: Verdana, Sans-Serif;
	font-size: 11px;
	
}
hr {
	color: transparent;
	height: 30px;
	width: 450px;
	margin: 0px auto;
	background: url(../bilder/hr.png);
}
.hr1 {
	color: transparent;
	height: 15px;
	min-width: 150px;
	margin: 0px auto;
	background: url(../hr.png);
}

body {
	line-height: 16px;
	background-color: #ffffff;
	
}

input{
	border: 1px solid grey;
}

textarea {
	border: 1px solid grey;
}

a:LINK {

	color:#000000;
	font-weight: bold;
	
}

a:HOVER {

	color: #ffffff;
	font-weight: bold;

}

a:VISITED {

	color: #000000;
	font-weight: bold;

}

a:ACTIVE {

	color: #000000;
	font-weight: bold;

}

.errorField 
{
    BORDER-RIGHT: #9F0004 1px solid;
    BORDER-TOP: #9F0004 1px solid;
    BORDER-LEFT: #9F0004 1px solid;
    BORDER-BOTTOM: #9F0004 1px solid;
    FONT-SIZE: 9px;
    WIDTH: 143px;
    background-color: #FFFFCC;
}  

#box {
	width: 1010px;
	margin: 0;
}
#wrapper {
width: 1010px;
}

#header {
	width: 1010px;
	height: 174px;
	background-image: url("../header.png");
	background-repeat: no-repeat;
}

#nav-head {
	width: 1010px;
	height: 80px;
	background-image: url("../nav-head.png");
	background-repeat: no-repeat;
}

#spacer {
clear: both;
}

#adv-left {
	width: 200px;
	height: 1317px;
	background-color: #404040;
	float: left;
	}
#main {
	float: left;
	width: 500px;
       background-color: #ffffff;
 }

#preview {
	width: 505px;
	height: 184px;
	background-image: url("../preview.png");
	background-repeat: no-repeat;
}

#content {
	width: 505px;
	background-image: url("../content.png");
	background-repeat: no-repeat;
    	display: inline;
    	background-color: #ffffff;

}
#content table {
		margin: 0px auto;
}

#rechts  { 
	width: 305px;
	float:right;
}

#whithespace {
	width: 305px;
	height: 50px;
	background-color: #ffffff;
}
#login {
	width: 300px;
}

.login_table_head {
	background-image: url("../table/login_table_head.png");
	width: 305px;
	height: 26px;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	vertical-align: top;
}

.login_table_content {
	background-image: url("../table/login_table_content.png");
	width: 305px;
	min-height: 80px;
}

.login_table_footer {
	background-image: url("../table/login_table_footer.png");
	background-repeat: no-repeat;
	width: 305px;
	height: 34px;
}
#umfrage {
	width: 305px;
	background-color: #383838;
}

#advertise {
	width: 305px;
	height: 300px;
	background-color: #383838;
}

#footer {
	width: 1010px;
	height: 228px;
	background-image: url("../footer.png");
	background-repeat: no-repeat;
}

.table_head {
	background-image: url("../table/table_head.png");
	width: 490px;
	height: 26px;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	vertical-align: top;
}

.table_content {
	background-image: url("../table/table_content.png");
	width: 490px;
	min-height: 80px;
}

.table_footer {
	background-image: url("../table/table_footer.png");
	background-repeat: no-repeat;
	width: 490px;
	height: 34px;
}

// Umfrage

ul.poll{
border: 1px solid #737373;
border-width: 2px 0px;
list-style: none;
width: 250px;
margin: 0 0 8px;
padding: 10px;
}

ul.poll li{
margin: 0 0 7px;
padding: 0;
}
.rate{
background: #E6E6E6;
height: 15px;
margin-bottom: 0px;
text-align: right;
font-size: 0.8em;
}

.vote{
background: #8BABD1;
height: 15px;
float: left;
}

.radio{
width: 20px;
margin-left: 5px;
}

index.php

PHP:

<?php session_start(); 
include("includes/functions_login.php");
?>
<html>
	<head>
		<title>Test</title>
		<link rel="stylesheet" type="text/css" href="bilder/css/main.css">
				
		<script type="text/javascript">
		function chkFormular() {
			if(document.Formular.user.value == "") {
				alert("Bitte geben sie einen Benutzernamen ein.");
				document.Formular.user.focus();
				return false;
			}
			if(document.Formular.passwd.value == "") {
				alert("Bitte geben sie ein Passwort ein.");
				document.Formular.passwd.focus();
				return false;
			}
		}
		</script>
	</head>
	
	<body>
<div id="wrapper">
   <div id="header"></div>
   <div id="nav-head"></div>
   <div id="wrappermain">
      <div id="adv-left"><div style="margin-left:30px"></div></div>
      <div id="main">
         <div id="preview"></div>
         <div id="content"><?php include("module.php"); ?></div>
      </div>
	  <div id="rechts">
        <div id="login"><div class="login_table_head"></div>
						<div class="login_table_content"><div style="margin: 0 40px 0;"><?php include("menu.php"); ?></div></div>
						<div class="login_table_footer"></div>
		</div>
		<div id="whithespace"></div>
		<div id="umfrage"><div class="login_table_head"></div>
						  <div class="login_table_content"><div style="margin: 0 40px 0;"><?php include("umfrage.php"); ?></div></div>
						  <div class="login_table_footer"></div>
		</div>
		<div id="whithespace"></div>
		<div id="advertise"></div>
		<div id="whithespace"></div>
      </div>
   </div>
   <div id="spacer"></div>
   <div id="footer"></div>
</div>
	</body>
</html>

Frezl · 27. April 2010

Hey Nerolein,

ich sehe in deinem HTML-Code keine Doctype-Deklaration. Nach welchem Doctype arbeitest du denn? Ich hab die Erfahrung gemacht, dass man nur dann ohne irgendwelche Browser-Hacks und Sonderlösungen auskommt, wenn man Strictes HTML schreibt. Ganz ohne Doctype ist jedenfalls die schlechteste aller Lösungen, weil dann jeder Browser andere Standard-Interpretationen verwendet...

Grüße, Frezl

Nerolein · 27. April 2010

Hallo Frezl,

ich war der annahme, das es automatisch den doctyp 4.1 verwendet.

Auch wenn ich ihn Deklariert habe, bringt es nicht den gewünschten erfolg das die rechte navi neben den content ist nicht darunter.

// EDIT

Es lag ja tatsächlich nur am Doctyp oO

Frezl · 27. April 2010

Na dann freue ich mich, dass ich helfen konnte ;-)

Der Doctype legt fest, nach welchen Regeln der Browser deinen HTML-Code interpretieren soll. Es gibt nämlich zig verschiedene HTML-Versionen, teilweise mit Abspaltungen, weshalb man auch oft von (X)HTML spricht. Die verschiedenen Doctypes verlangen dabei mehr oder weniger strikte Standardkonformität vom Designer. Je Standardkonformer du designst, desto eher kannst du davon ausgehen, dass deine Seite in allen Browsern gleich aussieht. Allerdings musst du dann auf manche Bequemlichkeiten verzichten.

Ich schreibe wie gesagt meine Seiten mittlerweile alle Strict. Da musst ich zwar einige Tricks und Kniffe lernen, wie man gewisse Dinge erledigt, aber dafür spar ich mir die bescheuerten Hacks, die ja nun wirklich weit weg von jedem Standard sind.

Mehr Infos zu den Doctypes findest du hier: http://de.selfhtml.org/html/allgemein/grundgeruest.htm

Und Tutorials.de und Google werden dir dabei helfen, nach einem gewünschten Standard zu schreiben ;-)

Grüße,
Frezl

Maik · 27. April 2010

Hi,

in diesem Zusammenhang auch als Lektüre empfehlenswert: Der »DOCTYPE-Switch« und seine Auswirkungen.

Merke: Wenn IE7 und IE8 in den "Quirks Mode" geschaltet werden, was bei dir der Fall war, verhalten sie sich in diesem Darstellungsmodus genauso fehlerhaft, wie ihre berühmt-berüchtigten Vorgänger IE5 und IE6.

mfg Maik

✔ Problem mit Webseiten Layout und IE7

Nerolein

Mitglied

Anhänge

Frezl

Erfahrenes Mitglied

Nerolein

Mitglied

Frezl

Erfahrenes Mitglied

Maik

Neue Beiträge