[résolu]Marge verticale non nulle sous IE avec balise form.

Question

6 Jul 2007 à 20:44

Bonsoir

Je viens encore réclamer votre aide Smiley sweatdrop

La mise en page de mon champ de recherche Google n'apparait pas de la même façon sous FF (OK) et IE6 (décalage vertical). Et là, je sèche complètement. (Remarquez, il ne m'en faut pas beaucoup Smiley cligne

J'ai remarqué que si je supprime le code relatif à l'insertion du champ de recherche, alors le reste de la mise en page est identique sous les deux navigateurs.

Cette de cette partie de code dont je parle:

<form method="get" action="http://www.google.fr/custom" target="google_window" name="formulaire">
	  <input name="domains" value="http://leblogautomobile.blogs.com" type="hidden">
	  <input name="q" size="18" maxlength="255" value="" type="text">
	  <br>

Voila le code HTML du gabarit:

<!-- sidebar1 -->

<!-- Champ de recherche Google -->

<div id="entete_champ_Google">
          <a href="http://www.google.fr"></a>
</div>

<div id="contenu_champ_Google">
        
          <!-- SiteSearch Google -->
	  <form method="get" action="http://www.google.fr/custom" target="google_window" name="formulaire">
	  <input name="domains" value="http://leblogautomobile.blogs.com" type="hidden">
	  <input name="q" size="18" maxlength="255" value="" type="text">
	  <br>
	  <input name="sitesearch" value="http://leblogautomobile.blogs.com\leblogautomobile" checked="checked" type="radio"><font color="#FFFFFF" size="-1">LeBlogAutomobile</font>
	  <br>
	  <input name="sitesearch" value="" type="radio"><font color="#FFFFFF" size="-1">Web</font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:document.formulaire.submit()"><img src="http://leblogautomobile.blogs.com/leblogautomobile2/files/bouton_go.gif" border="0" height="17" width="28"></a>
	  <input name="client" value="pub-7216170694797181" type="hidden">
	  <input name="forid" value="1" type="hidden">
	  <input name="ie" value="UTF-8" type="hidden">
	  <input name="oe" value="UTF-8" type="hidden">
	  <input name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;" type="hidden">
	  <input name="hl" value="fr" type="hidden">
	  </form>
	  <!-- SiteSearch Google -->
</div>

<div id="bas_titre"></div>

<!-- Liste des dernières notes -->

<div id="entete_menu_notes">A la Une</div>

<div id="menu_notes">
	  <ul id="liste_notes">
                  <MTEntries lastn="10">
	          <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle remove_html="1" generate="1"$></a></li>				
		  </MTEntries>				
          </ul>
</div>

<div id="bas_titre"></div>


<!-- Liste des catégories -->

<div id="entete_menu_notes">Les marques</div>

<div id="menu_marques">
	  <ul id="liste_marques">
		  <MTCategories>
		          <MTBlogIfArchives archive_type="Category">
		          <li><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li>
		                  <MTElse>
		                  <li><$MTCategoryLabel$></li>
		                  </MTElse>
		          </MTBlogIfArchives>
	          </MTCategories>
	  </ul>
</div>
                
<div id="bas_titre"></div>

et le CSS:


a:link { color: #FFFFFF; }
a:visited { color: #FFFFFF; }
a:active { color: #FFFFFF; }
a:hover { color: #FFFFFF; }


#conteneur
{
width: 970px;
background-color: #101010;
margin-left: auto;
margin-right: auto;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/Fond_article.gif) 0 0 repeat-y;
}

#banniere
{
margin: 0;
line-height: 130px;           
height: 130px;
background-color: #101010;
color: #FFFFFF;
font-family: arial;
letter-spacing: .3em;
font-size: 48px;
font-weight: bold;
text-align: left;
padding-left: 15px;
}

#bloc_gauche
{
float: left;
width: 655px;
background-color:#101010;
}

#contenu_bloc_gauche {
margin: 0px 5px 0px 10px;
padding: 0px;
}

.note
{
margin: 0 0 15px 0;
padding: 0px;
background-color: yellow;
}

#titre_note {
margin: 0px;
padding: 10px 10px 5px 10px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/grande_entte_noire_haut.gif) 0 0 no-repeat;
}

