✔ Layer gleiche Höhe im FF bzw IE?

Status
Nicht offen für weitere Antworten.
W

whiterussian

Erfahrenes Mitglied
Hallo.

Was kann ich machen, damit #content im FF genauso hoch wird wie im IE?

PHP: 
<!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>Layer soll gleiche Höhe wie die Liste haben im FF</title>




<style type="text/css">

@charset "utf-8";
/* CSS Document */

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	margin: 0;
	padding: 0;
	background-color: #fff;

}

#header {
	width: 950px;
	height: 185px;
	margin: 0;
	padding: 0;
	}
	
#logo {
	margin-top: -14px !important;
	margin: 0;
	padding: 0;
	background: #ff0;
	width: 475px;
	height: 185px;
	}
	

	
#bildlinks {
	margin: 14px 0 0 20px;
	padding: 0;
	height: 281px;
	width: 380px;
	background: #f0f;
	}
	
#content {
	margin: 20px 0 0 465px;
	padding: 0 0 0 20px;
	width: 465px;
	border-left: 1px solid #88bc37;
	border-right: 1px solid #88bc37;
	background-color: #ccc;
	}
	
#schweiger {
	margin: -30px 0 0 0;
	padding: 0;
	width: 100%;
	background-image: url(../_img/schweigerbg.gif);
	background-repeat: repeat-x;
	background-color: #c30;
	height: 235px;
	}
	
#adresse {
	margin: 90px 0 0 -360px !important;
	margin: 90px 0 0 20px;
	padding: 0;
	float: left;
	width: 360px;
	border-right: 1px solid #fff;
}



ul.left {
	display: inline;
	color: #88bc37;
	margin: 0 !important;
	margin: 0 0 0 25px;
	}

ul.left li {
	width: 180px;
	}

.left {
	float: left;}
	
.right {
	float: right;}
	
.clear {
	clear: both;
	height: 0px;
	font-size: 1px;
	line-height: 0;}
	
.green {
	color: #88bc37;
	}
	
h1 {
	color: #31324;
	font-size: 14px;
	font-weight: bold;
	margin: 5px 5px 5px 10px;
	padding: 0;}
	
/*--------------------------navigation------------------------------------------------*/

a img {
	border: none;}
	
</style>

</head>
<body>
<div id="header">
  <div id="logo" class="left" >&nbsp;</div>
</div>
<br class="clear" />

<div id="bildlinks" class="left">&nbsp;</div>

<div id="content">
<h1>text</h1>

<ul class="left">
<li><a href="#" target="_self" title="#">text</a></li>
<li><a href="#" target="_self" title="#">text</a></li>
<li><a href="#" target="_self" title="#">text</a></li>
<li><a href="#" target="_self" title="#">text</a></li>
<li><a href="#" target="_self" title="#">text</a></li></ul>
<ul class="left">
<li><a href="#" target="_self" title="#">text</a></li>
<li><a href="#" target="_self" title="#">text</a></li>
<li><a href="#" target="_self" title="#">text</a></li>
<li><a href="#" target="_self" title="#">text</a></li>
<li><a href="#" target="_self" title="#">text</a></li></ul>

</div>
<br class="clear" />

<div id="schweiger">

<div id="adresse">
eine Adresse</div>

<br class="clear" />
</div>

</body>
</html>
 
Ich hätt ja gern, dass #content bis zum ende des Textes von der Liste geht.

Im Fall mit der .clearfix Klasse bzw. dem Verschieben von <br class="clear" /> geht das Gute Ding aber bis zum roten runter.

Wenn keine Liste drinnen steht, sondern nur Text, funktioniert das...
 
Zuletzt bearbeitet:
Das liegt aber nicht an der clear-Eigenschaft, oder den Listenelementen, sondern vielmehr an deinem Seitenkonzept, denn die Höhe orientiert sich seltsamerweise am benachbarten DIV #bildlinks.

Einfach mal dessen Höhe verringern, und schauen, was mit der Höhe des DIVs #content geschieht.
 
An und für sich liegt da drinnen ein Bild mit Höhe und Breite des #bildlinks. (Auch auf allen Unterseiten.) Deswegen schauts mit Höhe verringern schlecht aus.
 
Du sollst auch nur im FF testweise schauen, was mit der Höhe von #content geschieht, wenn die Höhe von #bildlinks verringert oder erhöht wird.
 
Im FF verlängert sich der content mit bzw. verkürzter sich mit, bis der Text der Liste beginnt. Aber das bringt mich leider der Lösung nicht näher.
 
Hab jetzt dem content auch die .left zugewiesen und die margin - eigenschaften zwischen IE und FF ausgeglichen. Basst soweit.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück