Compatibilité sous IE

Question

vinux

2 Jan 2007 à 14:30

Bonjour,
J'ai un site codé en Xhtml CSS (valide xhtml) qui fonctionne parfaitement sous Firefox mais j'ai encore quelques déboires sous IE 6.0 (non testé sous IE7) malheureusement. En effet j'ai un petit menu à gauche de mon site et sous IE j'ai un problème de transparence (avec un fond bleu qui s'affiche), de plus la news du site est décalée trop vers le bas.
URL de mon site : http://www.kelio.org
Voici ma feuille de style :

/* Kelio Design ! Codé par Mogui - Adapté pour IE6 par @urelU$ */

/* ID */
#cadre {
width: 875px;
min-height: 100%;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

/* Head */
#head {
width: 875px;
height: 148px;
}

#head_g {
width: 370px;
height: 148px;
background-image: url(image/head_g.png);
background-repeat: no-repeat;
margin-right:-370px;/* un -370px pour qu'il n'y est plus d'espace dans internet explorer*/
float: left;
}

#head_d {
width: 502px;
height: 148px;
background-image: url(image/head_d.png);
background-repeat: no-repeat;
margin-left: 370px;/* suppession des padding que l'on retrouve dans le cose html de l'image*/
}

#head_pub {
padding-top: 30px;
padding-right: 30px;
border: 0px;
}

/* Sous-Head */
#shead {
width: 875px;
height: 51px;
padding:0px;
margin:0px;
margin-bottom:0px !important; /* Pour les autres navigateurs qu'ie */ 
margin-bottom:-2px;/* pour ie6  placement du bloc pour qu'il n'y ai plus de blanc*/
}

#shead_g {
width: 155px;
height: 51px;
background-image: url(image/shead_g.png);
background-repeat: no-repeat;
margin-right:-155px; /* de meme pour enlever le blanc de ie */
float: left;
}

#shead_d {
width: 720px;
height: 51px;
background-image: url(image/shead_d.png);
background-repeat: no-repeat;
margin-left: 155px;
}

/* Sous Sous-Head */
#sshead {
width: 875px;
height: 29px;
background-image: url(image/sshead.png);
background-repeat: no-repeat;
}

#sshead_inc {
margin-left: 560px;
width: 285px;
height:25px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
line-height: 25px;
}


/* Body */
#body {
width: 815px;
min-height: 220px;
background-image: url(image/body.png);
background-repeat: repeat-y;
padding-left: 30px;
padding-right: 30px;
padding-top: 16px;

}

/* Footer */
#sfooter {
width: 825px;
height: 25px;
background-image: url(image/body.png);
background-repeat: repeat-y;
padding-left: 25px;
padding-right: 25px;
text-align: center;
font-size: 10px;
padding-top: 16px;
}
#footer {
width: 875px;
height: 36px;
background-image: url(image/footer.png);
background-repeat: no-repeat;
}

/* Police par defaut */

body {
background-color: #70746a;
background-image: url(image/background.png);
background-repeat: repeat;
font-family: Calibri, Verdana, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
color: #333333;
height: 100%;/*pour etre sur que la hauteur de la page soit bien de toute la hauteur de l'écran*/
margin: 0px;
padding: 0px;
}


form {
border: 0;
padding: 0;
margin: 0;
}

p {
margin: 0;
padding: 0;
text-indent: 25px;
}

h1, h2, h3, h4 {
margin: 0;
padding: 0;
text-decoration: underline;
margin-bottom: 15px;
margin-top: 15px;
margin-left: 35px;
}

ul, li {
border: 0;
padding: 0;
margin: 0;
}

ul {
padding-top: 10px;
}

a {
color:#006633;
text-decoration: none;
}

a:hover {
text-decoration: blink;
border-bottom: #006633 1px solid;
}

/* Element perso */
.menu_total {
width: 183px;
float: left;
margin-left: -60px;
padding-left:0px !important;/* Pour les autres navigateurs qu'ie */ 
padding-left:60px;/* pour ie6  placement du bloc pour qu'il se place a gauche du bloc*/
text-align: center;
}

/* Menu de gauche */
.menu_head {
width: 183px;
height: 17px;
background-image: url(image/cd_head.png);
background-repeat: no-repeat;
padding-top: 16px;
font-size: 1.1em;
}
.menu_corps {
width: 123px;
min-height: 60px;
background-image:url(image/cd_body.png);
background-repeat: repeat-y;
padding-left: 30px;
padding-right: 30px;
text-align: left;
}
.menu_footer {
width: 183px;
height: 10px;
background-image:url(image/cd_footer.png);
background-repeat: no-repeat;
}

.login_form {
width: 90px;
border: 0;
border-bottom: #006633 1px solid;
background-image:url(image/sbt_lg.png);
background-repeat: repeat-x;
text-align: center;
color:#006633;
}

.login_bouton {
width: 27px;
height: 24px;
background-image: url(image/sshead_b2.png);
background-repeat: no-repeat;
border: 0;
}

.News_total {
width: 100%;
padding-bottom: 15px;
}

.News_titre {
height: 15px;
line-height: 15px;
width: 100%;
margin-bottom: 5px;
}

.News_contenu {
width: 100%;
margin-bottom: 9px;
}

.News_footer {
width: 100%;
}

.News_footer_g {
width: 50%;
float: left;
height: 15px;
}
.News_footer_d {
width: 50%;
margin-left: 50%;
height: 15px;
text-align: right;
}

.News_commentaire_cadre {
width: 35%;
height: 120px;
color: #006633;
background-color: #e3eed4;
border: #006633 1px solid;
}

.News_commentaire_cadre0 {
width: 20%;
text-align: center;
color: #006633;
background-color: #e3eed4;
border: #006633 1px solid;
}

.News_commentaire_cadre1 {
width: 10%;
text-align: center;
color: #006633;
background-color: #e3eed4;
border: #006633 1px solid;
}

.News_commentaire_total {
width: 100%;
padding-bottom: 17px;
}

.News_commentaire_header {
width: 100%;
font-size: 1.2em;
padding-bottom: 2px;
}

.News_commentaire_body {
text-indent: 0;
}

.error {
text-decoration: blink;
text-align: center;
text-transform: uppercase;
}

Si quelqu'un peut m'aider à résoudre ces problèmes, je lui en remercie par avance Smiley cligne

Skippy1

2 Jan 2007 à 15:54

Hello.

Je suppose que ton image est en PNG24, dans ce cas IE6 et versions antérieures ne gèrent pas cela (ou très mal)
Essaie donc plutôt en gif ou alors il y a des posts qui traite de ce problème

background-image:url(no-image); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='ton_png.png');

Pour ma part cela ne fonctionne pas (mon image est totalement transparent), mais ca peut venir du fait que je dois peut-etre enlever un peu de son opacité à l'image (je teste)

Sinon pour ton image qui se décale sous IE, bah tu as qu'a utiliser la condition !important

A+
Modifié par Skippy1 (02 Jan 2007 - 15:55)

vinux

2 Jan 2007 à 16:04

Merci la solution fonctionne sous IE mais sous firefox je n'ai plus d'image de fond par contre. Comment faire pour que cela fonctionne sous les deux en même temps ?

Merci bien Smiley cligne

Modifié par vinux (02 Jan 2007 - 17:02)

Skippy1

2 Jan 2007 à 16:05

montre ta portion de css, please

AH ben t'as trouvé non ?

Dans ce cas, content pour toi Smiley cligne

Modifié par Skippy1 (02 Jan 2007 - 16:06)

vinux

2 Jan 2007 à 16:10

Skippy1 a écrit :
montre ta portion de css, please

AH ben t'as trouvé non ?

Dans ce cas, content pour toi

Non, je n'ai pas encore totalement trouvé Smiley cligne

Dans la modification cela fonctionne sous IE et FF mais j'ai un petit décalage avec le menu_corps sous IE d'où cela peut venir ?

Merci bien
Modifié par vinux (02 Jan 2007 - 17:01)

masseuro

2 Jan 2007 à 16:34

mon ie6 plante à chaque fois sur ton site qu'est-ce que tu as mis dedans???

vinux

2 Jan 2007 à 16:37

masseuro a écrit :
mon ie6 plante à chaque fois sur ton site qu'est-ce que tu as mis dedans???

J'ai ajouté la prise en charge des images PNG 24 bits (cf. http://support.microsoft.com/kb/294714/fr )

Voilà
Modifié par vinux (02 Jan 2007 - 16:37)

vinux

2 Jan 2007 à 17:00

J'ai presque résolu le problème mais sous IE le corps de mon menu dépasse un peu sur la droite.

.menu_corps {
width: 123px;
min-height: 60px;
background-image:url(image/cd_body.png) !important;
background-image:url(no-image);
background-repeat: repeat-y;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image/cd_body.png', sizingMethod='scale'); 
padding-left: 30px;
padding-right: 30px;
text-align: left;
}

Quelqu'un peut-il m'éclairer là-dessus ?

fvsch

2 Jan 2007 à 17:01

vinux a écrit :
Merci la solution fonctionne sous IE mais sous firefox je n'ai plus d'image de fon par contre. Comment faire pour que cela fonctionne sous les deux en même temps ?

On utilise la version standard dans la CSS principale, et la version spécifique pour IE dans une feuille de style de correctifs pour IE6 et inférieurs (on utilisera pour cela les commentaires conditionnels).

fvsch

2 Jan 2007 à 17:08

vinux a écrit :
J'ai presque résolu le problème mais sous IE le corps de mon menu dépasse un peu sur la droite.

Pas vu ça, par contre il me semble que ton bloc de contenu principal passe à la ligne et ne se positionne pas à côté du menu flottant.

.News_total {
[b]width: 100%;[/b]
padding-bottom: 15px;
}

.News_titre {
height: 15px;
line-height: 15px;
[b]width: 100%;[/b]
margin-bottom: 5px;
}

.News_contenu {
[b]width: 100%;[/b]
margin-bottom: 9px;
}

Les éléments flottants, positionnés ou ayant une dimmension fixe sont dotés du layout dans Internet Explorer Windows (cf. le concept de HasLayout), et perdent la capacité à se « glisser » sous les flottants.

Solution : virer toutes ces largeurs inutiles. Par défaut, un élément de type bloc prendra toute la largeur disponible dans l'élément parent.

vinux

2 Jan 2007 à 17:12

mpop a écrit :

Solution : virer toutes ces largeurs inutiles. Par défaut, un élément de type bloc prendra toute la largeur disponible dans l'élément parent.

En effet cela résous mon second problème, merci de m'avoir éclairé là-dessus Smiley cligne

fvsch

2 Jan 2007 à 17:13

Et si je puis me permettre, ceci est une bêtise affreuse :

.News_titre {
	height: 15px;
}

Si j'agrandis un peu (voire beaucoup) le texte, le bloc de titre garde une hauteur de 15px, tandis que le texte déborde, jusqu'à se superposer au texte qui suit. Le tout devient proprement illisible.

Au passage, le bloc du menu pose exactement le même problème (hauteur fixe, ne s'agrandira pas en fonction de son contenu), de même que la zone du formulaire d'identification (chez moi, il faut réduire la taille du texte pour s'apercevoir qu'il y avait un trait de soulignement pour les champs de saisie).

Autre remarque au passage : pourquoi les zones de l'image map ont-elles des attributs alt vides ? C'est dommage pour l'accessibilité, tout de même.

Bonne continuation. Smiley smile

vinux

2 Jan 2007 à 17:47

mpop a écrit :
Et si je puis me permettre, ceci est une bêtise affreuse :
.News_titre {
	height: 15px;
}
Si j'agrandis un peu (voire beaucoup) le texte, le bloc de titre garde une hauteur de 15px, tandis que le texte déborde, jusqu'à se superposer au texte qui suit. Le tout devient proprement illisible.

Au passage, le bloc du menu pose exactement le même problème (hauteur fixe, ne s'agrandira pas en fonction de son contenu), de même que la zone du formulaire d'identification (chez moi, il faut réduire la taille du texte pour s'apercevoir qu'il y avait un trait de soulignement pour les champs de saisie).

Autre remarque au passage : pourquoi les zones de l'image map ont-elles des attributs alt vides ? C'est dommage pour l'accessibilité, tout de même.

Bonne continuation.

Merci à vous, j'ai modifié ma feuille de style en conséquence et ajouté les balises Alt Smiley cligne

Je cherche maintenant comment résoudre le petit décalage du menu sous IE.

Bonne soirée Smiley cligne

Modifié par vinux (02 Jan 2007 - 17:48)

Sujet clos

CSS et mise en forme, CSS3

Compatibilité sous IE