Εμφάνιση εικόνας έξω από το div

[rafinos]

Παιδιά έχω φτιάξει ένα slideshow σε μια σελίδα... σε όλους τους browser είναι μια χαρά ... εκτός από ie7 και παλαιότερο (τώρα θα μου πείτε... υπάρχει ακόμη τέτοιο πράγμα... αλλά οκ)

 

Έτσι μου το εμφανίζει σε όλους τους browser

 

Και έτσι στους "άχρηστους" browser της ms

 

css κώδικας

#slider{
		margin: 0 auto;
		width: 600px;
		height: 190px;
		text-align: center;
		border: 1px solid #432973;
	}
	
	#slider #next{
		margin-top: 20px;
		right: -20px;
		top: 60px;
		width: 20px;
		height: 30px;
		float: right;
		position: relative;
		background-image: url('images/next.png');
		z-index: 99;
		cursor: pointer;
	}
	
	#slider #next:hover{
		background-image: url('images/next_hover.png');
	}
	
	#slider #prev{
		margin-top: 20px;
		;
		top: 60px;
		width: 20px;
		height: 30px;
		float: left;
		position: relative;
		background-image: url('images/prev.png');
		z-index: 99;
		cursor: pointer;
	}
	
	#slider #prev:hover{
		background-image: url('images/prev_hover.png');
	}
	
	#slider #image_slider{
		width: 600px;
		height: 190px;
		position: absolute;
		overflow: hidden;
	}

html κώδικας

<div id="slider">
   <div id="prev"></div>
   <div id="next"></div>
   <div id="image_slider">
	<img src="slider_images/image1.jpg" height="190" width="600">
        <img src="slider_images/image2.jpg" height="190" width="600">
        <img src="slider_images/image3.jpg" height="190" width="600">
        <img src="slider_images/image4.jpg" height="190" width="600">
        <img src="slider_images/image5.jpg" height="190" width="600">
        <img src="slider_images/image6.jpg" height="190" width="600">			
    </div>
</div>

Επεξ/σία 19 Αυγούστου 2013 από rafinos

[mixalisSt]

Θα σε συμβούλευα επειδή έχω κάνει και εγώ δικούς μου slider κατά καιρούς δες εδώ έναν responsive με fading effect , να εμπιστεύεσαι τα div γιατί είναι αξιόπιστα και αρκετά cross-browser. Με λίγα λόγια τα img tags πρέπει να τα βάλεις κάπου (σε div ή σε Ordered list) αλλιώς θα έχεις πρόβλημα ή στην χειρότερη δώσε τους "display: block" με 'float: left'. 

[rafinos]

Ε που να τον δω;;;;

Όταν λες να χρησιμοποιώ τα img μέσα σε div τι εννοείς... την κάθε μία εικόνα ξεχωριστό div;;;;

Γιατι μέσα σε div τις έχω ...

 

*με λίστα δεν μπορώ να το κάνω γιατί δεν δουλεύει με το plugin που χρησιμοποιώ... cycle...

 

πάντως επείδη το πρόβλημα είναι το position:absolute; μέσα στο #image_slider

αν το σβήσω γίνεται το παρακάτω σε όλους τους browser

Επεξ/σία 19 Αυγούστου 2013 από rafinos

[rafinos]

ΟΚ παιδιά το έκανα...

#slider{
		margin: 0 auto;
		width: 642px;
		height: 190px;
	}
	
	#slider #next{
		top: 80px;
		width: 20px;
		height: 30px;
		float: right;
		position: relative;
		background-image: url('images/next.png');
		z-index: 99;
		cursor: pointer;
	}
	
	#slider #prev{
		top: 80px;
		width: 20px;
		height: 30px;
		float: left;
		position: relative;
		background-image: url('images/prev.png');
		z-index: 99;
		cursor: pointer;
	}
	
	
	#slider #image_slider{
		width: 600px;
		height: 190px;
		margin: 0 auto;
		border: 1px solid #432973;
		overflow: hidden;
	}

[Xvipes]

Άλλη φορά γίνεται να μην stretchareis τις εικόνες?