Problème overflow:hidden sur plusieurs navigateurs
Bonjour,
Je crée actuellement mon propre site web. Je rencontre un problème en créant un footer sur Mozilla Firefox et Internet Explorer, Google Chrome fonctionne (code HTML / CSS en bas de page).
Ci-dessous les explications détaillées :
Google Chrome :
Capture d'écran : ici
Le copyright est au-dessus des liens en-dessous du background, c'est le résultat que l'on doit avoir.
Mozilla Firefox :
Capture d'écran : ici
Absence du background, mais la position du copyright et des liens est correcte.
Internet Explorer :
Capture d'écran : ici
Capture d'écran n°2 : ici
Sur la première capture d'écran, le copyright et au-dessus du background alors qu'il devrait être en-dessous.
Sur la deuxième capture d'écran, tout est décalé lorsqu'on est en train de redimensionner la fenêtre, puis à un certain redimensionnement, l'effet de la capture n°1 se produit.
Code HTML / CSS:
Code:
1 2 3 4 5 6
| <div id="footer">
<div id="copy">Copyright © 2010 Ely Prod. Tout droits réservés.
</div>
<div id="menufooter"> <a href="#">A propos</a> | <a href="#">Templates</a> | <a href="#">Contact</a>
</div>
</div> |
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| #footer {
background: #101010 url(bgfooter.png) repeat-x bottom bottom;
width: 100%;
height: 30px;
}
#copy {
width:375px;
height: 30px;
margin-left: 40%;
line-height: 30px;
float: left;
color:#464646;
text-decoration: none;
font-size:10px;
font-weight: bold;
text-shadow: 1px 0px 0px #000000;
overflow:hidden;
}
#menufooter {
float:right;
line-height: 30px;
margin-right: 20px;
color:#464646;
text-decoration: none;
font-size:10px;
font-weight: bold;
text-shadow: 1px 0px 0px #000000;
}
#menufooter a{
color:#464646;
text-decoration: none;
font-size:10px;
font-weight: bold;
text-shadow: 1px 0px 0px #000000;
}
#menufooter a:hover{
color:#464646;
text-decoration: underline;
font-size:10px;
font-weight: bold;
text-shadow: 1px 0px 0px #000000;
} |