Supportnet / Forum / Webseiten/HTML
CSS: Probleme beim floaten im IE6.0
Frage
Hi Leute
ich habe mir ein sehr seltsames Problem gebastelt, dessen Ursache ich einfach nicht erkennen kann:
In einem verschachtelten div-Bereich (abgerundete Ecken) lege ich in den innersten div meinen Content. Das sollen zwei Bilder sein, die jeweils rechts oder links von Schrift umflossen werden sollen (nachzuschauen hier: [url]http://www.ipstat.de/fliewatuetest08/referenzen/referenzen.htm[/url] ).
Problem:
1. Auf dieser Unterseite ("Referenzen") wird die Überschrift im IE nicht angezeigt, auf allen anderen Unterseiten jedoch schon. Klickt man allerdings doppelt in den Bereich der Überschrift, erscheint sie doch noch.
2.Der abgerundete Bereich unten wird vom IE zunächst dargestellt, scrollt man jedoch, kann man mit dem unteren Bildschirmrand die abgerundeten Bereiche des grau hinterlegten Teils "abschneiden". Schiebt man den senkrechten Scrollbalken mit gehaltener Maustaste hoch und runter kommt ab und zu wieder ein bischen mehr oder weniger von den abgerundeten Bereichen wieder zum Vorschein.
3. Mehr oder weniger zufällig (ich erkenne zumindest kein System) wird der Text neben dem oberen Bild am unteren Rand des Absatzes ein Stück weit abgschnitten.
Alles in allem sehr, sehr seltsam. Die Probleme tauchen nur beim Internet Explorer auf, Firefox und Opera stellen alles so dar, wie es soll.
Hat jemand eine Idee?
Danke und Gruss Heiko
Antwort 1 von derpfleger
Der CSS-Teil:
body {
background-image:url(verlauf03d.jpg);
background-repeat:repeat-x;
margin: 0px 0px 0px 0px;
}
#logooben {
position:absolute;
top:0px;
left:0px;
width:100%;
height:90px;
background-image:url(logooben08.jpg);
background-repeat:repeat-x;
}
#navigation {
width:800px;
position:absolute;
top:120px;
left:50%;
margin-left:-400px;
}
#navigation ul{
margin: 5px;
padding: 5px;
list-style-type: none;
text-align: center;
}
#navigation ul li {
display: inline;
}
a img {
margin-right:20px;
margin-bottom:10px;
}
a.menu:link, a.menu:visited {
text-decoration: none;
border-top:2px solid #FF6666;
border-left:2px solid #FF6666;
border-bottom:2px solid #990000;
border-right:2px solid #990000;
padding:5px;
margin:2px;
font-family: Verdana;
color: #FFFFFF;
font-weight: bold;
background-color: #990033;
font-size:.8em;
}
a.menu:hover, a.menu:active {
text-decoration: none;
border-top:2px solid #990000;
border-left:2px solid #990000;
border-bottom:2px solid #FF6666;
border-right:2px solid #FF6666;
padding:5px;
margin:2px;
font-family: Verdana;
color: #000000;
/* background-color: #FFCC99; */
background-color: #D1CFD0;
font-size:.8em;
}
/**** Contentblock ***/
#contentblock {
position:absolute;
top:180px;
left:50%;
margin-left:-400px;
width:800px;
}
#contentblockindexdatei {
position:absolute;
top:100px;
left:50%;
margin-left:-400px;
width:800px;
}
.ro { margin:0;
background:url(roundedbox_ro.gif) top right no-repeat;
}
.lo { margin:0;
background:url(roundedbox_lo.gif) top left no-repeat;
}
.ru { margin:0;
background:url(roundedbox_ru.gif) bottom right no-repeat;
}
.lu { margin:0;
background:url(roundedbox_lu.gif) bottom left no-repeat;
}
.inhalt {
margin:0;
padding:2.5em 2.5em 3.5em 2.5em;
}
.inhalt p {
margin:0;
padding:0;
}
h1 {
font-size:1.7em;
font-family:Verdana;
font-weight:bold;
font-style:italic;
color:#000000;
text-align:center;
text-decoration:underline;
margin-left:-10px;
}
h2 {
font-size:1.5em;
font-family:Verdana;
font-weight:bold;
font-style:italic;
color:#000000;
text-align:center;
text-decoration:underline;
margin-left:-10px;
}
.stern {color:#FF0000;}
li.zeilenabstand {
padding-top:5px;
padding-bottom:5px;
font-size:1.0em;
font-family:Verdana;
font-weight:bold;
}
li.fontkleiner {
font-size:.9em;
font-size:1.0em;
font-family:Verdana;
}
p.mail1 {
font-size:.8em;
font-family:Verdana;
text-align:center;
}
p.mittig {
font-size:.8em;
font-family:Verdana;
text-align:center;
}
p.links {
font-size:.8em;
font-family:Verdana;
text-align:left;
}
.linksausgerichtet {
float:left;
}
.rechtsausgerichtet {
float:right;
}
p.linie { border-top:1px solid #000000; padding-top:30px; }
#content div {clear:both}
.blumenposition {
position:absolute;
top:110px;
left:50%;
margin-left:290px;
z-index:10;
}
Antwort 2 von TerryB
Schau Dir nochmal Deinen Code genau an in der Zeile:40 Spalte:8 steht ein Komma wieso????
Antwort 3 von derpfleger
Gutes Auge TerryB.
Für die ganze Problematik ist allerdings nicht das Komma verantwortlich, der upload mit kommabereinigtem Code ist jetzt online, die Phänomene im IE bestehen nach wie vor.
Da alle Phänomene ausschliesslich in der Unterseite mit den float-divs bestehen, gehe ich weiterhin davon aus, dass dort die Ursache liegt, nur wo genau?
Gruss Heiko
Für die ganze Problematik ist allerdings nicht das Komma verantwortlich, der upload mit kommabereinigtem Code ist jetzt online, die Phänomene im IE bestehen nach wie vor.
Da alle Phänomene ausschliesslich in der Unterseite mit den float-divs bestehen, gehe ich weiterhin davon aus, dass dort die Ursache liegt, nur wo genau?
Gruss Heiko
Antwort 4 von otimac
hai,
nimm doch mal die ganzen divs aus dem inhalt und probiere unteres
cu
nimm doch mal die ganzen divs aus dem inhalt und probiere unteres
<div id="contentblock">
<div class="ro">
<div class="lo">
<div class="ru">
<div class="lu">
<div class="inhalt">
<h1>Referenzen</h1>
<hr /><!-- nur fuer test eingebaut -->
<hr />
<a href="002gross.jpg" class="rechtsausgerichtet"><img src="002klein.jpg" width="300" height="208" border="0" alt="" /></a>
<p >Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
</p>
<br clear="all" /><!-- beendet float-->
<hr />
<a href="001gross.jpg" class="linksausgerichtet"><img src="001klein.jpg" width="213" height="300" border="0" alt=""></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
</p>
<br clear="all" /><!-- beendet float-->
<br /><!-- macht rahmen auf-->
</div>
</div>
</div>
</div>
</div>
</div> <!-- Ende div contentblock -->
</body>
</html>
cu
Antwort 5 von otimac
nachtrag
bei xhtml musst du auch das hr tag beenden <hr />
cu
bei xhtml musst du auch das hr tag beenden <hr />
cu
Antwort 6 von derpfleger
@ otimac:
Spitzenmässig, mit deinem div-losen Code funktioniert alles.
Vielen Dank.
Ist es denn aber grundsätzlich falsch, einen float innerhalb eines div mit dem nächsteröffneten div zu beenden, also im nachfolgenden div :
zu schreiben?
Schliesslich funzt das alles ja nur im IE nicht richtig.
Ist ja wirklich immer wieder anstrengend, die unterschiedlichen Browser-Macken zu behandeln...
Vielen Dank erst mal,
Gruss Heiko
Spitzenmässig, mit deinem div-losen Code funktioniert alles.
Vielen Dank.
Ist es denn aber grundsätzlich falsch, einen float innerhalb eines div mit dem nächsteröffneten div zu beenden, also im nachfolgenden div :
<div style="clear:both;">...</div>
zu schreiben?
Schliesslich funzt das alles ja nur im IE nicht richtig.
Ist ja wirklich immer wieder anstrengend, die unterschiedlichen Browser-Macken zu behandeln...
Vielen Dank erst mal,
Gruss Heiko
Antwort 7 von derpfleger
Ich nochmal:
nun funzt doch noch nicht alles:
Es geht immer noch um folgende Seite:
http://www.ipstat.de/fliewatuetest08/referenzen/referenzen.htm
und immer noch um Darstellungsprobleme mit dem Internet Explorer (6.0).
Der Text, der seitlich von den Bildern floaten soll wird immer irgendwie abgeschnitten.
Woran könnte das liegen?
Danke und Gruss Heiko
nun funzt doch noch nicht alles:
Es geht immer noch um folgende Seite:
http://www.ipstat.de/fliewatuetest08/referenzen/referenzen.htm
und immer noch um Darstellungsprobleme mit dem Internet Explorer (6.0).
Der Text, der seitlich von den Bildern floaten soll wird immer irgendwie abgeschnitten.
Woran könnte das liegen?
Danke und Gruss Heiko
Antwort 8 von derpfleger.
Ich schon wieder, jetzt allerdings gerade von der Arbeit aus:
An der Leerstelle im einleitenden <p> des betreffenden gefloateten Textes liegts nicht. Die Leerstelle ist online noch zu sehen, zuhause hatte ich allerdings diesen Fehler bereits verbessert, nur vergessen, ihn online auch abzuändern. Auch mit korrigierter Fassung war zuhause der Fehler noch vorhanden.
Hier auf der Arbeit am Rechner (auch IE6.0) fehlt auch wieder die Überschrift und erscheint erst, wenn ich den Bereich scrolle oder doppelklicke. Dasselbe ist mit den fehlenden Textteilen, nach Doppelklick erscheint der Text.
Seeehr seltsam das Ganze.
Also: CSS-Cracks, irgendjemand ne Idee???
Danke und Gruss
Heiko
An der Leerstelle im einleitenden <p> des betreffenden gefloateten Textes liegts nicht. Die Leerstelle ist online noch zu sehen, zuhause hatte ich allerdings diesen Fehler bereits verbessert, nur vergessen, ihn online auch abzuändern. Auch mit korrigierter Fassung war zuhause der Fehler noch vorhanden.
Hier auf der Arbeit am Rechner (auch IE6.0) fehlt auch wieder die Überschrift und erscheint erst, wenn ich den Bereich scrolle oder doppelklicke. Dasselbe ist mit den fehlenden Textteilen, nach Doppelklick erscheint der Text.
Seeehr seltsam das Ganze.
Also: CSS-Cracks, irgendjemand ne Idee???
Danke und Gruss
Heiko
Antwort 9 von MoRe99
Zitat:
Ist es denn aber grundsätzlich falsch, einen float innerhalb eines div mit dem nächsteröffneten div zu beenden, also im nachfolgenden div :
<div style="clear:both;">...</div>
zu schreiben?
Ist es denn aber grundsätzlich falsch, einen float innerhalb eines div mit dem nächsteröffneten div zu beenden, also im nachfolgenden div :
<div style="clear:both;">...</div>
zu schreiben?
Vielleicht hilft dir das hier weiter: Float: Die Theorie
Ganz unten in dem Artikel gibt´s dann einen Absatz zum Thema "clear".
Antwort 10 von derpfleger.
@ MoRe99:
Bin gerade noch auf der Arbeit, danke erst mal für den link, werde ich mal in Ruhe durchlesen, wenn ich zuhause bin.
Gruss Heiko
Bin gerade noch auf der Arbeit, danke erst mal für den link, werde ich mal in Ruhe durchlesen, wenn ich zuhause bin.
Gruss Heiko
Antwort 11 von derpfleger
Yep, ich nochmal:
der Fehler lag anscheinend in dieser CSS-Angabe:
Nach Löschen dieser Angabe funzt es jetzt .
Da sieht man mal wieder wo es hinführt, wenn man einfach Code von anderer Stelle (hier: aus Selfhtml) in seine Seite integriert.
Aber egal, aus jedem Fehler lernt man.....
Danke und Gruss
Heiko
der Fehler lag anscheinend in dieser CSS-Angabe:
.inhalt p {
margin:0;
padding:0;
}
Nach Löschen dieser Angabe funzt es jetzt .
Da sieht man mal wieder wo es hinführt, wenn man einfach Code von anderer Stelle (hier: aus Selfhtml) in seine Seite integriert.
Aber egal, aus jedem Fehler lernt man.....
Danke und Gruss
Heiko