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 :
Sur cette adresse url vous pourrez voir mon souci (sous IE7):
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
Je reviens maintenant à l'essentiel et ce qui intéresse (je l'espère) la plus grande majorité d'entre nous, à savoir l'entre-aide et le partage de connaissances.
)