Decalage div entre IE6 8 et IE 6

Question

takotak

16 Apr 2010 à 18:56

j'ai un pb de décalage entre IE 6 (div décalé vers le bas de la fenetre) et IE 8 (ok)
mais je ne vois pas commentle résoudre malgré les autres posts

Voici le code : (le <div id="content"> est bien positionné mais le <div id="search"> nommé info box est lui en bas de la fenetre au lieu d'être aligné horizontalement à la droite)de l'autre div


 <div id="content">

<img src="html/img/small_g.gif" class="img-left" />
<h1 > Welcome to the official website of XXX XX –
the European Delegates Meeting of XXX</h1>
<p>XXX . More information about XXX at 
<a href="http://www.na.org" target="_blank">www.na.org</a></p>
<h3>The European Delegates Meeting serves for the following communities:</h3>

<h3>Belgium, Bulgaria, <a href="html/edm-croatian-1.htm">Croatia</a>, Czech Republic, 
<a href="html/edm-denmark-1.htm">Denmark</a>, Egypt, Estonia, <a href="html/edm-finish-1.htm">Finland</a>, 
France, French Speaking Swiss, <a href="html/edm-german-1.htm">German Speaking</a>, 
<a href="html/edm-greek-1.htm">Greece</a>, <a href="html/edm-hungary-1.htm">Hungary</a>, 
Ireland, <a href="html/edm-hebrew-1.htm">Israel</a>, Italy, Latvia , Lithuania,<a href="html/edm-maltese-1.htm"> 
Malta</a>, Netherlands, Norway, <a href="html/edm-poland-1.htm">Poland</a>, 
<a href="html/edm-portuguese-1.htm">Portugal</a>, Slovenia, <a href="html/edm-spain-1.htm">Spain</a> 
, <a href="html/edm-swedish-1.htm">Sweden</a>, <a href="html/edm-tuerkiye-1.htm">Turkey</a>, 
United Kingdom, Ukraine, <a href="html/edm-russia-1.htm">Western Russia</a></h3>
<p style="margin-bottom: 0;">
</p>
</div>
<!-- InstanceEndEditable -->
<!--end content --> 
<div id="navBar"> 

<div id="search">
<h3><img src="html/img/information.gif" width="27" height="21" alt="" />Info-Box</h3>
<p><a href="http://www.eccna26.org/" target="_blank">ECCNA 26 in Dead 
sea, Israel <br />
2 - 4 september 2010</a></p>
<p></p>
</div> 
<!-- InstanceBeginEditable name="info-box" -->
<div class="headlines">
<h3><img src="html/img/links.gif" width="27" height="21" />Links</h3>
<br />
<ul style="margin-bottom: 0">
<li><a href="html/edm-zone.htm">Links Contact EDM-Zone </a></li>
<li><a href="html/edm-links.htm">Further Links </a></li>
</ul>
</div>
<!-- InstanceEndEditable --></div>

Je n'ai pas pu cette fois poster d'image !!
Modifié par takotak (20 Apr 2010 - 12:22)

gc-nomade

16 Apr 2010 à 21:18

Bonsoir ,

sans l'usage de la balise code ... ton code est difficile a lire , de plus ton probleme se situe probablement au niveau de tes regles CSS .
width ou height dans IE6 se comporte comme un min-width ou min-height , et il y a aussi avec les flottants 2 defauts ou bugs :
-double-margin
- 3 pixels jug , heu zie 3px jog ...

Sans tes styles , difficile de voir ou ton defaut se situe ...

GC Smiley smile

takotak

19 Apr 2010 à 21:11

Merci de la réponse ..dsl cette fois je vais tacher d'etre plus clair

voilà j'ai en balise head ce code :


 <link href="css/[b]2006edm.css[/b]" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
    <style type="text/css">@import url(../css/[b]2006edmie.css[/b]);</style>
  <![endif]-->

qui indique qu'il y a deux css que je vais reproduire ci dessous

1/ 2006edm.css

/***********************************************/

/* HTML tag styles                             */
/***********************************************/ 

body{
background-image:url(../img/back_site3.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #00004A;
	margin: 0px;
	padding-top: 5px;
	text-align: center;

}

a:link, a:visited, a:hover {
	color: #0000D5;
	text-decoration: none;
	
}
a:hover {
	text-decoration: underline;
}
/*overrides decoration from previous rule for hovered links */

h1, h2, h3, h4, h5, h6 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
}

h1{
 font-family: Verdana,Verdana, Arial, Helvetica, sans-serif;
 font-size: 120%;
 color: #000071;
 padding-bottom:10px;
}

h2{
 font-size: 114%;
 color:  #000071;
}

h3{
 font-size: 100%;
 color: #000071;
 
}

h4{
 font-size: 100%;
 font-weight: normal;
 font-family:Arial, Helvetica, sans-serif;
 color:  #000071;
}

label{
	font: bold 90% Verdana, Arial, Helvetica, sans-serif;
	display:block;
	float:left;
	width:100px;
}

li{
margin-bottom:3px;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#container{
border-top:6px solid #fff;
background-color:#fff;
width:730px;
text-align:left;
margin-left:13px;
margin-right:13px;
padding:0px;
}
#backContainer{
background-image:url(../img/back3_white.jpg);
background-repeat:repeat-y;
width:756px;
margin: 0px auto;
padding:0px;
}
#logohead{
	height:111px;
	}

#navBar{
	margin-left:518px;;
	padding: 5px;
	width:200px;
	min-height:450px;
	height:auto;
	background-color:#D9A300;
	font-size: 80%;
	color:#00004A;
	border: 1px solid #C69500;
	text-align:left;
	}
#navBar img{
vertical-align:top;
margin-right:5px;
 
}
#content{
	font-size: 70%;
	float:left;
	width: 501px;
	min-height:450px;
	height:auto;
	background-color:#E6E6FF;
	border:1px solid #C69500;
	margin: 0px;
	padding:5px;
	text-align:left;
	
	
}
#content a{
text-decoration: underline;
}
#content h3{
padding-top: 10px;
padding-bottom:5px;

}
#eventcontent{
font-size: 70%;
  
	min-height:450px;
	height:auto;
	background-color:#E6E6FF;
	border:1px solid #C69500;
	margin: 0px;
	padding:5px;
	text-align:left;
	
}
/***********************************************/
/*Component Divs                               */
/***********************************************/

#siteName{
	margin: 0px;
	padding: 0px 0px 10px 10px;
}



/************* #globalNav styles **************/

#globalNav{
background-image:url(../img/nav_back_b_str.gif);
background-repeat:repeat-x;
height:30px;

border-top:5px solid #fff;
font-size:90%;
font-weight:bold;
color:#fff;
padding-top:5px;
}
#globalNav a{
color:#fff;
font-size:90%;
font-weight:bold;
height:30px;
margin-left:10px;
margin-right:10px;
}
#globalNav a:hover{
background-color:#0B0BD9;
}
/************* #siteInfo styles ***************/

#siteInfo{
	clear: both;
	border-top: 2px solid #fff;
	background-color:#8080FF;
	font-size: 65%;
	color: #fff;
	padding: 10px 10px 10px 10px;
	margin-top: 0px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
   the bottom border of the navBar in cases where they "touch" */

#siteInfo img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}
#siteInfo a{
color:#FFF;
}

/************* #search styles ***************/

#search{
	padding: 5px; 
	background-color:#FFF5D7;
	height:150px;
	border-top:1px dotted #43687E; 
	border-bottom:1px dotted #43687E; 
	font-size: 90%;
	
	
}

#search form{
 margin: 0px;
 
}
#search label,  input, select, option{
	display: block;
	float: left;
	width: 150px; /* Breite.*/
	margin-bottom:5px;
 }
 
 #search  input, select,  option{
  border:1px solid #43687E;
  background-color:#F2F2E1;
  
 }
 
 #search option{
 float:none;
 margin:0px;
 }
 
input[type=image] { /* den Submit-Button */
  width: auto;
  }

/************** #headlines styles **************/

.headlines{
	
	margin-top:5px;
	background-color:#FFF5D7;
	border-top:1px dotted #43687E; 
	border-bottom:1px dotted #43687E;
	font-size: 85%;
	clear:right;
	padding:5px;
}

.headlines a {
color:#00004A;
	font-size: 90%;
	display: block;
	border-top: 1px solid #D9A300;
	padding: 2px 0px 2px 10px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #FECF89;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/************** #different styles **************/
.img-left{
	float: left;
	padding: 0px 10px 0px 0px;
	margin: 0 5px 5px 0;
	}
	.clear-fl{
	clear:both;
	}
	.img-right{
	float: right;
	padding: 0px 0px 0px 10px;
	margin: 0 5px 5px 0;
	}

/*********** table styles ***********/
 table{
 
 width:90%;
 }
 th,td{
border: 1px dotted #8080FF;
padding:4px;
vertical-align:top;
}
th{
font-weight:bold;
background-color:#F7F7F2;}
/************** #single classes **************/
.serviceLinks{
line-height: 1.5;
}

2/ 2006edmie.css

/***********************************************/
/*

HTML tag styles                             */
/***********************************************/ 
a:link, a:visited, a:hover {
	color: #00004A;
	text-decoration: none;
	
}
a:hover {
	color:#FF6633;
	text-decoration: underline;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#container{
border-top:6px solid #fff;
background-color:#fff;
width:730px;
text-align:left;
margin-left:13px;
margin-right:13px;
padding:0px;
}
#backContainer{
background-image:url(../img/back3_white.jpg);
background-repeat:repeat-y;
width:756px;
margin: 0px auto;
padding:0px;
}
#logohead{
	height:111px;
	}

#navBar{
	margin-left:516px;;
	padding: 5px;
	width:198px;
	min-height:450px;
	height:auto;
	background-color:#D9A300;
	font-size: 80%;
	color:#00004A;
	border: 1px solid #C69500;
	height:480px;
}

#content{
font-size: 70%;
  float:left;
	width: 501px;
	height:480px;
	background-color:#E6E6FF;
	border:1px solid #C69500;
	margin: 0px;
	padding:5px;
	
	
	
}
#content a{
text-decoration: underline;
}
#content h3{
padding-top: 10px;

}
/***********************************************/
/*Component Divs                               */
/***********************************************/





/************* #siteInfo styles ***************/

#siteInfo{
	clear: both;
	border-top: 2px solid #fff;
	background-color:#8080FF;
	font-size: 65%;
	color: #fff;
	padding: 10px 10px 10px 10px;
	margin-top: 0px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
   the bottom border of the navBar in cases where they "touch" */

#siteInfo img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}
#siteInfo a{
color:#FFF;
}

/************* #search styles ***************/

#search{
	padding: 5px; 
	background-color:#FFF5D7;
	height:150px;
	border-top:1px solid #43687E; 
	border-bottom:1px solid #43687E; 
	font-size: 90%;
	
	
}

#search form{
 margin: 0px;
 
}
#search label,  input, select, option{
 display: block;
  float: left;
  width: 100px; /* Breite.*/
  margin-bottom:5px;
 }
 
 #search  input, select,  option{
  border:1px solid #43687E;
  background-color:#F2F2E1;
  
 }
 
 #search option{
 float:none;
 margin:0px;
 }
 
input[type=image] { /* den Submit-Button */
  width: auto;
  }

/************** #headlines styles **************/

.headlines{
	
	margin-top:5px;
	background-color:#FFF5D7;
	border-top:1px solid #43687E; 
	border-bottom:1px solid #43687E;
	font-size: 80%;
	clear:right;
	padding:5px;
}



/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom:none;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}




/*********** table styles ***********/
 table{
 
 width:90%;
 }
 th,td{
border: 1px solid #8080FF;
padding:4px;
vertical-align:top;
}

/************** #form styles **************/ 
]

c'est une peu indigeste mais je ne vois pour l'instant d'autre moyen de description du pb Smiley ohwell

Modifié par takotak (20 Apr 2010 - 12:25)

Chok71

20 Apr 2010 à 10:15

Salut,

Je répète ce qu'a dit gc-nomade, utilise la balise Code pour mettre du XHTML/CSS sinon on ne pourra rien faire pour ton problème. Si possible met nous une page en ligne pour qu'on plus facilement trouvé l'erreur.
Modifié par Chok71 (20 Apr 2010 - 10:16)

takotak

20 Apr 2010 à 10:49

http://www.edmna.org/ (ss IE 8 pas de pb mais ss IE 6, si)
upload/28953-copieecran.jpg

(Quand vs dites mettre la balise code, qu'entendez vous en plus de ce que j'avais dejà posté svp ?)
Modifié par takotak (20 Apr 2010 - 10:52)

Chok71

20 Apr 2010 à 10:55

Le block de droite (jaune) est mal codé en CSS.
Il faut enlever le margin-left: 518px, et mettre un float: left; à la place. Ensuite tu peux mettre un clear: both à #siteInfo.

Vérifie aussi que la taille du block #content ne soit pas trop large.
Modifié par Chok71 (20 Apr 2010 - 11:02)

takotak

20 Apr 2010 à 11:07

Merci

question peut etre bete mais je me lance :

les changements dt tu parles st à faire dans les 2 css ? ou seulement dans l'une des deux ?
et si je le fais, ca marchera tjrs sous IE 8 ?

Chok71

20 Apr 2010 à 11:13

Essaie déjà dans celle pour tout navigateurs (pas 2006edmie.css).
Pour IE8 il faudra tester mais je pense pas que ça posera problème.
Modifié par Chok71 (20 Apr 2010 - 11:15)

takotak

20 Apr 2010 à 11:21

merci je tente en rentrant chez moi ce soir

Laurie-Anne

20 Apr 2010 à 11:43

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

takotak

20 Apr 2010 à 11:56

Autant pour moi!
désolé

je pense avoir rectifié le pb

Chok71

20 Apr 2010 à 12:13

Pas vraiment, il faut faire comme ça : http://img.rock-hosting.com/view/Presse-papiers-1-37m/
Si tu veux mettre du CSS, suffit de mettre [ code=css]...

takotak

20 Apr 2010 à 12:26

okay

Merci à Chok Smiley cligne

, le pb de décalege est résolu

j'ai bien supprimé margin-left: 518px, et mis un float: left; à la place. par contre il y avait déjà un clear: both à #siteInfo.dc j'ai laissé comme tel
Modifié par takotak (22 Apr 2010 - 10:17)

Sujet clos

CSS et mise en forme, CSS3

Decalage div entre IE6 8 et IE 6