Πρόβλημα με image width σε Internet Explorer, αλλα οχι σε FF

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
nikolakis13
Δημοσιεύσεις: 9
Εγγραφή: 20 Αύγ 2007 19:13
Επικοινωνία:

Πρόβλημα με image width σε Internet Explorer, αλλα οχι σε FF

Δημοσίευση από nikolakis13 » 20 Αύγ 2007 19:16

Πρόσφατα άλλαξα template στη σελίδα που διαχειρίζομαι και αντιμετωπίζω ένα πρόβλημα μονο στον Internet Explorer (ίσως και στο Safari,δεν το έχω δοκιμάσει ακόμη).

Συγκεκριμένα το παλιό template ήταν fixed width, ενώ αυτό που έβαλα τώρα είναι fluid width. Τα right και left column ειναι επίσης fluid width, οπότε άλλαξα τις ρυθμίσεις των modules που έχω στα right και left column(χρησιμοποιώ το ELXIS CMS), έτσι ώστε να προσαρμόζεται αυτόματα το πλάτος τους ανάλογα με την αναλυση της οθόνης του χρήστη.

To πρόβλημα εμφανίζεται στα modules που εμφανίζουν εικόνες, πχ έχω ενα module που εμφανίζει 2 πρωτοσελιδα εφημερίδων, ή στο module των διαφημίσεων. Έχω βάλει λοιπόν image width=90% και ενώ στο Firefox την εμφανίζει μια χαρά και της δίνει το πλάτος του column στον IE δεν το κάνει με αποτέλεσμα να μου χαλάει όλο το column.

Έτσι λοιπόν αναγκάστηκα να δώσω σταθερές διαστάσεις στις εικόνες, μέχρι να καταφέρω να το διορθώσω, έτσι ώστε να εμφανίζονται σωστά σε αναλυση 800χ600(δεν νομίζω να βλέπει κανείς σελίδες σε μικρότερη ανάλυση). Όταν όμως κάποιος βλέπει τη σελίδα σε μεγαλύτερη ανάλυση οι εικόνες φαίνονται πολύ μικρές, πράγμα που αποτελεί πρόβλημα.

Καμιά σκέψη κανείς για το πως μπορώ να λύσω το πρόβλημα ?
Συνημμένα
example.JPG
problem

id12586
στις καρδιές μας
Δημοσιεύσεις: 8387
Εγγραφή: 23 Ιουν 2003 23:28
Τοποθεσία: Far away
Επικοινωνία:

Πρόβλημα με image width σε Internet Explorer, αλλα οχι σε FF

Δημοσίευση από id12586 » 21 Αύγ 2007 23:52

Και ο FF δεν κάνει κανένα σπουδαίο κόλπο απλώς μικραίνει τις εικόνες με έναν κακό αλγόριθμο που έχουν όλοι οι browsers.

Δεν μπορώ να βρώ άλλη λύση πέρα απο το να βάλεις μικρές εικόνες, σκεπτόμενος την 1024*768.
Και όταν υπάρχει ανάλυση 800*600 να πηγαίνει η μια κάτω απο την άλλη..
Chris at your Services
ΕικόναSacame de Aqui

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πρόβλημα με image width σε Internet Explorer, αλλα οχι σε FF

Δημοσίευση από skeftomilos » 22 Αύγ 2007 01:18

Δοκίμασες να τις βάλεις σε table;

Κώδικας: Επιλογή όλων

<table width="100%">
  <tr>
    <td><img src="pic1.jpg" width="100%"></td>
    <td><img src="pic2.jpg" width="100%"></td>
  </tr>
</table>
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

nikolakis13
Δημοσιεύσεις: 9
Εγγραφή: 20 Αύγ 2007 19:13
Επικοινωνία:

Πρόβλημα με image width σε Internet Explorer, αλλα οχι σε FF

Δημοσίευση από nikolakis13 » 22 Αύγ 2007 12:44

@id12586 Πως θα κάνουμε τον Explorer να κάνει και αυτός το συγκεκριμένο κόλπο όμως?

@skeftomilos Σε table τις έχω ήδη. Ορίστε ο Κώδικας

Κώδικας: Επιλογή όλων

<script language="JavaScript1.2" src="<?php echo $mosConfig_live_site;?>/includes/js/winpopup.js" type="text/javascript"></script>

  <BR>
  
  <table width="100%" border="0">
  <tr>
    <td >
      <div align="center" > 		
         <A HREF="javascript&#58;popitup&#40;'<?php 
 				echo $image.'\',\''.'width='.$size&#91;0&#93;.',height='.$size&#91;1&#93;.',resizable=0';
			    ?>'&#41;">  	  	
 	      <img src="<?php echo $imagethmb; ?>" border="0" width="52" height="90" alt="<?php echo $image_name; ?>" />
 	      </A>
 	    </div> 	    	
   	</td>
    <td >
		  <div align="center" > 		
         <A HREF="javascript&#58;popitup&#40;'<?php 
 				echo $image2.'\',\''.'width='.$size2&#91;0&#93;.',height='.$size2&#91;1&#93;.',resizable=0';
			    ?>'&#41;">  	  	
 	      <img src="<?php echo $imagethmb2; ?>" border="0" width="52" height="90" alt="<?php echo $image_name2; ?>" />
 	      </A>
 	    </div> 	    	
    			  
   	</td>
  </tr>
  <tr>
    <td>
      <div align="center"> 	
 			<?php 
 				echo $title;
			?>  	
			</div> 	    	    	    	

    <td>
    	<div align="center"> 	
 			<?php 
 				echo $title2;
			?>  	
			</div> 	    	    	
    </td>
  </tr>
</table>

<BR>

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πρόβλημα με image width σε Internet Explorer, αλλα οχι σε FF

Δημοσίευση από skeftomilos » 22 Αύγ 2007 13:17

Το πρόβλημα δεν είναι στην PHP αλλά στο HTML output. Οπότε καλύτερα να μας δείξεις τον κώδικα από το View-Source του browser.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

nikolakis13
Δημοσιεύσεις: 9
Εγγραφή: 20 Αύγ 2007 19:13
Επικοινωνία:

Πρόβλημα με image width σε Internet Explorer, αλλα οχι σε FF

Δημοσίευση από nikolakis13 » 22 Αύγ 2007 13:26

Η σελίδα είναι www.eidisis.gr και ο κώδικας σχετικά με το παραπάνω:

Κώδικας: Επιλογή όλων

<div class="moduletable">
							<h3>
				Πρωτοσέλιδα				</h3>

				
<script language="JavaScript1.2" src="http&#58;//www.eidisis.gr/includes/js/winpopup.js" type="text/javascript"></script>

  <BR>
  
  <table width="100%" border="0">
  <tr>
    <td >
      <div align="center" > 		
         <A HREF="javascript&#58;popitup&#40;'http&#58;//www.eidisis.gr//images/frontpage/eidisis.jpg','width=1024,height=1448,resizable=0'&#41;">  	  	
 	      <img src="http&#58;//www.eidisis.gr//images/frontpage/tb_eidisis.jpg" border="0" width="52" height="90" alt="" />
 	      </A>

 	    </div> 	    	
   	</td>
    <td >
		  <div align="center" > 		
         <A HREF="javascript&#58;popitup&#40;'http&#58;//www.eidisis.gr//images/frontpage/proini.jpg','width=1024,height=1448,resizable=0'&#41;">  	  	
 	      <img src="http&#58;//www.eidisis.gr//images/frontpage/tb_proini.jpg" border="0" width="52" height="90" alt="" />
 	      </A>
 	    </div> 	    	
    	
    	</td>		  
   	</td>
  </tr>

  <tr>
    <td>
      <div align="center"> 	
 			Ειδήσεις  	
			</div> 	    	    	    	

    <td>
    	<div align="center"> 	
 			Πρωινή  	
			</div> 	    	    	
    </td>
  </tr>
</table>

<BR>

id12586
στις καρδιές μας
Δημοσιεύσεις: 8387
Εγγραφή: 23 Ιουν 2003 23:28
Τοποθεσία: Far away
Επικοινωνία:

Πρόβλημα με image width σε Internet Explorer, αλλα οχι σε FF

Δημοσίευση από id12586 » 22 Αύγ 2007 16:04

Κώδικας: Επιλογή όλων

