✔ IE Div Overflow Clip Scrollbar problem

Status
Nicht offen für weitere Antworten.
S

socke999

Erfahrenes Mitglied
Hi zusammen:

Ich bastle mir da so in JavaScript und CSS ein Bildergalerieskript...

Und zwar hab ich da so ein Seitenweises anzeigen der Thumbnails:
das wird dann mit Javascript gemeistert das die jeweilige Seite angezeigt wird.
gemacht hab ich das so:
CSS:
Code: 
.ThumbPage
{
	text-align:center;
	width:400px;
	overflow:hidden;
}

#PagingBorder
{
	height:170px;
	width:400px;
	overflow:hidden;
}

#PageContainer
{
	/* FALLS WIDTH angegeben wird, muss sie mehr als die Page.width * Anzahl seiten sein */

    clip:rect(0px 400px 170px 0px);
	position:absolute;
 
}

#PageClear
{
	clear:both;
        font-size:0;
	line-height:0;
	height:0;
	margin:0;
	padding:0;
}

.Page
{
	width:400px;
	height:170px;
	float:left; 
	text-align:center;
	
}

in html sieht das dann eigentlich nur mehr so aus:
HTML: 
 <div class="ThumbPage" align="center"> <!-- würde eigntlich gar nicht benötigt -->
<div id="PagingBorder">
    <div id="PageContainer">    
            <div id="Page1" class="Page"> Inhalt Seite 1</div> 
            <div id="Page2" class="Page"> Inhalt Seite 2</div>
            <div id="PageClear"></div>
    </div>
</div>
</div>

Wos jetzt noch hackt ist der Internet Explorer :mad:
Also im Firefox, Opera, Chrome, Safari, die zeigen mir alle die selbe und korrekte darstellung an.
Hier mal ein Beispiel:
Beispielseite

Das problem im IE wie man sehen kann ist Folgendes:
für #PageContainer wird die width für 2 Page Breiten hergenommen, obwohl mit clip nur die width von 1er Page dargestellt werden sollte.
Daher ergibt sich auch das horizontale Scrollbars im IE möglich sind (bei mir zumindest, kommt aber auf die Bildschirmauflösung an)
und anhand dieser #PageContainer width wird auch das ganze zwar zentriert, aber eben anhand der zu großen Breite ist das nicht mehr so wie es eigentlich sein sollte (am Besten die Beispielseite im IE angucken)

Meine frage, weiß da jemand weiter? Bzw. wie man das im IE abstellen kann?

weiter Frage:
ist so etwas "schöner HTML stil":
HTML: 
<div>
        <span id="Previous" onclick="javascript:previousPage();" style="float:left;">prev</span>
        <span id="Next" onclick="javascript:nextPage();" style="float:right;">next</span>
</div>
Also, dass man das onclick auf span oder div anwendet?
Ich will da kein <a> machen, da man ja bei <a> das href angeben muss, und ich nicht will das sich die Bildschirmdarstellung irgendwo hinbewegt (also auch nicht href="#")

Wer sonst noch fehler bzw. verbesserungsvorschläge hat bitte sagen, bin für alles offen =)
 
Hi,

der IE6 verdoppelt nicht die Breite von #PageContainer, diese Box besitzt nämlich überhaupt keine width-Deklaration, sondern stellt ungeachtet aller anderen vorgenommenen Breitenangaben und der Begrenzung des Anzeigebereichs mittels clip das erste Bild (http://creaplan.com/modules/images/Galerie/gal1/AmFelstor.jpg) weiterhin in seiner tatsächlichen Auflösung (1280*856) dar.

Der IE7 hingegen skaliert die Bilddatei, wie die übrigen Browsern, herunter.

mfg Maik
 
Bei IE 6 hast du recht, da wird komischerweiße das große Bild nicht skaliert.

ABER:
im IE 7 wird das bild richtig skaliert und ich glaube nich das es am großen Bild liegt, denn auch wenn ich das große Bild weglasse hab ich das selbe problem.

Also das Problem betrifft ja nur das unter dem großen Bild, also dieses Seitenweise, das es im IE nicht zentriert wird.

Ich glaube ich kann das problem eingrenzen:
Meiner Ansicht nach macht dem Internet Explorer das position:absolute; und overflow:hidden probleme:

zum beispiel:
So funktionierts noch im IE: der rest von #innen.width wird nicht angezeigt.
HTML: 
<div id="ausen" style="width:100px; height:100px; overflow:hidden; border:1px #F00">
	<div id="inner" style="width:3000px; height:100px; background-color:#06F"></div>
</div>

wenn ich aber nun zu innen das position hinzufüge:
HTML: 
<div id="ausen" style="width:100px; height:100px; overflow:hidden; border:1px #F00;">
	<div id="inner" style="width:3000px; height:100px; background-color:#06F; position:absolute;"></div>
</div>
Dann kann der IE nicht mehr den overflow verstecken, das heißt, die vollen 3000px width der #inner DIV wird voll angezeigt.

Das ist auch bei meiner Gallerie das Problem (#PageContainer hat position:absolut wegen clip)
nur was dagegen tun?
 
So hat der IE (6 + 7) überhaupt keine Probleme, den "Overflow" zu verstecken:

Code: 
<div id="ausen" style="width:100px; height:100px; overflow:hidden; border:1px #F00;position:absolute;">
        <div id="inner" style="width:3000px; height:100px; background-color:#06F;position:absolute;"></div>
</div>


Eine relative Positionierung der Mutterbox #ausen ist hier gleichermaßen möglich.

mfg Maik
 
Ach, ich krieg das nicht gebacken!
jetzt funktionierts zwar den Overflow zu verstecken,
allerdings funktionierts jetzt nicht mehr mit den DIV .Page nebeneinander darzustellen
und zentriert ist es im IE immer noch nicht!

Ach der IE treibt mich noch in den Wahnsinn ...
Man, wenns doch in alle anderen Browsern funktioniert ...

Hat jemand einen Vorschlag wie man sonst so ein seitenweises Blättern mit javascript realisieren kann?

Also ich hab das so gemancht, aber so wie ichs bis jetzt habe funktioniert es im IE nicht.

Also aufgebaut hab ich alles auf DIVs.

Ich hab dann sozusagen die HauptDiv #PageContainer: Dort wird mit hilfe css eigenschaft CLIP nur genau die eine Seite (width, height) dargestellt.
HTML: 
  <div id="PageContainer">    
            <div id="Page1" class="Page"> Inhalt Seite 1</div> 
            <div id="Page2" class="Page"> Inhalt Seite 2</div>
            <div id="PageClear"></div>
    </div>

div s der Klasse "Page" werden mit float left nebeneinander dargestellt.
Mit Javascript verschiebe ich dann die position allerseiten nach links oder nach rechts, je nach dem was man klickt.

So hab ich mir das gedacht zu machen ...

Hat jemand eine andere Idee, das anders mit HTML und CSS zu machen?
 
Hi,

dass der IE6 das Bild nicht skaliert, liegt an der CSS-Eigenschaft max-width. Diese wird noch nicht unterstützt.

Abhilfe kannst du schaffen, indem du in der Methode showImage die ohnehin ermittelte Breite des Bildes an die erforderliche CSS-Eigenschaft zuweist.
Code: 
new Effect.Morph('Picture', {style: styling, duration: 1, objekt:this, afterFinish: function(){
    document.getElementById('Image').src = this.objekt.imageData[this.objekt.index].getURL();
    document.getElementById("Image").style.width = newWidth + "px";
    new Effect.Appear('DisplayingPicture', {duration: 1}); // Das bild einblenden});
  }
});

Den Slidebereich könntest du wie folgt zentrieren:
Code: 
    <!-- Start THUMBNAILS -->
    <div style="position: relative; left: 50%; margin-left: -200px; width:400px; height: 170px; overflow: hidden;">
    	<div style="position: absolute; height: 170px; width: 9999em;">
	      <div id="Page1" class="Page" align="center">
	      <center>
	        <table cellpadding="0" cellspacing="0" >
	          <!-- Tabelleninhalt 1 -->
	        </table>
	        </center>
	      </div> <!-- ENDE PAGE DIV -->

	      <div id="Page2" class="Page">
	      <center>
	        <table cellpadding="0" cellspacing="0" >
	          <!-- Tabelleninhalt 2 -->
	        </table>
	        </center>

	      </div> <!-- ENDE PAGE DIV -->
      </div> <!-- Ende PagingBorder Div -->
    </div> <!-- Ende thumbPage -->
    <!-- Ende THUMBNAILS -->

	  <div style="position: relative; left: 50%; margin-left: -200px; width:400px;">
	    <span id="Previous" onclick="javascript:previousPage();" style="float:left;">prev</span>
	    <span id="Next" onclick="javascript:nextPage();" style="float:right;">next</span>
	  </div>

Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Hey, super danke Quaese,
hatte schon angst das ich das ganze neu anders implementieren müsse ...

Ja das mit der width hab ich schon vorher auch genau so ausgebessert =)

Vielen Dank nochmals!

Auch dir Maik ein herzliches Dankeschön!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück