✔ overflow hidden wirkt nicht

[Darian]

Hallo Leute,

ich habe eine div box wo mit jquery Bilder geladen werden. Wenn die Bilder rechts über den Rand lappen, soll das einfach abgeschnitten werden.

Das hat bis jetzt auch funktioniert. Nur musste ich jetzt die Bilder auch vertikal zentrieren, und jetzt funktioniert das overlow:hidden nicht mehr.

Gemacht habe ich es wie folgt:

<div style="display: table;" id="gallery_main">
<div class="inner">
<img src="http://www.bildzumlink.at/asdf/asdfj/test.jpg">
</div>
</div>

Wieso da im Quelltext jetzt style="display:table" steht weiß ich nicht, da ich es im css file gemacht habe.

#gallery_main {
position:relative;
left:290px;
top:0px;
/*right:10px;*/
width:485px;
height:340px;
background-color:#FFFFFF;
border:1px solid #dbdbdc;
text-align:center;
overflow:hidden;
display:table;
vertical-align:middle;
}

.inner {
width:100%;
display:table-cell;
vertical-align:middle;
position:relative;
text-align:center;
overflow:hidden;
border:1px solid blue;
}

.inner img {
overflow:hidden;	
}

[if IE ] #gallery_main{overflow:hidden}
[if IE ] #gallery_main,.inner{display:block}
[if IE ] .inner {top:50%;left:0;}
[if IE ] .inner img{top:-50%;	position:relative;}

Zentriert ist jetzt zwar alles so wie ich es will, nur das overflow wirkt nicht mehr.

Desweiteren funktioniert beim ie ein jquery fade nicht mehr.

Wäre es vielleicht sinnvoller es einfach mit js zu probieren?

Oder habt ihr sonst Ideen was da falsch sein könnte?

lg und danke für Infos
Darian

 

[Maik]

Hi,

ich geh jetzt mal davon aus, dass die Bilder horizontal ausgerichtet werden sollen, und empfehle dir, einfach mal zur Erinnerung hier vorbeizuschauen: http://www.tutorials.de/forum/css/344604-div-box-mit-bildern-ohne-zu-ueberlappen.html#post1788696.

Und was hat es denn eigentlich hiermit auf sich?

[if IE ] #gallery_main{overflow:hidden}
[if IE ] #gallery_main,.inner{display:block}
[if IE ] .inner {top:50%;left:0;}
[if IE ] .inner img{top:-50%;	position:relative;}

mfg Maik

 

[Darian]

Hallo,

na ja, irgendwie sehe ich den Zusammenhang nicht. Es handelt sich hier jetzt nur um ein einziges Bild, und nicht um Thumbnails.

Den Link hast sogar du irgendwo gepostet: http://www.pmob.co.uk/temp/vertical-align3.htm

Genau dannach habe ich das Vertikal Zentrieren gemacht. Das ie Zeugs braucht man damits im ie auch funktioniert.

lg Darian

<edit>Hat irgendwas mit dem display:table zu tun, als ich das weg gegeben habe, funktioniert das overflow wieder.
Desweiteren werde ich wohl nach es versuchen irgendwie anderes zu zentrieren, die Probleme/Fehler sind ziemlich viel geworden nachdem ich es so eingebaut hatte.
</edit>

 

[Maik]

Den Link hast sogar du irgendwo gepostet: http://www.pmob.co.uk/temp/vertical-align3.htm

Genau dannach habe ich das Vertikal Zentrieren gemacht. Das ie Zeugs braucht man damits im ie auch funktioniert.

Jo, den Link hab ich hier im Forum schon desöfteren gepostet.

Das steht aber nicht in dieser Form in der genannten Seite, und funktioniert so auch keinen Meter im IE :suspekt:

Sondern so:

<style type="text/css">
.imageholder {
	position:relative;
	display:table;
	height: 450px;
	width: 615px;
	vertical-align: middle; 
	text-align: center;
	border: 1px solid #CCCCCC;
	background:red;
}
.inner {
	width:100%;
	display:table-cell;
	vertical-align:middle;
	position:relative;
}

</style>

<!--[if IE ]>
<style type="text/css">
.imageholder{overflow:hidden}
.imageholder,.inner{display:block}
.inner {top:50%;left:0;}
.inner img{top:-50%;	position:relative;}
</style>
<![endif]-->

Und wozu wird hier für #gallery_main überhaupt overflow:hidden benötigt, wenn nur ein einziges Bild in der Box erscheint?

mfg Maik

 

[Maik]

<edit>Hat irgendwas mit dem display:table zu tun, als ich das weg gegeben habe, funktioniert das overflow wieder.
Desweiteren werde ich wohl nach es versuchen irgendwie anderes zu zentrieren, die Probleme/Fehler sind ziemlich viel geworden nachdem ich es so eingebaut hatte.
</edit>

Besitzt das Bild eine bekannte Höhe?

Dann liesse es sich über die padding-Eigenschaft für #gallery_main in dessen Viewport ausrichten.

mfg Maik

 

[Darian]

Hallo,

das Problem war ja dass ich mit jquery viele verschiedene Bilder rein lade. Hoch- und Querformatbilder waren dann nie richtig ausgerichtet.

Das ganze statisch wäre mit margin bzw padding natürlich kein Problem gewesen.

Ich habe das zentrieren jetzt anders gemacht, und darum funktioniert auch das overflow wieder.

Mit JS funktioniert es jetzt mehr oder weniger(ist zwar irgendwie komisch, aber es geht):

		var Img = new Image();
		Img.src = link;
		var height = Img.height;
		
		if(height < 340 && height != 0) {
			current_margin = (340-height)/2;
			$("#gallery_main").css("padding-top", current_margin);
		}
		else {
			$("#gallery_main").css("padding-top", "0");
		}

Teilweise enthält height aufeinmal 0, darum auch das && height !=0.

Ist zwar nicht gerade sauber, aber ich hoffe auf keine Probleme mehr zu stossen.

lg und thx
Darian