28173 sujets

CSS et mise en forme, CSS3

Formatage d'un tableau en CSS

Bonjour,

J'ai un petit problem avec ce tableau formaté en CSS en effet j'ai remarqué que dans IE les cellules avaient des hauteurs supérieux d'au moins 2 px... J'ai beau essayé de comprend je ne vois pas d'ou vient le pB.

Merci de votre aide?

Voici le code!
  <style type="text/css">
#muziklounge {
table-layout:  auto;
border-collapse: collapse;
}

#muziklounge tr {
height: 19px;
}

#muziklounge td, #muziklounge th {
border: 1px solid #308395;
padding: 2px;
color: #333;
}

#muziklounge td {
background-color: #C4C4C4;
text-align: left;
}

#muziklounge th {
background-color: #73971B;
text-align: center;
border-top: #73971B;
}

#muziklounge td a, #muziklounge td a:hover, #muziklounge td a:active, #muziklounge td a:visited {
color: white;
text-decoration: underline;
font-weight: bold;
font-size: 10px;
}

#muziklounge td a img {
border: 0;
}

#muziklounge td.play, #muziklounge th.play {
width: 30px;
text-align: center;
}
#muziklounge td.buytrack, #muziklounge th.buytrack {
width: 49px;
text-align: center;
border-right: 0;
}
#muziklounge #updates {
background-color: #DA5D09;
text-align: left;
border-bottom: 0;
border-left: 0;
border-right: 0;
}
#muziklounge th#songtitle {
width: 200px;
}
#muziklounge th.artist, #muziklounge td.artist {
width: 130px;
border-left: 0;
}
  </style>
</head>

<body>

<table id="muziklounge">
  <tbody>
    <tr>
      <th class="artist">Artists</th>
      <th id="songtitle">Song Title</th>
      <th class="play">Play</th>
      <th class="buytrack">Buy</th>
    </tr>
    <tr>
      <td class="artist">The Roots</td>
      <td>The Homegrown</td>
      <td class="play"> <img src="images/wmplay.gif" /></td>
      <td class="buytrack"> <img
 src="images/buy_track.gif" /></td>
    </tr>
    <tr>
      <td class="artist">Javier</td>
      <td>Left of Center</td>
      <td class="play"><img src="images/wmplay.gif" /></td>
      <td class="buytrack"><img
 src="images/buy_track.gif" /></td>
    </tr>
    <tr>
      <td class="artist">Lina</td>
      <td>Come To Mama</td>
      <td class="play"><img src="images/wmplay.gif" /></td>
      <td class="buytrack"><img
 src="images/buy_track.gif" /></td>
      
    </tr>
    <tr>
      <td class="artist">Talib Kweli</td>
      <td>Miss Hill</td>
      <td class="play"><img src="images/wmplay.gif" /></td>
      <td class="buytrack"><img
 src="images/buy_track.gif" /></td>
    </tr>
<tr>
      <td class="artist">Talib Kweli</td>
      <td>Miss Hill</td>
      <td class="play"><img src="images/wmplay.gif" /></td>
      <td class="buytrack"><img
 src="images/buy_track.gif" /></td>
    </tr>
<tr>
      <td class="artist">Talib Kweli</td>
      <td>Miss Hill</td>
      <td class="play"><img src="images/wmplay.gif" /></td>
      <td class="buytrack"><img
 src="images/buy_track.gif" /></td>
    </tr>
    <tr>
      <td id="updates" colspan="5"><a
 href="http://www.souljoint.com/index.php?name=News&amp;catid=&amp;topic=5">&raquo;Access
Muzik Lounge Updates</a></td>
    </tr>
  </tbody>
</table>

Modifié par kunfrydev (23 Jul 2006 - 20:16)
Personnellement j'ai pas compris ton probleme. Est ce que tu pourrait reformuler ou faire un lien vers la page en question
ok en fait je vois ce que tu veux dire, tes cellules sont plus hautes avec IE qu'avec firefox.

J'ai essayé différents truc mais ca ne fait rien, ca ne me parait pas hyper génant ... je sais pas si ca vaut le coup de se prendre la tête la dessus...

qu'est ce que ca te pose comme problème ?
Modifié par aurelien38 (23 Jul 2006 - 21:30)
Salut merci de me répondre,

Le truc génant c'est que ce tableau est contenu dans une boite adjacente à une autre qui sont sensées avoir la meme hauteur, et la chose assez chaplinesque c'est que quand j'arrive à avoir la meme taille dans IE ce n'est pas le cas dans FF et quand j'y arrive dans FF c'est dans IE que cela déborde... Si je ne trouve pas de soluce, je serai obligé de jouer la carte IE qui est malhereusement le navigateur de 86% des internautes selon l'internaute mag en juillet!

Tu peux voir ca ici http//www.souljoint.com (bon le code est pourri c'est ma premiere tentative de code en CSS, j'ai acheté le bouquin de Mr Goetter il n'y a pas tres longtemps lol et en plus j'utilise Postnuke comme CMS qui genere pas mal de bétises) scroll vers le bas les deux boxs avant le footer!
Modifié par kunfrydev (23 Jul 2006 - 21:10)
oui ok : j'ai essayé avec ff et ie la différence est petite mais elle est la. ca doit venir d'une différence d'interpretation entre les 2 navigateurs. Ca ne me parait pas hyper genant sauf pour les webmaster maniaques qui aiment les choses au pixel près... Smiley biggrin

par contre sous FF 1.5 et IE il y a des problèmes d'affichage du moteur de recherche qui dépasse du cadre ca me parait deja plus génant.

désolé de pas pouvoir résoudre ton problème
C'est etrange j'ai IE6.0.2, FF 1.5.0.4 et le moteur de recherce est completement dans le cadre... et j'ai essayé de tester sur des machines différentes dans des cyber café et j'ai pas vu ce pb...
Ok apres un petit tour sur www.browsercam.com qui permet de faire des captures online d'un site web etc... Je vois en fait que le pb de la search box dont tu fais allusion qui sort du cadre c'est sur IE 5.2 sur Mac, j'essairaie de lire le plus d'articles possibles sur ce sujet. Il y a aussi konqueror qui a ce meme probleme mais bon la literrature sur ce dernier n'est pas tres fournie!

Meme si je crois que la majorité des visiteurs du site de mon pote ne seront pas sous ces configurations (IE mac ou Konq Linux)!

mais merci de la remarque!
aurelien38 a écrit :
Ca ne me parait pas hyper genant sauf pour les webmaster maniaques qui aiment les choses au pixel près... Smiley biggrin

Ceux-ci vont être très malheureux avec les CSS, alors. Smiley cligne
Modifié par mpop (24 Jul 2006 - 22:02)
Je suis ni maniaque, ni obsédé du pixel, mais en tout cas j'utilise le pixel parce que je ne maitrise pas essez bien les em et autres %ge pour me risquer mais bon meme en pixel je trouve que les CSS sont tres précis et plutot facile à manipuler pour peu que l'on sache compter et que l'on comprene le box model standard et qu'on déclare bien ces doctypes et que l'on fasse un peu de recherche sur les bugs IE et leurs workarounds ... Ok ca fait beaucoup mais le webmaster doit soufrir pour la beauté de son site! Smiley biggrin
Sujet clos
Aller à