✔ Fehlerhafte DIV darstellung im IE

Status
Nicht offen für weitere Antworten.
B

bandsite

Mitglied
Hallo,
Ich hab' mal wieder 'n Problem mit CSS. Ich habe ein Layout zusammengebaut und dafür mehrere DIV's verwendet. Die DIV's sind bis zu vierfach in einander verschachtelt.

Den vierten DIV stellt der IE nur "verkrüppelt" da:
Fehlerhafte darstellung

Firefox macht das hingegen richtig:
Richtige Darstellung

Hat jemand 'ne Ahnung was das sein kann?

Gruß & THX , bandsite
 
Okay, also dieser DIV Container :
Code: 
echo '<div id="announce">';
echo 'The Website is in Administration-mode.<br />To edit content, simply klick on an Link in the Mainmenu.<br /><br /><a href="index.php?leaveadmin=1">Klick here to leave Administration mode</a>';
echo '<br /><br /><a href="index.php?link=admin&amp;edit=mainsite">Main Site Configuration</a>';
echo '</div>';

...hat diesen CSS Code:

Code: 
#announce {
	padding: 5px 5px 5px 5px;
	margin: 5px 5px 5px 5px;
	
	background-color: #FFFFFF;
	border: solid 1px #333333;
	
	font-size: 12px;
	color: #000000;
}

Das hier ist der Quellcode, den ich mir per rechter Maustaste im IE anzeigen lasse:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>EFT-Practice for Holistic Well-being</title>
	<link href="./designpacks/modern/construction.css" rel="stylesheet" type="text/css" />
</head>
	<body>
	<div id="container">
		<div id="header">
			&nbsp;
		</div>
		<div id="menu">
			<ul class="ul_menu">
				<li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu" 		href="index.php?link=admin&amp;edit=home">Home</a></li>
				<li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu" 		href="index.php?link=admin&amp;edit=about">About Sunny van Vlijmen</a></li>
				<li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu" 	href="index.php?link=admin&amp;edit=services">My Services</a></li>
				<li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu" 	href="index.php?link=admin&amp;edit=technique">The Technique</a></li>
				<li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu" 	href="index.php?link=admin&amp;edit=exercise">Anti-Stress Exercise</a></li>
				<li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu" 	href="index.php?link=admin&amp;edit=workshops">Workshops &amp; Groups</a></li>
				<li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu" 	href="index.php?link=admin&amp;edit=sessions">Phone Sessions</a></li>
				<li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu"		href="index.php?link=admin&amp;edit=store">EFT Store</a></li>
				<li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu" 	href="index.php?link=admin&amp;edit=research">Research on EFT</a></li>
				<li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu" 		href="index.php?link=admin&amp;edit=links">Important Links</a></li>
				<li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu" 		href="index.php?link=admin&amp;edit=news">News</a></li>
				<li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu" 	href="index.php?link=admin&amp;edit=contact">Contact</a></li>
				<br />
				<li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menuactive" 		href="index.php?link=admin">Administration</a></li>
			</ul>
		</div>
		<div id="content">
			<div id="content_header"><img src="designpacks/modern/header_admin.png" /></div><div id="innercontent"><div id="announce">The Website is in Administration-mode.<br />To edit content, simply klick on an Link in the Mainmenu.<br /><br /><a href="index.php?leaveadmin=1">Klick here to leave Administration mode</a><br /><br /><a href="index.php?link=admin&amp;edit=mainsite">Main Site Configuration</a></div><p class="txt_head1">Main Site Configuration</p><div id="formdiv">	<form action="index.php?link=admin&amp;edit=mainsite" method="post">		<label class="formdiv_label">Choose your Sitedesign</label><br /><br />		<input type="hidden" name="didmainsite" value="1" />		<select style="width: 204px; height: 20px;" name="designpack"><option value="classic">classic</option><option value="modern">modern</option>		</select><br /><br />		<input class="formdiv_button" type="submit" value="save" />	</form></div></div>		</div>
		<br style="clear: both;" />
		<div id="footer">
			<p class="txt_footer">&copy; by Sandra van Vlijmen 2005</p>
		</div>
	</div>
	</body>
</html>

kopiere ich diesen in Dreamweaver, dann wird die Seite auch wieder richtig dargestellt.
 
Also sowas macht man schonmal gar nicht:

Code: 
#announce {
	padding: 5px 5px 5px 5px;
	margin: 5px 5px 5px 5px;
	
	background-color: #FFFFFF;
	border: solid 1px #333333;
	
	font-size: 12px;
	color: #000000;
}

mach das dadraus:

Code: 
#announce {
	padding: 5px;
	margin: 5px;
	
	background-color: #FFFFFF;
	border: 1px solid #333333;
	
	font-size: 12px;
	color: #000000;
}

Vielleicht kam der IE auch einfach nicht mir der border Anagabe klar (war verdreht)!
Aber ich denke nicht das es daran lag!
 
nee, mit den Borderangaben hat das nichts zutun.
Code: 
padding: 5px 5px 5px 5px;
<--- Naja, das mach ich nur, weil immer wieder andere abstände ausprobiere.

Ich habe gerade gemerkt, dass der annound DIV irgendwie auf der "IE"Seite verankert ist, wenn ich hoch und runter scrolle, dann bleibt der Weisse Hintergrund mit dem Rahmen immer an der selben Stelle, ist aber nur sichtbar, wenn sich der im DIV enthaltene Text darüber befindet.... *confused*
 
Wie gesagt, ohne das Posten des kompletten Quelltextest (CSS) kann man dir hier nicht weiterhelfen!
 
Zur veranschaulichung:

Code: 
<body>
	<div id="container">
		<div id="header">
			&nbsp;
		</div>
		<div id="menu">
		</div>
		<div id="content">
			<div id="content_header">
			</div>
			<div id="innercontent">
				<div id="announce">
				</div>
			</div>
		</div>
		<br style="clear: both;" />
		<div id="footer">
		</div>
	</div>
</body>

css

* {font-family: Verdana, Arial, Helvetica, sans-serif;}

#container {height: 100%;}
#container[id] {height: auto;min-height: 100%;}
html {height: 100%;margin: 0px;padding: 0px;}
body {height: 100%;background-color: #ffffff;margin: 0px;padding: 0px;}
#container {position: relative;background-color: #fef0e9; background-image: url(container.png); background-repeat: repeat-y; background-position: left;width: 726px;min-height: 100%;padding: 0px 0px 0px 0px;margin: 0px auto;}
#menu {width: 172px;float: left;position: relative;padding: 10px 6px 0px 6px;margin: 0px auto;}
#content {width: 521px;float: left;	position: relative;padding: 5px 10px 10px 10px;margin: 0px auto 20px auto;}
#header {width: 726px;height: 126px;position: relative;padding: 0px 0px 0px 0px;background-image: url(header.png);}
#footer {width: 726px; height: 19px;position: absolute;padding: 0px 0px 0px 0px;margin: 0px auto;bottom: 0px; background-color: #5976a2;}

#announce {padding: 5px 5px 5px 5px;margin: 5px 5px 5px 5px;background-color: #FFFFFF;border: solid 1px #333333;font-size: 12px;color: #000000;}


- Der DIV #innercontent besitzt keine CSS eigenschaften.

Hat jemand eine Idee, oder weis jemand von Problemen die der IE in bezug auf verschachtelte DIV Container hat?


THX
 
Zuletzt bearbeitet:
Ich bitte um Erklärung für folgendes:

Code: 
#container[id]

Das ist doppelt, eins davon kannst du dir sparen:

Code: 
html {height: 100%;margin: 0px;padding: 0px;}
body {height: 100%;background-color: #ffffff;margin: 0px;padding: 0px;}

Das ist immernoch falsch:
Code: 
#announce {padding: 5px 5px 5px 5px;margin: 5px 5px 5px 5px;background-color: #FFFFFF;border: solid 1px #333333;font-size: 12px;color: #000000;}
 
Wie schon gesagt, sind die padding und margin angaben so: "padding: 5px 5px 5px 5px;" angegeben, weil ich mitten in der gestaltung bin und die abstände zu allen Seiten evtl. noch verändern möchte. So kann ich dort schnell und einfach die Zahlenwerte verändern.
Falsch ist das allerdings trotzdem nicht.

Der HTML Tag ist mit den Height und margin, padding angaben notwendig um die Seite immer in 100%er Höhe anzuzeigen, ausser wenn der Inhalt länger wird. Dazu gehört auch die angabe #container[id] - wird nur von IE interpretiert.

Hier: link
 
1. Ich meine nicht die padding und margin angaben, sondern die nun schon FETT vorgehobenen border Anagben, das muss heißen border: 1px solid #ffffff und nicht border: solid 1px #ffffff

klar?!

2. würde die Angabe zur Höhe auch einmal für den Body reichen, oder nicht? Das heißt das du dir entweder die Anageben im body oder im HTML Tag sparen kannst!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück