[résolu]Pbme background color:impossible ss ie7/8 et ok sous ff/Chrome

bonjour,

Merci au forum avant tout..(on ne le dit jamais assez...)

J'essaie de mettre un fond de couleur derriere une carte de google maps. J'ai crée pour cela une div qui contient le code de la carte (.grid_9_carte).

Cela fonctionne sous ff et chrome mais pas sous ie7 (seulement sur la partie droite).

J'ai pu voir des hacks différents mais des essais ne donnent rien..

Voici l'url :http://vit.mlc33.com/pages/localisation.html
Voici le code html du coeur de page concerné :

<div class="grid_9">

<h3 align="center" class="headerlinksPnoire Style1">Pr&eacute;sent sur Bordeaux et la communaut&eacute; urbaine</h3>

   <div class="grid_9_carte">
      <iframe width="425" height="350" frameborder="" scrolling="no" marginheight="" marginwidth="0" src="http://maps.google.fr/maps/ms?ie=UTF8&amp;hl=fr&amp;msa=0&amp;msid=113234621653658846578.000453dff81669168a3b9&amp;ll=44.776504,-0.574411&amp;spn=0.002666,0.00456&amp;z=17&amp;iwloc=000453e005160a102002e&amp;output=embed"></iframe> 
    </div>

    <div align="center"><br />
    <small>Afficher <a href="http://maps.google.fr/maps/ms?ie=UTF8&amp;hl=fr&amp;msa=0&amp;msid=113234621653658846578.000453dff81669168a3b9&amp;ll=44.776504,-0.574411&amp;spn=0.002666,0.00456&amp;z=17&amp;iwloc=000453e005160a102002e&amp;source=embed" style="color:#0000FF;text-align:left">ml conseil</a> sur une carte plus grande</small></div>
  </div>

Voici le code css :

/* Grid >> 2 Columns
----------------------------------------------------------------------------------------------------*/
    .container_12 .grid_1 {
	width:50px;
}
.container_12 .grid_2 {
	width:130px;
}
.container_12 .grid_3 {
	width:210px;
}
.container_12 .grid_4 {
	width:290px;
}
.container_12 .grid_5 {
	width:370px;
}
.container_12 .grid_6 {
	width:450px;
}
.container_12 .grid_7 {
	width:530px;
}
.container_12 .grid_8 {
	width:610px;
}
.container_12 .grid_9 {
	width:690px;
}
.container_12 .grid_10 {
	width:770px;
}
.container_12 .grid_11 {
	width:850px;
}
.container_12 .grid_12 {
	width:930px;

#content .grid_9_carte {
	background-color: green;
	height: 350px;
	width: 650px;
}

Merci beaucoup pour votre aide..

ici le point de départ du problème (le fond vert n'apparaît pas à gauche de la carte)


Modifié par moz45 (23 Aug 2010 - 16:47)

J'ai eu un embryon de réponse sur un autre forum.

Le rajout d'une classe sur l'iframe :

#content .grid_9_carte iframe {
	    margin-left:30px;
} 

Erratum : L'affichage défectueux est sous Ie 8 (ma version) et Ie 7 .



Url :

http://vit.mlc33.com/pages/localisation.html
Modifié par moz45 (21 Aug 2010 - 08:50)

Hello

Je ne m'y connais pas des masses en iframe, mais peut être qu'il y a conflit avec padding sur IE, tu as essayé de remplacer ton

#content .grid_9 iframe {
padding-left:140px;
}

Par un

#content .grid_9 iframe {
margin-left:140px;
}

Je te remercie pur ton message, mais malheureusement, cela ne change rien à l'affichage sous ie 8/7, en revanche cela décale vers la droite d'autant sous ff (voir image jointe).


J'ai donc remis le code à l'étape précédente...
Modifié par moz45 (21 Aug 2010 - 10:40)

Salut,

tu n'as pas fait ce que te conseillait InpIxelItrust : supprimer le padding-left existant et le remplacer par un margin-left.

Bonjour,

Mon conseil: ne pas attribuer de styles à l'élément IFRAME en dehors des dimensions (hauteur et largeur) et de la bordure. Si l'élément doit être décalé, utiliser du padding dans le conteneur par exemple.

Heyoan a écrit :

tu n'as pas fait ce que te conseillait InpIxelItrust : supprimer le padding-left existant et le remplacer par un margin-left.

Merci à Heyoan mais j'ai fait justement ce que InpIxelItrust me conseillé de faire et le résultat est dans la capture d'écran précédente du 21 aout. Cela ne fonctionne pas.

Florent V. a écrit :

Mon conseil: ne pas attribuer de styles à l'élément IFRAME en dehors des dimensions (hauteur et largeur) et de la bordure. Si l'élément doit être décalé, utiliser du padding dans le conteneur par exemple.

Merci à Florent, j'ai enlevé le style à Iframe.

url : http://vit.mlc33.com/pages/localisation.html

Ai attribué un margin ou un padding (ai essayé les 2), mais cela me décale la carte, certes, mais avec toujours cette marge blanche à gauche (voir capture) et cela uniquement sous IE (7/8).



Merci encore pour les suggestions..
Modifié par moz45 (23 Aug 2010 - 08:40)

Hello,

moz45 a écrit :
Merci à Heyoan mais j'ai fait justement ce que InpIxelItrust me conseillé de faire et le résultat est dans la capture d'écran précédente du 21 aout. Cela ne fonctionne pas.

Hem... j'avais bien sûr vérifié avant de te faire cette remarque. Mais on va dire qu'à ce moment là tu avais à nouveau changé ton code car tu n'obtenais pas ce que tu voulais.

moz45 a écrit :
Merci à Florent, j'ai enlevé le style à Iframe.

Sauf que cette fois-ci c'est toujours en ligne et donc je te redis : non tu ne l'as pas fait. En me servant de l'outil IE Developer Toolbar voilà ce que ça donne :



On voit encore un padding-left:140px sur l'élément IFRAME.
Modifié par Heyoan (23 Aug 2010 - 09:12)

moz45 a écrit :


Merci à Heyoan mais j'ai fait justement ce que InpIxelItrust me conseillé de faire et le résultat est dans la capture d'écran précédente du 21 aout. Cela ne fonctionne pas.

Bah euh je viens d'enregistrer ta page sur mon pc, et bidouiller un bout de css interne pour mettre en application ce que je t'ai conseillé ce qui donne :

#content .grid_9 iframe {
padding-left:0px !important; /*passer par dessus ton css à  toi */
margin-left:100px !important; /*décaler de 100px */
}

Voici le screen sous IE, ça fonctionne très bien (je pense que tu as du oublier de lui coller un padding à zéros )




Et la technique de florent fonctionne chez moi aussi si je met le padding à zéros de ton iframe
Modifié par InpIxelItrust (23 Aug 2010 - 09:26)

Bonjour,

Merci à Heyoan, et excuse pour la confusion, je me suis sans doute pris les pieds dans le tapis !

Merci encore à InpIxelItrust pour ton explication plus que détaillée vu que tu m'as fait carément le boulot ! Sympa.

J'ai modifié donc pour résumer l'ensemble (pour les débutants comme moi...) :

Dans le document html, j'ai crée une div (class) appelée "carte" (pour faire un fond vert pale)

<div class="carte"><iframe ..code googlemaps..</iframe></div>

et c'est tout ! (je crois que c'est là où je me suis trompé au départ en créant une div supplémentaire), l'appel du style iframe se fait automatiquement sans créer une balise supplémentaire.

Dans le document css

J'ai créé le style correspond à la Div du fond de carte vert:

#content .grid_9 .carte {
	background-color: #CDD7BC;
	height: 400px;
	width: 690px;
}

et pour l'iframe qui correspond au script de la carte google maps :

#content .grid_9 iframe {
	padding-left:0px !important; /*passer par dessus ton css à  toi */
	margin-left:20px !important; /*décaler de 100px */
	margin-top: 20px;
}

Et voilà ..merci bcp pour cette aide .

Le résultat est ici : http://vit.mlc33.com/pages/localisation.html
Modifié par moz45 (23 Aug 2010 - 16:42)