h1 {
margin: 0px;
padding: 0px;
font-family: arial;
font-size: 12px;
letter-spacing: .1em;
text-align: left;
font-weight: bold;
color: #FFFFFF;
}

.sous_lignage
{
margin: 0px;
padding: 0px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/sous_ligne_titre_note.gif) 0 0 no-repeat;
line-height: 3px;
height: 3px;
}

.corps_de_note
{
margin: 0px;
padding: 0px;
}

.contenu_corps_de_note
{
font-family: arial;
line-height: normal;
text-align: left;
font-size: 12px;
color: #FFFFFF;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/fond_pub_640x1.gif) top left repeat-y;
}

.contenu_corps_de_note p
{
margin: 0px;
padding: 10px 10px 0 10px;
}

.entry-footer
{
margin: 0 0 20px 0;
padding: 15px 0 0 10px;
height: 30px;
line-height: 30px;
font-family: arial;
line-height: normal;
font-size: 11px;
color: #FFFFFF;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/grand_bas_noir.gif) bottom left no-repeat;
}

.entry-footer_inter
{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 15px;
font-family: arial;
/* line-height: normal; */
font-size: 11px;
height: 30px;
line-height: 30px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/fond_pub_640x1.gif) bottom left repeat-y;
color: #FFFFFF;
}

.entry-footer p
{
margin-top: 0;
margin-bottom: 2px;
}

#bloc_pub_300x250
{
float: left;
width: 315px;
height: 270px;
background-color:#101010;
}

#pub_300x250
{
margin-top: 00px;
margin-left: 5px;
padding-top: 0px;
}

#colonne_droite {
float: right;
width: 135px;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
background-color:#101010;
}

#contenu_colonne_droite {
margin-left: 5px;
margin-right: 10px;
margin-top: 0px;
}

#pub_120x600 {
margin: 0px;
padding-top: 0px;
padding-right; 5px;
padding-bottom: 0px;
padding-left: 0px;
background-color:#101010;
}

#pub_120x600 li {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
}

#colonne_gauche {
float: right;
width: 180px;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-color:#101010;
}

#contenu_colonne_gauche {
margin-left: 5px;
margin-right: 5px;
margin-top: 0px;
}

#entete_champ_Google
{
margin: 0px;
padding: 0px;
line-height: 39px;
height: 39px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/fond_entete_google.gif) 0 0 no-repeat;
}

#contenu_champ_Google
{
margin: 0px;
padding: 5px 5px 1px 15px;
border: solid #686868;
border-width: 0px 1px 0px 1px;    
background-color: #101010;
}

#bas_titre
{
margin-top: 0;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
padding: 0;
height: 10px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/bas_noire.gif) 0 0 no-repeat;
}

#entete_menu_notes
{
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: center;
line-height: 39px;
height: 39px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/entte_noire.gif) 0 0 no-repeat;
font-family: arial;
letter-spacing: .3em;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}

#menu_notes,
#menu_marques
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
font-family: arial;
line-height: normal;
letter-spacing: .1em;
text-align: left;
font-size: 10px;
background-color:#101010;
}

ul#liste_notes,
ul#liste_marques
{
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px; 
background-color:#101010;
border: solid #686868;
border-width: 0px 1px 0px 1px;
}

#liste_notes li,
#liste_marques li
{
list-style-type: disc;
list-style-position: inside;
margin: 0px;
padding-top: 10px;
padding-bottom: 0px;
padding-left: 15px;
padding-right: 5px;
background-color:#101010;
color: #FFFFFF;
}

#liste_notes a,
#liste_marques a
{
text-decoration: none;
line-height: normal;
}

#entete_menu_marque
{
margin-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
font-family: arial;
letter-spacing: .3em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;  
line-height: 39px;
height: 39px;
background-color:#CBCBCB;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/entte_noire.gif) 0 0 no-repeat;
}

#saut
{
clear: both;
width: 970px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
height: 20px;
background-color: #101010;
}

#pied_de_page
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
width: 970px;
background-color:#101010;
font-family: arial;
letter-spacing: .1em;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;  
line-height: 50px;
height: 50px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/fond_pied_de_page.gif) bottom left no-repeat;
}

.comments-open-header,
.comments-open-content,
.comments-open-moderated,
.comments-open-footer,
.comments-header,
.comment-content,
.comment-footer
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0 10px 0 10px;
color: #FFFFFF;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/fond_pub_640x1.gif) 0 0 repeat-y;
}

.séparation
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0 10px 0 10px;
height: 1px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/sparation_640x1.gif) 0 0 repeat-y;
}

#pub468x60
{
margin: 0;
padding: 10px 0 0px 10px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/fond_pub_640x1.gif) 0 0 repeat-y;
}

p
{
margin: 0;
padding: 0 0 0 0px;
}

.module-header1
{
margin: 0;
padding: 8px 7px 4px 11px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/entte_noire.gif) 0 0 no-repeat;
background-color: yellow;
}

.module-content1
{
margin: 0px 0px 20px 0px;
padding: 0px 5px 0px 10px;
background: url(http://leblogautomobile.blogs.com/leblogautomobile/files/fond_170x1.gif) 0 0 repeat-y;

background-color: green;
       	font-family: arial;
        font-size: 10px;
        text-align: left;
}

.module-list1
{
	margin: 0;
	padding: 0;
	list-style: none;
        color: #404040;	
}

.module-list-item1
{
        margin: 10px 0px 10px 0px;
	padding: 0;
	background: none;
}

Si une âme charitable pouvait m'aider Smiley confused

Merci et bonne soirée Smiley smile

Modifié par StephaneLeChat (08 Jul 2007 - 19:49)

fvsch

6 Jul 2007 à 22:09

Bonsoir,

Donc le principe c'est que nous autres intervenants sur le forum avons des machines à la place du cerveau, et sommes capable, en lisant le code posté dans ce message, de visualiser ce que ça donne sur tel ou tel navigateur?

Ça serait bien. Un peu comme dans Matrix, le mec qui lit le code qui défile.

Mais pour revenir à des réalités plus terre-à-terre, est-ce que ça ne serait pas plus simple si on pouvait voir une page en ligne (la page qui pose problème, ou une page de test reproduisant le problème)?

PS: la question est rhétorique, et il est entendu que la réponse est «oui». Smiley cligne

StephaneLeChat

6 Jul 2007 à 23:03

En fait, dans un autre sujet, on m'avait demandé le code Smiley confused

Exemple visible à cette adresse: http://leblogautomobile.blogs.com/exemple/

Merci pour votre aide Smiley smile

StephaneLeChat

8 Jul 2007 à 19:34

Bonsoir

Toujours pas trouvé la solution à mon problème.
Par contre, j'ai identifié que c'est cette ligne de code qui génère le décalage:

<form method="get" action="http://www.google.fr/custom" target="google_window" name="formulaire">

Et même plus précisément la partie:

"form method="get"

Personne n'a vraiment aucune idée de la manière de solutionner ce décalage? Smiley decu

StephaneLeChat

8 Jul 2007 à 19:46

Bon, et bien voilà, c'est résolu Smiley biggrin

Je viens de comprendre quie l'on pouvait affecter un style à une balise form.

avec des marges et paddings nuls, tout est rentré dans l'ordre.

Merci pour votre "aide" Smiley cligne

Sujet clos

CSS et mise en forme, CSS3

[résolu]Marge verticale non nulle sous IE avec balise form.