1493 sujets

Web Mobile et responsive web design

[Résolu] Problème table dans li iPhone

Bonjour,

Je suis en train de développer une application iPhone.
J'ai voulu faire une légende en utilisant des table imbriqués dans des li.

Voici le code HTML:

<div id="legende">
      <ul>
        <li>
          <table>
            <tr>
              <td rowspan="2"><span class="chiffre1">1</span></td>
              <td colspan="2">année</td>
            </tr>
            <tr>
              <td colspan="2">moyenne</td>
            </tr>
          </table>
        </li>
        <li>
          <table>
            <tr>
              <td rowspan="2"><span class="chiffre2">2</span></td>
              <td colspan="2">bonne</td>
            </tr>
            <tr>
              <td colspan="2">année</td>
            </tr>
          </table>
        </li>
        <li>
          <table>
            <tr>
              <td rowspan="2"><span class="chiffre3">3</span></td>
              <td colspan="2">grande</td>
            </tr>
            <tr>
              <td colspan="2">année</td>
            </tr>
          </table>
        </li>
        <li>
          <table>
            <tr>
              <td rowspan="2"><span class="chiffre4">4</span></td>
              <td colspan="2">année</td>
            </tr>
            <tr>
              <td colspan="2">exceptionnelle</td>
            </tr>
          </table>
        </li>
      </ul>
    </div>

Et voici mon code CSS:

#legende li, #legende .chiffre1, #legende .chiffre2, #legende .chiffre3, #legende .chiffre4, #legende table
{
	display: inline;
	font-size: 13px;
	color: rgb(80,20,30);
	margin-right: 2.8px;
}

#legende table
{
	border-spacing: 0;
	border-collapse: collapse;
	border: none;
	border-width: 0px;
	width: 10%;
}

#legende table td
{
	border: none;
	font-size: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
	background: transparent;
	text-align: left;
}

.chiffre1
{
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-right: 3px;
	background-color: rgb(250,210,60);
}

.chiffre2
{
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-right: 3px;
	text-align: center;
	background-color: rgb(250,180,60);

}

.chiffre3
{
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-right: 3px;
	text-align: center;
	background-color: rgb(250,150,30);

}

.chiffre4
{
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-right: 3px;
	text-align: center;
	background-color: rgb(240,90,30);

}


Lorsque je suis sur Firefox, je n'ai pas de problème.
Par contre, lorsque je passe sur l'iPhone (ou même sur Chrome), chaque li retourne à la ligne alors que j'ai bien mis display:inline.

Comment résoudre ce problème?

Merci.
Modifié par Yuuko (23 Apr 2012 - 16:36)
Sujet clos
Aller à