Ich verstehe es nicht...


Status
Nicht offen für weitere Antworten.

MsvP@habdichliebhasi

Erfahrenes Mitglied
Ich kann es langsam einfach nicht mehr nachvollziehen.
Ich bekomme zur Zeit gerade eine Kriese bezüglich DIV gestalten.

Ich habe eine wirklich komplexe Seite jetzt fertig gebaut. Die hat viele Grafiken und ein recht umfangreiches Design.
Vor einigen Monaten hätte ich das Ganze schön auseinander geschnibbelt und in Tabellen gepappt und gut wärs gewesen.
Da der anhaltende DIV Wahn mich aber zu der Überzeugung brachte, dass es womöglich doch an der Zeit wäre endlich mit Tabellen abzuschließen, habe ich mich daran gesetzt und die Seite mittels CSS aufgebaut.

Jetzt zu meinem Problem, an dem ich langsam zu verzweifeln drohe.

Im Firefox... wunderbar, richtig schön, schaut man sich gerne an.
Im IE 7, schon etwas sonderbar, irgendwie wird der Content Teil, zwischen den Beiden Spalten Links und Rechts, zu hoch angezeigt, aber warum?
Und der Hammer kommt dann im IE 6, dort wird der mittlere Content Teil einfach einmal ans Ende der Seite gepackt und ignoriert, dass er eigentlich zwischen die beiden Spalten gehört.

Ich verstehe nicht wie unterschiedlich Befehle in CSS ausgelegt werden können von den Browsern. Und ich weiß beim Besten Willen nicht, wie ich diese Fehler ausgleichen soll. Ich kann doch nicht für jeden Browser eine eigene Seite bauen? :-(

Liebe Grüße
Micha
 
Zuletzt bearbeitet:
M

Maik

Hi,

deiner Beschreibung zufolge handelt es sich hierbei wohl um ein floatendes Layout.

Vielleicht kannst du ja aus meinem CSS-Tutorial Zentriertes Layout mit drei Spalten deine Erkenntnisse ziehen, weshalb beispielsweise im IE6 die mittlere Spalte nach unten umbricht, und sich an das Ende einer der beiden äußeren Spalten hängt? Stichwort: Reihenfolge der drei DIVs im HTML-Code.

Falls nicht, solltest du den Link zu deiner Seite nennen, oder hier den Quellcode posten, damit man der Ursache auf den Grund gehen, und dir so einen konkreten Tipp geben kann, woran es hängt.
 

MsvP@habdichliebhasi

Erfahrenes Mitglied
Hi, vielen Dank für die schnelle Antwort.

Mein Problem ist, dass ich die Seite leider nicht posten kann, da es sich um eine Kunden Webseite handelt, der nicht möchte, dass die Seite vor Vollendung sichtbar ist.

Aber zumindest habe ich hier die vier CSS Schnibsel, die für die Aufteilung der drei Spalten verantwortlich sind. Wie es aussieht, liegt ein Problem mit der Breite vor. Wenn ich dem Container DIV, die Breite lösche, dann stehen alle drei DIVs nebeneinander, aber mit einem gewaltigen Abstand zwischen dem mittleren Contant und der rechten Spalte.

HTML:
.container {
	background-color: #d8dde2;
 	margin: 0;
	width: 902px;
}

.left {
   float: left;
   width: 172px;
   margin: 0;
   padding: 0;
   background-color: #d8dde2;
}

.content {
   background-color: #ffffff;
   margin:0 0 0 172px;
   width:532px;
   min-height:1100px;
}

.right {
   float: right;
   width: 196px;
   padding: 0;
   margin: 0;
}


von der Anordnung her sollte es aber stimmen. Die stehen folgendermaßen in der HTML Datei:

HTML:
  <div class='container'>
    
        <div class='left'></div>
        <div class='right'></div>
        <div class='content'></div>

  </div>


EDIT: Anscheinend verdrängt tatsächlich, die rechte Spalte die mittlere im IE6. Im Firefox legt sie sich einfach nur über den Content Bereich, wenn ich das Fenster zu schiebe. (Wenn ich dem Container die feste Breite wegnehme, kann ich das Browserfenster zuschieben und dann rutscht das rechte Menü mit.)


Liebe Grüße
Micha
 
Zuletzt bearbeitet:
M

Maik

Versuch es mal so:

Code:
.content {
   background-color: #ffffff;
   margin:0 196px 0 172px;
   /*width:532px;*/ /* auskommentiert = deaktiviert */
   min-height:1100px;
}
 

MsvP@habdichliebhasi

Erfahrenes Mitglied
Das hat schoneinmal einwenig geholfen. Zumindest wird der Content Teil jetzt nicht mehr komplett nach unten geschoben.

Die Headgrafik im Contentteil bleibt nun oben, aber der Text fliegt weiterhin nach unten. Dieser steht allerdings erneut in einem DIV, der den Abstand zu den beiden Spalten, links und rechts, beinhaltet. Und genau, dass scheint dem IE wiedereinmal nicht zu schmecken.
Wenn ich das padding rausnehme, rutscht der Inhalt auch nach oben, aber klebt dann am Rand fest.

HTML:
.inhalt{
padding:20px;
text-align: justify;
}
 
M

Maik

Bin mir jetzt nicht sicher, ob's was hilft?

Code:
.inhalt{
padding:20px !important;
padding:20px 10px 20px 10px;
text-align: justify;
}
Ansonsten poste bitte mal den vollständigen Quellcode der Seite.
 

MsvP@habdichliebhasi

Erfahrenes Mitglied
Krass. Das hat echt geholfen? Und woran lag das jetzt? Mag er es nicht, wenn ich sage er soll komplett padding machen?

Edit: Ein Problem hätte ich aber leider noch. Und zwar wird meine Headlinegrafik im Firefox höher als im IE angezeigt:

HTML:
.contentbild {
  background: url(../_img/contentbild.jpg);
  height:158px;
}

Das muss aber gleich hoch angezeigt werden, da es mit der Spalte links zusammen abschließt.
 
Zuletzt bearbeitet:
M

Maik

Der IE hat die schlechte Angewohnheit, bei floatenden Boxen die horizontalen margin- oder padding-Werte zu verdoppeln.

Zu dem Problem mit der Grafikhöhe kann ich derzeit nichts sagen, da mir der vollständige Quellcode und die Grafik fehlt, um mir das im Firefox genauer anzuschauen.
 

MsvP@habdichliebhasi

Erfahrenes Mitglied
Ich habe gerade festgestellt, dass es garnicht das Contentbild ist, dass anders dargestellt wird. Sondern das Menü in der linken Spalte, dadurch verschiebt sich der Abschluss in der linken Spalte.

Ich habe dort ein Listenmenü, das aus Bildern besteht:

HTML:
.hauptmenue {
	background-color:#a3b0ba;
 }

ul.hauptmenue, .hauptmenue ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

li.hauptmenue, .hauptmenue li {
	display: table;
	padding:0;
	line-height:0;
}

a.hauptmenue, .hauptmenue a {
	font-family: Verdana,Arial,SunSans-Regular,Sans-Serif; font-size: 3.0mm; font-weight: bold; color: #ffffff; line-height: 16px; 
	text-decoration: none;
}

a.hauptmenue_aktiv, .hauptmenue_aktiv a {
	font-size: 3.0mm;
	font-weight: bold;
}

Die Einbindung des Menüs in die Seite wäre wie folgt:

HTML:
 <div id="hauptmenue">
	<ul class="hauptmenue">
		<li><a href="LINK" class="a_hauptmenue"><img src='GRAFIK' border='0'></a></li>
		<li><a href="LINK" class="a_hauptmenue"><img src='GRAFIK' border='0'></a></li>
		<li><a href="LINK" class="a_hauptmenue"><img src='GRAFIK' border='0'></a></li>
	</ul>
 </div>

Anscheinend haut der IE zwischen die einzelnen Listenpunkte einen kleinen Abstand. Dadurch passt es nicht mehr.
 
M

Maik

Setz mal hinter dem Stylesheet im Dokumentheader folgenden "Conditional Comment" für den IE ein:

Code:
<!--[if lte IE 7]>
<style type="text/css">
.hauptmenue li { float:left; }
.hauptmenue a img { display:block; }
</style>
<![endif]-->
 
Status
Nicht offen für weitere Antworten.