Unterschiede IE, FF - simples Beispiel mit DIVs

Krischu · #1 (**permalink**) 17.08.2006, 12:59

Es ist zum Verzweifeln. Ich versuche eine relativ simple Anordnung, die ich zuvor mit einer TABLE realisiert hatte, nun mit DIVs zu machen und ich kriege es nicht hin. Bitte hilf mir mal einer.

http://people.freenet.de/paulka/stab.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>Float Test Page</title>
<style type="text/css">
.text {  font-family:Lucida,sans-serif;
         font-size: 120x;
         font-style:normal;
         z-index:0;
         color:#bb6644;
      }
.containingbox
                {
                        width : 100% ;
                        height: 89px ;
                        border: 1px solid #f00;
/*                      background-image:url(kachel.gif);*/
                }


.floatleft
                {
                        border:1px solid blue;
                        float: left; clear : right;
                }
.floatright
                {
                        border:1px solid green;float: right; clear : left;
                }
</style>
</head>
<body>
<div class="containingbox">
   <img class="floatright" src="logo2.gif" alt=""/>
   <img class="floatleft" style="position:fixed" src="bild132x62.jpg" alt=""/>
</div>

<div class="containingbox">
   <img class="floatleft" style="position:fixed" src="bild132x62.jpg" alt=""/>
   <img class="floatright" src="logo2.gif"/>
</div>
</body>
</html>

Weiß jemand Rat?

nick · #2 (**permalink**) 18.08.2006, 14:14

Ich habe das Problem auch und find keinen Rat, schon seid langem.
Die einzige Möglichkeit wäre, wenn man endlich mal den IE verbietet
oder wenn das Microsoft Update mal was für ihren IE hat!!!
beispielweise korrektes css...

Allein weil die Pseudoklasse :fokus nicht für input funktioniert
bringt mich zum ausrasten, hauptsache ihre blinkenden
Skrollbalnen hass hass hass >.<"

Krischu · #3 (**permalink**) 18.08.2006, 15:40

Zitat:

Zitat von nick

Ich habe das Problem auch und find keinen Rat, schon seid langem.
Die einzige Möglichkeit wäre, wenn man endlich mal den IE verbietet
oder wenn das Microsoft Update mal was für ihren IE hat!!!
beispielweise korrektes css...

Allein weil die Pseudoklasse :fokus nicht für input funktioniert
bringt mich zum ausrasten, hauptsache ihre blinkenden
Skrollbalnen hass hass hass >.<"

Danke, daß Du als einziger in 24h ein Followup geschrieben hast, wenn es mir zwar auch nicht weiterhilft, aber wenigstens ein weiterer Beweis dafür ist, daß TABLEs zum Layouten zwar seit längerem verpönt sind, aber wohl immer noch das einzige Mittel, mit dem man in halbwegs vertretbarer Zeit ein browserübergreifendes Ergebnis erzielen kann.

Nun bin ich zwar gerade aus dem Grund hier in dieses Forum eingetreten, weil ich von den TABLEs loskommen wollte, aber ich sehe, daß CSS-Layouting unendlich viel komplizierter ist als traditionelle HTML tags.

Ich weiß nicht, warum keiner der Experten bisher mein Beispiel wenigstens auch nur kommentiert hat, geschweige denn, einen Lösungsweg aufgezeigt hat, oder mich vielleicht darauf hingewiesen hat, daß ich in meinem Beispiel einen Fehler habe.

Ist das zu einfach oder ist das zu schwer oder zu einfach nur zu langweilig?

duessu · #4 (**permalink**) 18.08.2006, 15:52

Habs in beiden Browsern angeschaut und sehe keine Unterschiede...

Bitte besserer Fehlerbeschrieb...

[EDIT]

Hab nochmals drübergeschaut
Du musst .containingbox ein min-width geben. Sonst fallen die beiden Bilder aufeinander und das eine verschwindet.

Krischu · #5 (**permalink**) 18.08.2006, 16:46

Zitat:

Zitat von duessu

Habs in beiden Browsern angeschaut und sehe keine Unterschiede...

Bitte besserer Fehlerbeschrieb...

[EDIT]

Hab nochmals drübergeschaut
Du musst .containingbox ein min-width geben. Sonst fallen die beiden Bilder aufeinander und das eine verschwindet.

Nein, Du hast mein Problem noch nicht richtig verstanden. Vielleicht habe ich mich aber auch noch nicht deutlich genug ausgedrückt und es wird jetzt deutlicher.

Bei min-width für .containingbox sehe ich keinen Effekt.
Hier noch mal genau, was ich erreichen will:

Der DIV-Container (.containingbox) hat eine feste Höhe. Dahinein soll links oben ein Bild, rechts oben ein Bild.
Der Zwischenraum soll sich gummiartig ausdehnen. Wenn ich den Browser in der Breite verkleinere, sollen
die beiden Bilder irgendwann aneinanderstoßen, sich dann aber nicht überlappen.

Es kommt später noch eine Navigation aus einzelnen, aneinandergereihten GIFs in den Zwischenraum, linksbündig an "bild" links. Dann soll das rechte "logo" ebenfalls dort stoppen.

Eigentlich zeigt mir MSIE 6 hier das Verhalten, was ich wünsche und ich kriege es mit FF nicht hin.

E|H · #6 (**permalink**) 18.08.2006, 18:00

Zitat:

Zitat von Krischu

Danke, daß Du als einziger in 24h ein Followup geschrieben hast, wenn es mir zwar auch nicht weiterhilft, aber wenigstens ein weiterer Beweis dafür ist, daß TABLEs zum Layouten zwar seit längerem verpönt sind, aber wohl immer noch das einzige Mittel, mit dem man in halbwegs vertretbarer Zeit ein browserübergreifendes Ergebnis erzielen kann.

Niemand hier ist dazu verpflichtet, zu antworten. Man hat schließlich auch etwas anderes zu tun. Also vielleicht etwas mehr Geduld.

Zitat:

Zitat von Krischu

Nun bin ich zwar gerade aus dem Grund hier in dieses Forum eingetreten, weil ich von den TABLEs loskommen wollte, aber ich sehe, daß CSS-Layouting unendlich viel komplizierter ist als traditionelle HTML tags.

Wenn ich sowas schon lese. „CSS-Layouting“ ist nicht unendlich viel komplizierter als „traditionelle HTML tags“. Und um es auf den Punkt zu bringen: CSS-Layout ist nicht das Gegenteil von Tabellenlayout.

Ohne Layouttabellen erreiche ich meine Ziele viel schneller als mit. Layouttabellen sind nicht verpönt, sondern schlichtweg falsch und schlecht.

Zitat:

Ich weiß nicht, warum keiner der Experten bisher mein Beispiel wenigstens auch nur kommentiert hat, geschweige denn, einen Lösungsweg aufgezeigt hat, oder mich vielleicht darauf hingewiesen hat, daß ich in meinem Beispiel einen Fehler habe.

Ist das zu einfach oder ist das zu schwer oder zu einfach nur zu langweilig?

Man muß seinen Frust ja nicht gleich an anderen auslassen. Deine Fragestellung hätte schon etwas konkreter (und für meinen Geschmack weniger fordernd) ausfallen können. Du wirst ja wohl nicht erwarten, daß man weiß, was gemeint ist, wenn man sich nur den Quelltext ansieht. Außerdem stimmt die Beschreibung bei deinem Float-Test irgendwie überhaupt nicht.

Die abgelassenen Sprüche zeigen schon irgendwie, daß sich da jemand noch nicht sehr viel mit den Grundlagen beschäftigt hat.

Die ersten beiden Beiträge in diesem Thread passen nicht sonderlich in das sonstige Niveau dieses Forums, finde ich. :focus ist außerdem noch eines der geringeren Probleme des IE.

Nachtrag: Wenn der IE es so anzeigt, wie du willst, der FF aber nicht, dann wirst du in aller Regel den Fehler bei dir suchen müssen. Das beschriebene Problem hättest du aber gar nicht erst, wenn du die Seite etwas semantischer aufbauen würdest.

Noch ein Nachtrag: Sehe ich das richtig, daß du float:left mit position:fixed überschreibst? Dann brauchst du dich nicht zu wundern.

Dritter Nachtrag: Im IE siehst du mit min-width für das div sicher keinen Effekt. Im FF sollte das funktionieren. Trotzdem eine ziemlich unsaubere Lösung.

heiko_rs · #7 (**permalink**) 18.08.2006, 18:13

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Float Test Page</title>

<style type="text/css">

.containingbox {
	height: 89px;
	border: 1px solid #f00;
	padding-left: 135px;
	}
		
.left {
	border: 1px solid blue;
	float: left;
	margin-left: -135px;
	}

* html .left {
	position: absolute;
	}

.right {
	border: 1px solid green;
	display: block;
	margin: 0 0 0 auto;
	}

</style>

</head>

<body>

	<div class="containingbox">
		<img class="left" src="bild132x62.gif" alt="Bild">
		<img class="right" src="logo2.gif" alt="Logo">
	</div>

</body>

</html>

E|H · #8 (**permalink**) 18.08.2006, 18:20

Das hätte ich jetzt nicht gemacht. Vor allem hätte ich nicht die ganzen anderen Fehler mitkopiert. Aber naja …

heiko_rs · #9 (**permalink**) 18.08.2006, 18:22

Ich hatte keine Lust, auch noch die Fehler zu korrigieren, aber zumindest mal ein Lösungsprinzip zu geben.

heiko_rs · #10 (**permalink**) 18.08.2006, 18:29

P.S.: Im CSS (und darum ging's mir) sind keine Fehler, das hat alles seinen Sinn

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Shape zwischen zwei Divs	Tiuz	CSS	1	12.06.2014 15:25
Höhenanpassung von divs	localex	CSS	1	21.11.2007 11:25
Divs nebeneinander, aber mittig	RomanM	CSS	2	24.10.2007 06:32
div bereich nach anderen divs ausrichten	pixel	CSS	0	03.02.2007 23:49
Browser-Problem bei Positionierung von DIVs	mickropixel	CSS	3	20.09.2004 16:25