5568 sujets

Sémantique web et HTML

[Résolu] Problème de compatibilité html5/css3 sur IE

Bonjour,

Tout d'abord mille excuses de poster mon souci ici mais j'ai eu beau essayer d'appliquer toutes les solutions de ce site mais je n'y arrive pas.

Je dois aussi dire que j'apprends en ce moment même le css3/html5 et qu'il est donc très possible que j'ai la solution sous les yeux et que j'arrive à ne pas la voir.

Donc mon souci est le suivant, ma page s'affiche bien sous chrome et firefox mais pas sous IE 7,8 (pour IE9 je sais pas il faut que je le télécharge) :

Sur cette adresse url vous pourrez voir mon souci :

http://www.viva-brasil.eu/accueil.php

Dans ma page en html, j'ai utilisé les balises comme <nav> <section> etc ...
normal c'est du html5 mais dans une <section> j'ai mis en inline-block les balises
<article> et <aside> cela marche très bien sur chrome (logique) mais pas sous IE7
que je possède. Sous IE7, elles se mettent l'une en dessous de l'autre alors que dans une autre <section> en inline-block grâce au petit script ci-dessous cela marche bien :

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


Pas logique selon moi car cela devrait avoir un impact sur l'ensemble de la page.
J'ai aussi pensé à la largeur des blocks mais toujours rien.

Ensuite j'ai mis ça :

<!--[if lte IE 7]>
<link rel="stylesheet" href="style_ie.css" type="text/css"/>
<![endif]-->


Le chemin est bon car placé dans l'arborescence OVH juste après le www.

Voici son code à ce fichier CSS (style_ie.css) :


article
{
display: inline;
zoom : 1;
}

aside
{
display: inline;
zoom : 1;
}

img
{
border : none;
}


Donc voilà je suis perdu. Je sens que je vais me dire et oui purée mais là je sèche.

Ah oui voici le script CSS3 du fichier style.css :


/* Header */

header
{
background: url('images/separateur.png') repeat-x bottom;
}

#titre_principal
{
display: inline-block;
}

header h1
{ 
font-family: 'BallparkWeiner', serif;
font-size: 2.5em;
font-weight: normal;
}

#logo, header h1
{
display: inline-block;
margin-bottom: 0px;
vertical-align: middle;

}

em
{
font-style : normal;

}

p
{

vertical-align: top;
font-family: Dayrom, serif;
margin-left : 15px;
font-size: 0.6em;
margin-top: 0px;
font-weight: normal;
}/* Eléments principaux de la page */

/* Bannière */

#banniere_image
{
margin-top: 10px;
height: 200px;
border-radius: 5px;
background: url('images/baniere-viva-brasil-2.jpg') no-repeat;
position: relative;
box-shadow: 0px 4px 4px #1c1a19;
margin-bottom: 15px;
}

#banniere_description
{
position: absolute;
bottom: 0;
border-radius: 0px 0px 5px 5px;
width: 99.5%;
height: 33px;
padding-top: 15px;
padding-left: 4px;
background-color: rgb(24,24,24); /* Pour les anciens navigateurs */
background-color: rgba(24,24,24,0.8);
color: white;
font-size: 0.8em;
}

.bouton_rouge
{
display: inline-block;
height: 25px;
position: absolute;
right: 5px;
bottom: 5px;
background: url('images/fond_degraderouge.png') repeat-x;
border: 1px solid #760001;
border-radius: 5px;
font-size: 1.2em;
text-align: center;
padding: 3px 8px 0px 8px;
color: white;
text-decoration: none;
}

.bouton_rouge img
{
border: 0;
}

/* Navigation */

/* Navigation */



#menu{
width: 895px;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #706B64;
background: -moz-linear-gradient(#444, #706B64);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #706B64),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #706B64);
background: -o-linear-gradient(#444, #706B64);
background: -ms-linear-gradient(#444, #706B64);
background: linear-gradient(#444, #706B64);
-moz-border: double;
border: double;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}

#menu a{
float: right;
height: 25px;
padding: 0 25px;
color: #FFF;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}

#menu li:hover > ul{
display: block;
}

/* Sous-menu */

#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}

#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}

#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}

#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}

#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

/* Rétablissement du flottement */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

body
{
background: url('images/fond_jaune.png');
font-family: 'Trebuchet MS', Arial, sans-serif;
color: #181818;
}

#bloc_page
{
width: 900px;
margin: auto;
}

section h1, footer h1, nav a
{
font-family: Dayrom, serif;
font-weight: normal;
text-transform: uppercase;

}

/* Corps */

article, aside
{
display: inline-block;
vertical-align: top;
text-align: justify;
}

article
{
width: 625px;
margin-right: 15px;
}



.ico_categorie
{
vertical-align: middle;
margin-right: 8px;
}

article p
{
font-size: 0.8em;
}

#publicite_google_468x60
{

text-align : center;
margin-top : 50px;
}



aside 
{
position: relative;
width: 235px;
background-color: #706b64;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 10px;
color: white;
font-size: 0.7em;
text-align : center;

}

#taille_paragraphes_aside
{
font-size: 1.1em;
margin-bottom : 50px;
}




#fleche_bulle
{
position: absolute;
top: 100px;
left: -12px;
}

.photo_fetes_latinos
{
text-align: center;
}

.photo_fetes_latinos img
{
border: 1px solid #181818;
}

aside img
{
margin-right: 5px;
}

.les_pays

{

width : 900px;
height : 220px;


}



.pays
{

display: inline-block;
vertical-align: top;
margin-left : 15px;
position: relative;
left: 0px;
top: 0px; 
width : 200px;
margin-top : 25px;
background-color: none;
border-radius: 5px black solid;
text-align : center;

}



.titre_section_2

{

position: relative;
left: 0px;
top: 0px; 
text-align : center;
font-family: Dayrom, serif;
font-weight: normal;
font-size : 1em;
text-transform: uppercase;

}

.photo_drapeau

{

display : block;
position: relative;
left: 25px;
top: 0px; 
border: 1px solid #181818; 
text-align : center;
width : 150px;
height : 100px;

}	

.texte_drapeau

{

position: relative;
left: 10px;
top: 5px; 
text-align : center;
font-size : 0.72em;
width : 150px;
height : 10px;

}	


#moteur-recherche_2, #moteur-recherche

{
display: inline-block;
vertical-align: top;
text-align: justify;

}	


#moteur-recherche

{
width : 400px;
height : 350px;
margin-bottom : 50px;
}	

#moteur_recherche_2

{
width : 400px;
height : 350px;
margin-bottom : 50px;
}	

/*Fin du css pour le corps de texte*/

/* Footer */

footer
{
background: url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top;
padding-top: 25px;
}

footer p, footer ul
{
font-size: 0.8em;
}

footer h1
{
font-size: 1.1em;
text-align : center;
}

#tweet, #mes_photos, #mes_amis
{
display: inline-block;
vertical-align: top;
}

#tweet
{
width: 28%;
}

#mes_photos
{
width: 35%;
}

#mes_amis
{
width: 31%;
}

#mes_photos img
{
border: 1px solid #181818;
margin-right: 2px;
}

#mes_amis ul
{
display: inline-block;
vertical-align: top;
margin-top: 0;
width: 48%;
list-style-image: url('images/ico_liensexterne.png');
padding-left: 2px;
}

#mes_amis a
{
text-decoration: none;
color: #760001;
}
/*Fin css pour le footer (pied de page)*/

/* Définition des polices personnalisées */

@font-face
{
font-family: 'BallparkWeiner';
src: url('polices/ballpark.eot');
src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
url('polices/ballpark.woff') format('woff'),
url('polices/ballpark.ttf') format('truetype'),
url('polices/ballpark.svg#BallparkWeiner') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face
{
font-family: 'Dayrom';
src: url('polices/dayrom.eot');
src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
url('polices/dayrom.woff') format('woff'),
url('polices/dayrom.ttf') format('truetype'),
url('polices/dayrom.svg#Dayrom') format('svg');
font-weight: normal;
font-style: normal;
}


Merci d'avance j'aimerai rendre cela compatible pour tous les navigateurs

Ionel
Modifié par gestou (16 May 2013 - 01:59)
Ton code html n'est pas bon. Valide le avec le validateur du w3c.
Tu verra il manque une balise de fermeture </p>. C'est elle qui te crée le problème.
Modifié par benj (16 May 2013 - 03:28)
Merci énormémemnt.

Je bossais dessus et me disais que cela devait venir du code html suite à de nombreux tests sur differents navigateurs et surtout du au fait que le même cas dans la page ne causait pas le même souci.

Mais alors le </p> jamais j'aurai trouvé.

Avant de clore le topic puis je te demander c'est quoi ce validateur w3c ?

ca sert à quoi?
Sujet clos
Aller à