Supportnet Computer
Planet of Tech

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

Antwort 4 von otimac

hai,
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

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 :
 <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

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

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?


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

Antwort 11 von derpfleger

Yep, ich nochmal:

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

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: