WAP site development - images issue

[bikey77]

Αναπτύσσω κάποια wap sites και έχω συναντήσει ένα μικρό θέμα σχετικά με τις εικόνες.

Συγκεκριμένα, στο ένα από αυτά έχω έναν πίνακα 2χ3 μέσα στον οποίο έχω συνολικά 6 εικόνες που όλες μαζί σχηματίζουν μία μεγάλη. Κάθε εικόνα είναι ένα κουμπάκι για να πάμε σε άλλη σελίδα. Το θέμα είναι ότι ενώ έχω ορίσει cellpadding, cellspacing 0 gia τον πίνακα, border, vspace, hspace 0 για τις εικόνες, και μέσα στο css img { border:0; } a img { border:0; }, οι εικόνες αφήνουν ένα κενό (σαν border) γύρω τους με αποτέλεσμα να "σπαει" η μεγάλη εικόνα. Δεν είναι θέμα πλάτους πίνακα μια και του έχω δώσει πλάτος ίσο με το πλάτος της εικόνας.

 

Καμιά ιδέα?

[hartzoua]

Δοκίμασε να μην αφήσεις κενό κανένα κελί (δεν ξέρω αν το έχεις κάνει) βάζοντας τουλάχιστον  . Ακόμα δοκίμασε κάθε κελί να είναι στην ίδια γραμμή (<td>μπλα μπλα</td>).

[bikey77]

Δεν έχω αφήσει κανένα κενό κελί, γενικά σωστή η παρατήρησή σου αλλά στην περίπτωσή μου δε συμβαίνει κάτι τέτοιο.

 

Να σημειώσω ότι με το δικό μου τηλέφωνο (HTC Touch Diamond) τα βλέπω όλα κανονικά (λόγω IE) αλλά σε άλλα κινητά με δικούς τους browsers (όπως Sony Ericsson, Nokia κλπ) οι εικόνες έχουν αυτό το "border" γύρω τους.

[VitamineQ]

δοκίμασε να αλλάξεις το border απο 0 σε none

[bikey77]

δοκίμασε να αλλάξεις το border απο 0 σε none

 

Έχω δοκιμάσει και τα δύο, το κενό παραμένει...

[zinas]

Μπας και παίζει κάνα padding στα td? Κάνα margin στα img? Έχεις το web developer toolbar για να δεις ακριβώς το css τους?

 

Δοκίμασε και το border-collapse: collapse; στο table

[kostas___]

δοκίμασε να μην αφήσεις καθόλο κενό ανάμεσα.Oύτε αλλαγή γραμμής.

 

π.χ <table><tr><td><img .../></td><td><img .../></td></tr></table>

[isay]

Στο wap programming θα συναντήσεις μπόλικους περιορισμούς και ασυμβατότητες από κινητό σε κινητό. Π.χ. για το πρόβλημα σου, δεν είναι θέμα ρυθμίσεων αλλά θέmα υποστήριξης του tag από τον εκάστοτε wap broswer

[bikey77]

Ο κώδικας είναι ο εξής

 

><style type="text/css">

img {
border:none;
margin: 0px;
padding: 0px;
}

a { 
border:none; 
}

a img
{
border: none;
}

a:hover { 
border:none; 
}

a:visited { 
border:none; 
}

</style>

<table width="180" hspace="0" vspace="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
   <td width="90" align="left"><img src="images/img01.jpg" width="90" height="75" hspace="0" vspace="0" /></td>
   <td width="90" align="left"><img src="images/img02.jpg" width="90" height="75" hspace="0" vspace="0" /></td>
 </tr>
 <tr>
   <td align="left"><img src="images/img03.jpg" width="90" height="57" hspace="0" vspace="0" /></td>
   <td align="left"><a href="page1.htm" target="_blank"><img src="images/img04.jpg" width="90" height="57" hspace="0" vspace="0" /></a></td>
 </tr>
 <tr>
   <td align="left"><a href="page2.htm" target="_blank"><img src="images/img05.jpg" width="90" height="81" hspace="0" vspace="0" /></a></td>
   <td align="left"><a href="page3.htm" target="_blank"><img src="images/img06.jpg" width="90" height="81" hspace="0" vspace="0" /></a></td>
 </tr>
 <tr>
   <td colspan="2" align="left"><img src="images/img07.jpg" width="180" height="27" hspace="0" vspace="0" /></td>
 </tr>
</table>

 

Δεν έχω ούτε κενά ούτε τίποτα...

[kostas___]

Ο κώδικας είναι ο εξής

 

><style type="text/css">

img {
border:none;
margin: 0px;
padding: 0px;
}

a { 
border:none; 
}

a img
{
border: none;
}

a:hover { 
border:none; 
}

a:visited { 
border:none; 
}

</style>

<table width="180" hspace="0" vspace="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
   <td width="90" align="left"><img src="images/img01.jpg" width="90" height="75" hspace="0" vspace="0" /></td>
   <td width="90" align="left"><img src="images/img02.jpg" width="90" height="75" hspace="0" vspace="0" /></td>
 </tr>
 <tr>
   <td align="left"><img src="images/img03.jpg" width="90" height="57" hspace="0" vspace="0" /></td>
   <td align="left"><a href="page1.htm" target="_blank"><img src="images/img04.jpg" width="90" height="57" hspace="0" vspace="0" /></a></td>
 </tr>
 <tr>
   <td align="left"><a href="page2.htm" target="_blank"><img src="images/img05.jpg" width="90" height="81" hspace="0" vspace="0" /></a></td>
   <td align="left"><a href="page3.htm" target="_blank"><img src="images/img06.jpg" width="90" height="81" hspace="0" vspace="0" /></a></td>
 </tr>
 <tr>
   <td colspan="2" align="left"><img src="images/img07.jpg" width="180" height="27" hspace="0" vspace="0" /></td>
 </tr>
</table>

 

Δεν έχω ούτε κενά ούτε τίποτα...

 

Δοκίμασες να το γράψεις όλο σε μία γραμμή όπως σου είπα πρίν ?

[bikey77]

Δοκίμασες να το γράψεις όλο σε μία γραμμή όπως σου είπα πρίν ?

 

Τώρα μόλις, δυστυχώς ούτε αυτό είναι.

[StavrosD]

Είσαι σίγουρος ότι όλα τα wap enabled κινητά υποστηρίζουν CSS;

WCSS ήξερα ότι υποστηρίζουν.

[bikey77]

Να σου πω την αλήθεια, δεν ξέρω... πάντως απ ότι συμπεραίνω όχι. Thanks για το tip, θα το ψάξω περί wcss.