[RESOLU] Problème de CSS avec IE6

Salut les copains

Je suis en train de refaire le site internet de ma “2e boîte” et j’ai un souci avec le hélas toujours répendu IE6

Allez sur http://www.davidson.fr/website/ qui est la future version du site de la boîte. Si vous y allez avec Firefox, Safari ou IE7, tout marche bien.
Si vous prenez IE6, le menu dégage sous les blocs de texte.

Du coup, je modifie le css pour avoir un template (en fait après ce sera juste le css) spécial IE6. Donc en bas, vous avez un module joomla de sélection de thème. Prenez "consulting_ie6b"
Ca va tout de suite beaucoup mieux sous IE6. MAIS, il reste un truc que je n’arrive pas à corriger: pourquoi le menu dépasse des autres blocs à droite? J’ai beau tester plein de choses, pas moyen de l’aligner à droite

Capture d’écran pour ceux n’ayant pas IE6:

Au passage, une idée aussi de pourquoi ce n’est pas centré (le site en général) sous IE6 alors que les autres navigateurs le centrent bien?

Merci!!

Ou sinon une idée pour que le thème normal, “Consulting”, fonctionne avec tous les navigateurs sans merder sous IE6?
Pour ceux ayant le courage d’installer un joomla 1.0.x, je peux fournir des zip avec les 2 templates.

Bonjour,

Pour le centrage, si tu veux le faire fonctionner également sur ie6 et anterieur, je crois que tu dois utiliser une astuce du genre:

#container {
position:absolute;
left:50%;
width:942px;
margin-left:-471px;
padding:0px;
}

Mais dans ce cas, il va falloir revoir aussi le css de ton footer car le positionnement absolu retire ton container du flux.

Ca je verrai après, mais merci Boolean!
Des idées sinon pour ce *%$£ de menu sous IE6?

Pour le centrage, non ça doit fonctionner simplement avec margin: 0 auto + width, ça vient d’un autre truc.

Pour faire fonctionner ton thème de base dans IE6 :

Tu as un “Doubled float-margin bug”, IE6 double la marge des élements en float. Donc ça devient trop large et ta sidebar passe en bas. Tu peux corriger simplement en mettant les blocs #content et #sidebar en display: inline
Plus d’infos ici : http://www.positioniseverything.net/explor…led-margin.html

Pour ajouter tes fixes pour IE6, l’idéal c’est de les mettre dans un css séparé avec un commentaire conditionnel :

<!--[if lt IE 6]>
 <link rel="stylesheet" href="ie6.css" type="text/css" />
 <![endif]-->

J’ai testé vite fait ça ne marche pas encore, là faut que je parte mais je regarde plus en détail cet aprem
Sinon il me suffit dans le css pour ie de diviser ces margins par 2 non? :slight_smile:

Ben je veux bien te croire mais j’ai ie6 et j’ai beau réduire le code au strict minimum et le résultat est le même :crying:
cf fichier joint.

… Et étrangement, avec ma solution, ça marche :slight_smile:

Donc j’aimerais bien que tu m’expliques…

C’est parce que tu n’as pas spécifié de doctype, donc c’est rendu en quirks mode, il faut être au moins en xhtml transitionnal pour que ça fonctionne. Si tu asjoutes ça dans ton exemple, ça fonctionnera:

[code]

[/code]

Si tu mets une marge de 20px et de 10px pour IE6, le jour où tu voudras la changer, tu devras la changer à 2 endroits. C’est pas une bonne façon de faire. Avec display:inline, le bug est fixé.

Merci de ne pas m’avoir laissé mourir idiot :slight_smile:

Bon pour la sidebar qui passe en bas avec le template de base, c’était pas double margin, c’est .moduletable qui est trop large. Soit tu changes le table width=« 100% », soit tu enlèves les padding-left et right de 6px, soit encore mieux, tu refais ça proprement en ul/li :slight_smile:

Et pour le problème de centrage c’est aussi un problème avec le doctype, IE6 n’aime pas du tout avoir quelque chose avant, sinon il repasse en quirks. Il faut enlever ceci et ce sera centré :

<?xml version="1.0" encoding="iso-8859-1"?>

[quote=“cedric, post:7, topic: 47564”]C’est parce que tu n’as pas spécifié de doctype, donc c’est rendu en quirks mode, il faut être au moins en xhtml transitionnal pour que ça fonctionne. Si tu asjoutes ça dans ton exemple, ça fonctionnera:

[code]

[/code]

Euh regarde bien la 1e ligne quand tu fais afficher la source. Ca y est (à part la précision de la langue dans la balise html)

Si tu mets une marge de 20px et de 10px pour IE6, le jour où tu voudras la changer, tu devras la changer à 2 endroits. C’est pas une bonne façon de faire. Avec display:inline, le bug est fixé.[/quote]

Oki

[quote=“cedric, post:9, topic: 47564”]Et pour le problème de centrage c’est aussi un problème avec le doctype, IE6 n’aime pas du tout avoir quelque chose avant, sinon il repasse en quirks. Il faut enlever ceci et ce sera centré :

love

Ca a TOUT corrigé d’un coup. Merci à vous tous!