overflow:hidden ie

T

teroristd

Registered
Здравейте, имам странен проблем с overflow:hidden в ие8, дори ие6 и 7 не съм ги гледал за сега. Значи имам див контейнер, който има бордер и определена височина и широчина. В него имам две снимки едната чернобяла другата цветна. Двете са една върху друга като горната е с абсолютна позиция и с ховер скривам едната и се вижда другата. Ако снимките са с точна височина няма проблем, но ако сложа по големи снимки, и ги резна с overflow:hidden в ие8 снимките падат с един пиксел надолу и закриват бордера на главния див. Ето сруктурата и цсс-а.


Код: 
html

<div class='cont_big_photos'>
				   
				         <div class='image_photos'>
						       <a href='#'><img class='BW' src='$row[image]' width='626' alt='caption1' /></a>
						 </div>

                         <div class='image_photos_normal'>
						       <a href='#'><img class='$row[id]' src='$row[image]' width='626' alt='caption1' /></a>
						 </div>
</div>

Код: 
css


.cont_big_photos{ margin: 0 auto; margin-top:20px; width:626px; height:114px; border:1px solid #000;  }
	
.image_photos { width:626px; height:114px; float:left; overflow:hidden;  }
.image_photos_normal { width:626px; height:114px; float:left; overflow:hidden; position:absolute; }
 
Демо няма как да пусна, но снимка мога да сложа ама едва ли има смисъл просто снимката закрива долния бордер на главния див. Обаче сега останових нещо много странно, което изобщо не мога да го разбера. На самите img тагове имам класове, които нямат никакъв цсс използвам ги просто като индетификатор за джаваскрипта с който скривам снимките, но като премахна класа всичко се оправя, естествено това не ми върши работа.
 
Малко посъкратих версията за да ти е по лесно. Сега ти трябва само jQuery и две снимки за демото.

Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
     <head>
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	

		        <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
	   
		   
                <title>Photos</title>
				
				<style>
				        .cont_big_photos{ margin: 0 auto; margin-top:20px; width:938px; height:114px; border:1px solid #000; }
				        .image_photos { width:626px; height:114px; float:left; overflow:hidden; position:relative; }
                        .image_photos_normal { width:626px; height:114px; float:left; overflow:hidden; position:absolute; }
						 img { border:0; }
						 

				</style>
    		
     </head>

     <body>
	 
			<div class='cont_big_photos'>
				   
				         <div class='image_photos'>
						       <a href='#'><img class='BW' src='images/sl2.jpg' width='626' /></a>
						 </div>

                         <div class='image_photos_normal'>
						       <a href='#'><img class='asd' src='images/sl1.jpg' width='626' /></a>
						 </div>						 
				   
				   </div>

<script type='text/javascript'>
			   
    	              $(window).load(function(){
		   		          $('.BW').stop().animate({
	                     opacity: 1
	                     }, 600);
		              });
					  
					  $('.asd').css('opacity','0');
					  
					  /* ТОВА Е СКРИПТА КАТО ПОСОЧИШ НОРМАЛНАТА СНИМКА  */
				      $(function() {
	                     $('.asd').hover(function () {
	 
	                     // ON MOUSE OVER SET OPACITY TO 0%
	                     $(this).stop().animate({
	                     opacity: 1
	                     }, 600);
	                     },
	 
	                     // ON MOUSE OUT SET OPACITY BACK TO 100%
	                     function () {
	                     $(this).stop().animate({
	                     opacity: 0
	                     }, 600);
	                     });
	                  });
					  
					  

		
              </script>
     </body>
	 
</html>
 
Тази мизерия ИЕ ще си остане фаворит за най-големия боклук в бразърите :)
Ето това добави и би трябвало да се е оправило. Т.е снимките ти трябва да са с точен размер, ако ли не ги правиш като бекграунд да са ;)
HTML: 
 img {
					border:0;
					display:block;
					width:626px;
					height:114px;
					}
 
Мерси ама това не ми върши работа, аз още в началото написах че ако са с точен размер няма проблеми.
 
Не съм тествал нищо, но забелязвам някои странни неща.

Има нещо много гнило с този float + position:absolute;

1. Нали position:absolute; премахва елемента от структурата на страницата. Защо го float-ваш, след като реално около него няма нищо?

2. За да позоционираш даден елемент, който има position:absolute, в родителския елемент, то на родителския елемент трябва да дадеш position:relative;

3. Когато дадеш float на някой елемент, блоковите елементи го игнорират изцяло и застават "зад него". За да направиш така, че родителския елемент да взема в предвид височината, трябва да му дадеш overflow:hidden; или да изчистиш float-a с clear.

Мисля, че кода е малко нелогичен, не че CSS работи неправилно :)
 
Да разбира се прав си но не е в това проблема и без флоат и с релативна позиция на родителския елемент просто няма ефект. Флоатите са ми останали от тестове :idea: , какво ли не пробвах но не става.
 
А за да ти спестя мъките с 2 снимки, черно бели, цветни и т.н. виж този jQuery plugin и мисля, че нещата ще си дойдат на място :)

От описанието на проблема разбирам, че търсиш нещо такова.
 
Без демо, което да погледнем, май няма да стане работата.

Не можеш ли да направиш един rar и да го прикачиш тук. Може би това ще бъде по-полезно отколкото да налучкваме :)
 
аз съм постнал код за демо просто едно JQuery трябва да сложиш и две снимки
 
Сега тествах и при мен с този CSS нещата си изглеждат съвсем нормално.

[css]
.cont_big_photos {
margin: 0 auto;
margin-top:20px;
width:938px;
height:114px;
border:1px solid #000;
position:relative;
overflow:hidden;
}
.image_photos {
width:626px;
height:114px;
}
.image_photos_normal {
width:626px;
height:114px;
position:absolute;
top:0;
}
img { border:0; }
[/css]

Пробвай и кажи при теб как е
 
при мене не работи а ти вероятно го пробваш без джаваскрипта моля те прочети темата от началото за да добиеш представа за проблема
 
Благодаря ти но разковничето в случая е че използваш снимки с височина 114 пиксела а този бъг се появява при снимки с по голяма височина от тази на контейнера.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе