✔ Layout und div in passender Höhe

Status
Nicht offen für weitere Antworten.
Hallo,

es klappt jetzt unterm IE7 gut aber im Firefox werden keien Ränder angezeigt. die beien inneren Objekte werden aneinader gklatscht:(. Kannst du nochmal drüber schauen woran das liegen kann?

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>
<title>Test 3.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
* {
	overflow:hidden;
	}


body 
	{
	margin: 0;
	font-family:Arial, Verdana;
	font-size: 13px;
	color:black;
	background-color: #FFFFFF;
	overflow:hidden;
	}


.NavigationFrame {
	position:absolute;
	width:100%; 
	height:30px;
	left:0;
	top:0;
	z-index:1000;
	background-color:#bbbbbb;
	overflow:visible;
	}

.ContentFrame {
	background-color:#cccccc;
	position:absolute;
	width:100%;
	top:30px;
	right: 0px;
	left: 0px;
	bottom:26px;
	}

.FooterFrame {
	position:absolute;
	width:100%;
	height:26px;
	bottom: 0px;
	left: 0;
	background-color:#cccccc;
	background-image:url(includes/templates/standard/images/background_footer.png);
	background-repeat:repeat-x;
	}

.Footertext {
	width:100%;
	height:26px;
	background-image:url(includes/templates/standard/images/footertext.png);
	background-repeat:no-repeat;
	background-position:right;
	bottom:0px;
	left:0px;
	}

/* IE */
* html .ContentFrame 
	{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	}

* html .ListObject {
	width:28.5%;
	position:absolute;
	top:0px;
	right:0px;
	height:100%;
	border-top:26px solid #fff;
	border-bottom:26px solid #fff;
	}

* html .ContentObject {
	position:absolute;
	top:0;
	right:0;
	width:68.5%;
	height:100%;
	border-top:26px solid #fff;
	border-bottom:26px solid #fff;
	}


/* Einzelne Elemente */
.ListObject {
	width:27.5%;
	overflow:auto;
	position:absolute;
	top: 10px;
	right: 0px;
	left: 12px;
	bottom: 10px;
	border: 2px inset;
	padding: 4px 6px 4px 6px;
	background-color:white;
}

.ContentObject {
	width:67.5%;
	overflow:auto;
	position:absolute;
	top:10px;
	right:12px;
	bottom:10px;
	border: 2px outset;
	padding: 4px 6px 4px 6px;
	}



/* Navigation */
ul#Navigation .Logo {
	background-image:url(includes/templates/standard/images/logo.png);
	background-repeat:no-repeat;
	width:130px;
	height:30px;
	}

ul#Navigation .Logo:hover {
	background-color:transparent;
	}

ul#Navigation {
	text-align: center;
	z-index:1000;
	width: 100%;
	margin: 0;
	padding: 0;
	min-height:30px;
	height:30px;
	color:white;
	background-color:#cccccc;
	background-image:url(includes/templates/standard/images/menubackground.png);
	background-repeat:repeat-x;
	}

ul#Navigation li {
	z-index:1000;
	list-style: none;
	float: left;
	display:block;
	position:relative;
	margin:0px;
	padding: 5px 10px 5px 10px;
	overflow:visible;
	cursor:pointer;
	color:white;
	text-align:left;
	}

ul#Navigation li ul {
	z-index:1000;
	margin: 0;
	padding: 0;
	position: absolute;
	display: none;
	width:100%;
	top:26px;
	left:-1px;
	border:1px solid white;
	}

ul#Navigation li ul li {
	z-index:1000;
	float: none;
	display: block;
	margin:0;
	padding: 3px 10px 3px 10px;
	background-color:#E40303;
	cursorointer;
	border-top: 1px solid white;
	}

ul#Navigation li:hover {
	z-index:1000;
	background-color:white;
	color:black;
	}

ul#Navigation li:hover ul {
	z-index:1000;
	display: block;
	}

ul#Navigation a {
	z-index:1000;
	text-decoration: none;
	color: white;
	display:block;
	}

/* Links */
a{
	color:black;
	text-decoration:none;
	}

a:hover {
	text-decoration:underline;
	}




-->
</style>

</head>
<body>
<div class="NavigationFrame" id="NavigationFrame">
	<ul id="Navigation">
		<li class="Logo">
		</li>
		<li onClick="document.location.href='http://www.test.de'">Kasse & Berichte
		  <ul style="width:140px;">
			<li onClick="document.location.href='http://www.test.de'">Startseite</li>
			<li onClick="document.location.href='http://www.test.de'">Kassenliste</li>
			<li onClick="document.location.href='http://www.test.de'">Tagesbericht</li>
			<li onClick="document.location.href='http://www.test.de'">Archiv Tagesbericht</li>
		  </ul>
		</li>
		<li onClick="document.location.href='http://www.test.de'">Mitarbeiter
		  <ul style="width:180px;">
			<li onClick="document.location.href='http://www.test.de'">Arbeitszeit eintragen</li>
			<li onClick="document.location.href='http://www.test.de'">Tages & Wochen&uuml;bersicht</li>
		  </ul>
		</li>
		<li onClick="document.location.href='http://www.test.de'">Kunden
			<ul style="width:200px;">
				<li onClick="document.location.href='http://www.test.de'">Kundenverwaltung</li>
				<li onClick="document.location.href='http://www.test.de'">Kundennewsletter</li>
				<li onClick="document.location.href='http://www.test.de'">Terminverwaltung</li>
				<li onClick="document.location.href='http://www.test.de'">Kundensuche</li>
				<li onClick="document.location.href='http://www.test.de'">Verl&auml;ngerungsf&auml;hige Vertr&auml;ge</li>
				<li onClick="document.location.href='http://www.test.de'">Tarife</li>
				<li onClick="document.location.href='http://www.test.de'">Tarufoptionen</li>
			</ul>
		</li>
		<li onClick="document.location.href='http://www.test.de'">Produkte
		  <ul style="width:140px;">
			<li onClick="document.location.href='http://www.test.de'">Produktverwaltung</li>
		  </ul>
		</li>
		<li onClick="document.location.href='http://www.test.de'">Provision
		  <ul style="width:180px;">
			<li onClick="document.location.href='http://www.test.de'">Provisions&uuml;bersicht</li>
			<li onClick="document.location.href='http://www.test.de'">Mengen&uuml;bersicht</li>
			<li onClick="document.location.href='http://www.test.de'">Mengen&uuml;bersicht Gruppen</li>
			<li onClick="document.location.href='http://www.test.de'">Provisionserfassung</li>
		  </ul>
		</li>

		<li onClick="document.location.href='http://www.test.de'">Provisionseinstellungeen
		  <ul style="width:180px;">
			<li onClick="document.location.href='http://www.test.de'">Provisionstarife</li>
			<li onClick="document.location.href='http://www.test.de'">Provisionsoptionen</li>
			<li onClick="document.location.href='http://www.test.de'">Provisionstarifgruppen</li>
		  </ul>
		</li>
		<li onClick="document.location.href='http://www.test.de'">System
		  <ul style="width:180px;">
			<li onClick="document.location.href='http://www.test.de'">Userverwaltung</li>
			<li onClick="document.location.href='http://www.test.de'">Zugrffsverwaltung</li>
			<li onClick="document.location.href='http://www.test.de'">Merkmale & Filter</li>
			<li onClick="document.location.href='http://www.test.de'">Grundkonfiguration</li>
			<li onClick="document.location.href='http://www.test.de'">Datenbankbackup</li>
			<li onClick="document.location.href='http://www.test.de'">Forum</li>
		  </ul>
		</li>
		<li onClick="document.location.href='http://www.test.de'">Hilfe
		  <ul style="width:160px;">
			<li onClick="document.location.href='http://www.test.de'">Hilfreiche Links</li>
			<li onClick="document.location.href='http://www.test.de'">Zur Test Homepage</li>
			<li onClick="document.location.href='http://www.test.de'">&Uuml;ber Test</li>
		  </ul>
		</li>
		<li onClick="document.location.href='http://www.test.de'">Abmelden
		  <ul style="width:140px;">
			<li onClick="document.location.href='http://www.test.de'">Abmelden / Logout</li>
		  </ul>
		</li>
	</ul>
</div>
<div class="ContentFrame" id="ContentFrame">
	<div class="MainContent" ID="MainContent">
		<div class="ListObject" ID="ListFrame">
			Liste<br />
			Zeile1<br />

			Zeile10<br />
			Zeile11<br />
		</div>
		<div class="ContentObject" ID="ContentFrame">
			Zeile1<br />
			Zeile2<br>

			Zeile4<br />
			Zeile5<br>
			Zeile6<br />
		</div>
	</div>
</div>
<div class="FooterFrame" id="FooterFrame">
	<div class="Footertext" id="Footertext"></div>
</div>
</body>
</html>
 
Bei mir werden die Ränder im FF korrekt angezeigt:

demo_wachteldonk.jpg

Dass die inneren Objekte ab einer gewissen Browserfenstergröße "aneinanderklatschen" liegt an der relativen (prozentualen) Breitenangabe, zu der die absoluten Pixelwerte des Rahmens und Innenabstandes hinzugezählt werden, was eben zu Ungenauigkeiten führt.
 
Komisch, bei mir igoriert er dei Eingaben komplett:( Welchen Firefox benutzt du ? Ich habe heir 2.0

Zu dem anderen Problem. Ich habe die left udn richt Werte auf Prozentwerte ungestellt aber das bringt auch nix. Was kann man da den sonst machen?
 
ok, jetzt gehts hier auch. Anscheined hat der Cache hier etwas rumgesponnen. Ich werde die Überlagerung wohl mit eienr Mindestbreite für das Browserfenster lösen. mal schauen was ich dazu finde.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück