Decalages sous IE
terreazur
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
-
Gihef Messages postés 5165 Statut Contributeur -
Gihef Messages postés 5165 Statut Contributeur -
Bonjour,
Je vous expose 3 soucis, liés exclusivement a IE.
1 - J inclue un tableau dans mon bloc central, avec une largeur de 95%. Celui-ci deborde a droite sous IE, alors qu il s ajuste parfaitement sous FF.
2 - Mon menu horizontal reste planté a gauche sous IE alors qu il se centre correctement sous FF.
3 - Si j inclue une page sans CSS, mes blocs gauche, haut et bas restent identiques. Par contre, si j ouvre une page avec CSS (enfin celle que j ai fait comme ca pour le moment) perturbe tout : pas mal d elements se modifient dans mes autres blocs : couleurs, positions, polices.
Mes feuilles de style sont importees independamment pour chaque feuille, et ne devraient donc pas interagir entre elles. De plus les problemes ci dessus ne se declarent que sous IE.
Que faire ? merci de votre aide.
Je vous expose 3 soucis, liés exclusivement a IE.
1 - J inclue un tableau dans mon bloc central, avec une largeur de 95%. Celui-ci deborde a droite sous IE, alors qu il s ajuste parfaitement sous FF.
2 - Mon menu horizontal reste planté a gauche sous IE alors qu il se centre correctement sous FF.
3 - Si j inclue une page sans CSS, mes blocs gauche, haut et bas restent identiques. Par contre, si j ouvre une page avec CSS (enfin celle que j ai fait comme ca pour le moment) perturbe tout : pas mal d elements se modifient dans mes autres blocs : couleurs, positions, polices.
Mes feuilles de style sont importees independamment pour chaque feuille, et ne devraient donc pas interagir entre elles. De plus les problemes ci dessus ne se declarent que sous IE.
Que faire ? merci de votre aide.
3 réponses
Plus distrait c est difficile, je reconnais, et j en suis desolé.
Voici une url : atouttest.ifrance.com
Mon fichier css de la page index :
[CODE]
div.conteneur {background-color:#CCFFCC;}
div.banniere {background-image:url(degradentete.jpg);height:100px;}
.logo {float:left;}
.panier {float:right;}
.tournesol {float:right;}
.haut {width:100%; height:35px; background-color:#CCFFCC;}
.lien:link{color: #006600;text-decoration:none;}
.lien:visited{color: #006600;text-decoration:none;}
.lien:active{color: #006600;text-decoration:none;}
.lien:hover{color: #006600; text-decoration:none;}
ul.menu {padding:7px; font-family:Georgia, Times New Roman, Times, serif;height:20px;margin-left:auto; margin-right:auto; width:100%;}
.menu li {float:left; list-style-type:none; line-height:20px;}
.menu a {display:block;width:105px;margin:0 3px;text-align:center;color:#000000;text-decoration:none;font-size:0.8em;background-image:url(10520.gif);font-weight:bold}
.menu a:hover {background-image:url(10520A.gif);color:#006600; font-weight:bold; text-indent:26px;}
div.gauche {background-color:#CCFFCC;font-family:Georgia, Times New Roman, Times, serif;width:180px;float:left;font-size:0.85em; line-height:8px;}
.table {background-image:url(15025.gif); }
.cell {background-color:#FFFF99; border-bottom:1px solid #F7A60E; border-left:1px solid #F7A60E; border-right:1px solid #F7A60E; line-height:12px;}
div#corps {position:relative; clear:right;font-family:Geneva, Arial, Helvetica, sans-serif;font-size:0.85em; margin-right:0;margin-left:180px;padding:8px;background-color:white;}
div.pied {padding:5px; position:relative; clear:left;font-family:Verdana, Arial, Helvetica, sans-serif;width:100%;line-height:14pt;background-color:#CCFFCC; padding-left:0;}
.tire {clear:both;padding:0 5px;display:block;}
h1, p{margin:0;}
.Style2 {font-weight: bold;color: #000000;font-family: Georgia, Times New Roman, Times, serif;font-size:x-large;}
.Style3 {color: #006600;font-weight: bold;font-style: italic;font-family: Georgia, Times New Roman, Times, serif;font-size:x-large;}
.Style4 {color: #006600}
.Style6 {font-size: medium}
.Style8 {font-family: Arial, Helvetica, sans-serif}
.Style14 {color: #FFFFFF;font-weight: bold;font-size: 11px;}
.Style15 {color: #000000}
.Style16 {font-size: 1em}
.Style17 {font-size: 0.90em}
.Style19 {color: #006600;font-weight: bold;}
.Style20 {font-size: x-small}
[/CODE]
De plus, je cherche a resoudre un autre petit truc : je voudrais que mon div conteneur (qui contient gauche et corps) accepte le background pour ne pas paraitre blanc si le div gauche est plus petit que le div corps.
Voila, merci a tous
Voici une url : atouttest.ifrance.com
Mon fichier css de la page index :
[CODE]
div.conteneur {background-color:#CCFFCC;}
div.banniere {background-image:url(degradentete.jpg);height:100px;}
.logo {float:left;}
.panier {float:right;}
.tournesol {float:right;}
.haut {width:100%; height:35px; background-color:#CCFFCC;}
.lien:link{color: #006600;text-decoration:none;}
.lien:visited{color: #006600;text-decoration:none;}
.lien:active{color: #006600;text-decoration:none;}
.lien:hover{color: #006600; text-decoration:none;}
ul.menu {padding:7px; font-family:Georgia, Times New Roman, Times, serif;height:20px;margin-left:auto; margin-right:auto; width:100%;}
.menu li {float:left; list-style-type:none; line-height:20px;}
.menu a {display:block;width:105px;margin:0 3px;text-align:center;color:#000000;text-decoration:none;font-size:0.8em;background-image:url(10520.gif);font-weight:bold}
.menu a:hover {background-image:url(10520A.gif);color:#006600; font-weight:bold; text-indent:26px;}
div.gauche {background-color:#CCFFCC;font-family:Georgia, Times New Roman, Times, serif;width:180px;float:left;font-size:0.85em; line-height:8px;}
.table {background-image:url(15025.gif); }
.cell {background-color:#FFFF99; border-bottom:1px solid #F7A60E; border-left:1px solid #F7A60E; border-right:1px solid #F7A60E; line-height:12px;}
div#corps {position:relative; clear:right;font-family:Geneva, Arial, Helvetica, sans-serif;font-size:0.85em; margin-right:0;margin-left:180px;padding:8px;background-color:white;}
div.pied {padding:5px; position:relative; clear:left;font-family:Verdana, Arial, Helvetica, sans-serif;width:100%;line-height:14pt;background-color:#CCFFCC; padding-left:0;}
.tire {clear:both;padding:0 5px;display:block;}
h1, p{margin:0;}
.Style2 {font-weight: bold;color: #000000;font-family: Georgia, Times New Roman, Times, serif;font-size:x-large;}
.Style3 {color: #006600;font-weight: bold;font-style: italic;font-family: Georgia, Times New Roman, Times, serif;font-size:x-large;}
.Style4 {color: #006600}
.Style6 {font-size: medium}
.Style8 {font-family: Arial, Helvetica, sans-serif}
.Style14 {color: #FFFFFF;font-weight: bold;font-size: 11px;}
.Style15 {color: #000000}
.Style16 {font-size: 1em}
.Style17 {font-size: 0.90em}
.Style19 {color: #006600;font-weight: bold;}
.Style20 {font-size: x-small}
[/CODE]
De plus, je cherche a resoudre un autre petit truc : je voudrais que mon div conteneur (qui contient gauche et corps) accepte le background pour ne pas paraitre blanc si le div gauche est plus petit que le div corps.
Voila, merci a tous
Bonjour,
Je ne suis pas un spécialiste, mais je commence à m'y intéresser. Je vais donc te proposer quelques pistes.
Dans http://atouttest.ifrance.com/
On peut déjà constater que tu ouvres 10 <div> et que tu en fermes 13, </div>.
Peut-être qu'en équilibrant… ?
Tu écris <div align="center">.
Il serait plus juste d'utiliser <div style="text-align:center">.
Tu pourrais aussi essayer <div style="margin:0 auto;">
Et puis, tant qu'à faire, définis un style pour cette div.
1- Le navigateur accorde peut-être 95 % de la page, pas de la <div> ?
As-tu essayé avec un pourcentage plus petit ?
2- Ton menu ne se centre pas. Peut-être parce que tu ne l'as pas défini ?
Il n'existe pas de #menu. Tu agis sur les <ul>, mais pas de quoi agir sur le menu lui-même. Pas de <div> le contenant.
3- Les différentes pages utilisent-elles les mêmes noms de styles ?
+ En restant puriste, il est préférable d'utiliser un style commençant par # et appelé par id pour les éléments utilisés une seule fois. Par exemple :
div.conteneur —> #conteneur
<div class="conteneur"> —> <div id="conteneur">
Je ne suis pas un spécialiste, mais je commence à m'y intéresser. Je vais donc te proposer quelques pistes.
Dans http://atouttest.ifrance.com/
On peut déjà constater que tu ouvres 10 <div> et que tu en fermes 13, </div>.
Peut-être qu'en équilibrant… ?
Tu écris <div align="center">.
Il serait plus juste d'utiliser <div style="text-align:center">.
Tu pourrais aussi essayer <div style="margin:0 auto;">
Et puis, tant qu'à faire, définis un style pour cette div.
1- Le navigateur accorde peut-être 95 % de la page, pas de la <div> ?
As-tu essayé avec un pourcentage plus petit ?
2- Ton menu ne se centre pas. Peut-être parce que tu ne l'as pas défini ?
Il n'existe pas de #menu. Tu agis sur les <ul>, mais pas de quoi agir sur le menu lui-même. Pas de <div> le contenant.
3- Les différentes pages utilisent-elles les mêmes noms de styles ?
+ En restant puriste, il est préférable d'utiliser un style commençant par # et appelé par id pour les éléments utilisés une seule fois. Par exemple :
div.conteneur —> #conteneur
<div class="conteneur"> —> <div id="conteneur">
