Problème de CSS sous IE6

Question

Bonjour,

Je rencontre un problème de CSS sous IE6 (cela marche parfaitement bien sous IE7 et sous FireFox).
Pourriez vous jeter un coup d'œil et me dire ce que vous en penser ?
******************
CSS:

* {
padding:0;
margin:0;
list-style:none;
border:0;
}

body {
}

#header {
background:#000;
width:100%;
height:12em;
position:relative;
}

#masthead {
position:relative;
width:73em;
margin:0 auto;
padding:1em 0 5.8em 40em;
height:5.2em;
}

#masthead ul {
position:absolute;
bottom:0;
z-index:0;
}

#masthead li {
float:left;
margin-right:20px;
background:#D8ED46 url(../images/nav_over.gif) bottom repeat-x;
}

#masthead li a {
background:transparent url(../images/nav_over_left.gif) top left no-repeat;
display:block;
}

#masthead li:hover {
background:#D8ED46 url(../images/nav_under.gif) bottom repeat-x;
}

#masthead li a strong {
padding:0.5em 20px 0.5em 0;
margin-left:20px;
display:block;
background:transparent url(../images/nav_over_right.gif) top right no-repeat;
}

#masthead img {
position:absolute;
left:0;
top:1em;
}

#flag {
position:relative;
float:right;
margin-top:8em;
}

#flag img{
position:relative;
float:right;
outline:0;
margin-left:0.8em;
}

#masthead .slogan {
color:#CF0;
position:absolute;
bottom:0.2em;
left:5em;
margin:0;
font-weight:bold;
font-size:1.3em;
}

#masthead li a {
font-size:1.3em;
color:#000;
text-decoration:none;
}

******************
HTML :
<div id="header">
<div id="masthead">
<a href="#"><img src="/toto.gif"/></a>
<div class="slogan">La maison de toto !!</div>
<ul>
<li><a href="#"><strong>toto</strong></a></li>
<li><a href="#"><strong>maison</strong></a></li>
</ul>
<div id="flag">
<a href="#" /><img src="/fr.gif" alt="Fr" title="fr"/></a>
<a href="#" /><img src="/us.gif" alt="En" title="en"/></a>
</div>
</div>
</div>

Merci de votre aide :-)

Afficher la suite

Groarh · Answer

J'ai pas IE6, peux-tu décrire le problème ?

bono92 · Answer

pour mieux illustrer mes propos : 
Schéma sous Firefox :

  -----------
  | toto.gif |
  -----------
  La maison de toto !!               toto   Maison                   fr.gif  en.gif


Schéma sous IE6 :

  

                                                                    fr.gif  en.gif

Groarh · Answer

C'est peut-être un peu abuser de mettre 73em de largeur pour #masthead... As-tu lu ceci ?

Perso sous FF je ne voyais pas les drapeaux, à moins de défiler la page vers la droite.. Si jamais IE6 défile la page tout à droite et fait disparaître l'ascenseur horizontal (il a toujours du mal à gérer ça), ça expliquerait pourquoi tes autres éléments sont invisibles : ils sont trop à gauche !

bono92 · Answer

Hello,
Ce n'est pas la taille de texte que je gère avec des em mais plutôt la taille de la page.

Qu'es ce que tu me recommande de modifier ?

Groarh · Answer

Bah j'ai viré carrément la règle de largeur de #masthead, puisque  #header en a déjà une, et ça avait l'air de marcher mieux. Mais comme j'ai toujours pas IE6, je peux pas vérifier... :$

bono92 · Answer

j'ai envie que #masthead face 73% du #header et qu'il soit center. Comment faire ? :-)

Groarh · Answer

Tu mets :width : 73%;
margin : auto;
Et voilà :)

Edit : enfin ça dépend, si tu veux que le texte soit centré c'est text-align : center, et tu peux mettre les deux : centrer le bloc et le texte.

bono92 · Answer

merci pour tous ses détails.

Autre question, comment faire pour limiter le retressissement de #masthead.
En gros, ca sera un min-width

Problème de CSS sous IE6

8 réponses

Votre réponse

Discussions similaires