<table style="table-layout&#58;fixed" border="0" width="100%">
  <tr>
    <td  >
      		
         <A HREF="javascript&#58;popitup&#40;'http&#58;//www.eidisis.gr//images/frontpage/eidisis.jpg','width=1024,height=1448,resizable=0'&#41;">  	  	
 	      <img src="http&#58;//www.eidisis.gr//images/frontpage/tb_eidisis.jpg" border="0" width="100%"  alt="" />
 	      </A>

 	     	    	
   	</td>
    <td >
		  		
         <A HREF="javascript&#58;popitup&#40;'http&#58;//www.eidisis.gr//images/frontpage/proini.jpg','width=1024,height=1448,resizable=0'&#41;">  	  	
 	      <img src="http&#58;//www.eidisis.gr//images/frontpage/tb_proini.jpg" border="0" width="100%"  alt="" />
 	      </A>
 	     	    	
    	
      
   	</td>
  </tr>
  <tr>
    <td>

      <div align="center"> 	
 			Ειδήσεις  	
			</div> 	    	    	    	

    <td>
    	<div align="center"> 	
 			Πρωινή  	
			</div> 	    	    	
    </td>
  </tr>
</table>
Έφτιαξα το width στο table σύμφωνα με την ιδέα του σκεφτόμιλου. Δοκίμασε τώρα..
Chris at your Services
ΕικόναSacame de Aqui

nikolakis13
Δημοσιεύσεις: 9
Εγγραφή: 20 Αύγ 2007 19:13
Επικοινωνία:

Πρόβλημα με image width σε Internet Explorer, αλλα οχι σε FF

Δημοσίευση από nikolakis13 » 22 Αύγ 2007 16:58

Καταφέρα να το φτιάξω πριν απο 1-2 ώρες και γω μετα απο πολυ ψαξιμο στο google με την εξής ρύθμιση

<table style="table-layout:fixed; width:auto;" border="0" >

Το table-layout έκανε τη διαφορά απ'ότι φαίνεται. Σε IE και FF παιζει μια χαρα μενει να το δοκιμάσω σε Opera & Safari.

Σε ευχαριστώ πάντως πάρα πολύ και εσένα και τον σκεφτόμιλο για το ενδιαφέρον που δείξατε :D

nikolakis13
Δημοσιεύσεις: 9
Εγγραφή: 20 Αύγ 2007 19:13
Επικοινωνία:

Πρόβλημα με image width σε Internet Explorer, αλλα οχι σε FF

Δημοσίευση από nikolakis13 » 22 Αύγ 2007 19:49

Και ενώ πλέον όλα παίζουν μια χαρά σε FF 1.5, FF 2, IE 6, IE 7, σε Opera & Safari μου βγάζει ακριβώς τα ίδια προβλήματα. Δηλαδή : Τα εμφανίζει παρα πολύ μικρά (δείτε εικόνα παρακάτω) και επίσης δε μου εμφανίζει καθόλου τα banners εαν τους βάλω πλάτος σε ποσοστο, ενώ αν τους βαλω πλατος σε pixels το εμφανίζει κανονικά.

O κώδικας για τα banners που εμφανίζει ο Opera ειναι :

Κώδικας: Επιλογή όλων

<div class="module"><div><div><div><h3>Διαφήμιση</h3>
<link rel="stylesheet" href="components/com_artbannersplus/artbannersplus.css" type="text/css" /><table cellpadding="0" cellspacing="0" class="artbannersplus"><tr><td><a href="index.php?option=com_artbannersplus&amp;task=clk&amp;id=2" target="_blank"><img src="http&#58;//www.eidisis.gr/images/banners/kiltidis.jpg" style="border&#58;0px solid green" vspace="0" alt="Κώστας Κιλτίδης" title="Κώστας Κιλτίδης" width="100%"  /></a></td></tr></table>

</div></div></div></div>
Συνημμένα
example3.JPG
example3.JPG (13.31 KiB) Προβλήθηκε 2807 φορές
example2.JPG
example2.JPG (6.18 KiB) Προβλήθηκε 2808 φορές

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πρόβλημα με image width σε Internet Explorer, αλλα οχι σε FF

Δημοσίευση από skeftomilos » 22 Αύγ 2007 20:08

Όταν υπάρχουν διαστάσεις σε ποσοστά, αυτά υπολογίζονται με βάση τις διαστάσεις του parent element. Αν λοιπόν το parent element δεν έχει σαφώς καθορισμένες διαστάσεις τότε μπορεί το πλάτος να υπολογιστεί ως το 100% του 0, δηλαδή 0.

Επίσης έχει σημασία αν το element του οποίου καθορίζεται το πλάτος είναι inline ή block. Μπορείς να δοκιμάσεις στα links style="display:block" για να δεις τι διαφορά έχει.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης