Codage page d'accueil - Problème d'affichage différent sur Chrome et Firefox

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Codage page d'accueil - Problème d'affichage différent sur Chrome et Firefox

Message par Tsuki59 le Sam 19 Mar 2016 - 18:34

Bonjour,

Je viens de créer mon forum et je suis en train un codage pour ma page d'accueil. Je suis novice en codage mais j'ai réussi à faire ce que je voulais.
Mais j'ai un probleme. Cela ne s'affiche pas pareil selon le navigateur.

Affichage sur Chrome :


Affichage sur Firefox :


L'affichage sur Chrome est le bon. Je ne comprends pas pourquoi sur firefox la partie "Avancement" se décale vers la droite et ne se place pas en dessous de "Sorties" comme sur chrome.

Peut-être y-a-t-il un problème dans mon codage ?

Voici mon code :
Code:
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster" /> <style>

#pa-kahlan h2 {
font-family: 'Satisfy', cursive;
}

#pa-kahlan {
width: 800px;
margin: 0 auto;
background: #5882FA;
color: #0000FF;
position: relative;
}

#pa-kahlan a {
text-decoration: none;
color: #0000FF;
}

#pa-kahlan a:hover {
color: #0000FF;
}

#pa-kahlan table
{
display: block;
width: 800px;
border-spacing: 20px 20px !important;
}

#pa-kahlan td.withbg {
background: #819FF7;
height: 140px; width: 210px;
vertical-align: top;
position: relative;
padding: 10px;
font-family: sans-serif;
font-size: 13px;
}

#pa-kahlan td.withbg2 {
background: #819FF7;
height: 10px; width: 210px;
vertical-align: top;
position: relative;
padding: 10px;
font-family: sans-serif;
font-size: 13px;
}

#pa-kahlan td.withbg3 {
background: #819FF7;
height: 100px; width: 210px;
vertical-align: top;
position: relative;
padding: 10px;
font-family: sans-serif;
font-size: 13px;
}

#pa-kahlan td.withbg4 {
background: #819FF7;
height: 50px; width: 210px;
vertical-align: top;
position: relative;
padding: 10px;
font-family: sans-serif;
font-size: 13px;
}

#pa-kahlan h2 {
position: absolute;
top: -20px;
width: 100%; text-align: center;
font-size: 22px;

overflow: hidden;
margin: 0; padding: 0;
font-style: italic;
}

.content-over {
height: 350px; max-width: 240px;
padding-right: 15px;
overflow-y: auto;
}

.content-over2 {
height: 150px; max-width: 800px;
padding-right: 15px;
overflow-y: auto;
}

.content-over3 {
height: 155px; max-width: 240px;
padding-right: 15px;
overflow-y: auto;
}

.content-over4 {
height: 100px; max-width: 800px;
padding-right: 15px;
overflow-y: auto;
}

.content-over5 {
height: 10px; max-width: 390px;
padding-right: 15px;
overflow-y: auto;
}


.nouveautes span {
display: block;
border-bottom: 1px dotted purple;
padding-bottom: 3px; margin-bottom: 3px;
color: purple;
}

.nouveautes p {
margin-bottom: 20px;
}

</style>
<div id="pa-kahlan">

<table style="width: 800px;">

<tbody>

<tr>

<td style="padding-top: 15px; width: 240px;" class="withbg" rowspan="3">

<h2>
Calendrier
</h2>

<div class="content-over nouveautes ">
<span>23 janvier</span> <br />SORTIE 1<br /><br />SORTIE 2<br /> <br />SORTIE 3<br /><br />SORTIE 4<br /><br />SORTIE 5<br /> <br />SORTIE 1<br /><br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /><br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br /> <br />SORTIE 1<br />
</div>

</td>

<td colspan="2" style="padding-top: 30px; width: 800px;" class="withbg4">

<h2>
Bienvenue
</h2>

<div class="content-over2">

<p>
TEXTE DE BIENVENUE - TEXTE DE BIENVENUE - TEXTE DE BIENVENUE - TEXTE DE BIENVENUE - TEXTE DE BIENVENUE - TEXTE DE BIENVENUE - TEXTE DE BIENVENUE TEXTE DE BIENVENUE - TEXTE DE BIENVENUE - TEXTE DE BIENVENUE - TEXTE DE BIENVENUE - TEXTE DE BIENVENUE - TEXTE DE BIENVENUE -
</p>

</div>

</td>

<td class="withbg" style="padding-top: 15px; width: 240px;" rowspan="0">

<h2>
Sorties
</h2>

<div class="content-over3">
<br />SORTIE 1<br /><br />SORTIE 2<br /> <br />SORTIE 3<br /><br />SORTIE 4<br /><br />SORTIE 5<br />
</div>

</td>

</tr>

<tr>

<td class="withbg3" style="padding-top: 12px; padding-bottom: 0px; width: 800px;" colspan="2">

<h2>
Team
</h2>

<div class="content-over4">

</div>

</td>

<td style="padding-top: 15px; width: 240px;" class="withbg" rowspan="2">

<h2>
Avancement
</h2>

<div class="content-over3">
<br />SORTIE 1<br /><br />SORTIE 2<br /> <br />SORTIE 3<br /><br />SORTIE 4<br /><br />SORTIE 5<br /> <br />SORTIE 1<br /><br />SORTIE 2<br /> <br />SORTIE 3<br /><br />SORTIE 4<br /><br />SORTIE 5<br />
</div>

</td>

</tr>

<tr>

<td class="withbg2" style="padding-top: 12px; width: 370px;">

<h2>
Partenaires
</h2>

<div class="content-over5">
<br />SORTIE 1<br />
</div>

</td>

<td class="withbg2" style="padding-top: 12px; width: 280px;">

<h2>
Suivez-nous
</h2>

<div class="content-over5">
<br />SORTIE 1<br /><br />SORTIE 2<br /> <br />SORTIE 3<br /><br />SORTIE 4<br /><br />SORTIE 5<br />
</div>

</td>

</tr>

</tbody>

</table>

</div>

Si quelqu'un pouvait m'aider, ce serait super ! =)

Merci d'avance !


Dernière édition par Tsuki59 le Jeu 24 Mar 2016 - 21:39, édité 1 fois

Tsuki59
Nouveau membre

Messages : 10
Inscrit(e) le : 19/03/2016

http://jpopjapan.forumactif.org/
Tsuki59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil - Problème d'affichage différent sur Chrome et Firefox

Message par Lixyr le Dim 20 Mar 2016 - 23:33

Bonjour,

C'est un truc tout bête :

<td class="withbg" style="padding-top: 15px; width: 240px;" rowspan="0">

<h2>
Sorties
</h2>

<div class="content-over3">
<br />SORTIE 1<br /><br />SORTIE 2<br /> <br />SORTIE 3<br /><br />SORTIE 4<br /><br />SORTIE 5<br />
</div>

</td>

Il faut enlever le rowspan="0", ça corrige le soucis sur Firefox.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Codage page d'accueil - Problème d'affichage différent sur Chrome et Firefox

Message par Tsuki59 le Jeu 24 Mar 2016 - 21:38

Aah d'accord ! Effectivement un truc tout bête ^^'

Merci beaucoup pour ton aide !

Tsuki59
Nouveau membre

Messages : 10
Inscrit(e) le : 19/03/2016

http://jpopjapan.forumactif.org/
Tsuki59 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum