Soucis d'affichage sous IE et autres nouvelles

Bonjour à tous,

J'ai longtemps écumé pas mal de forums divers et variés afin de pouvoir, jusqu'à présent, répondre à mes problème sans avoir à poster sur ces forums, mais aujourd'hui est un jour tragique, je suis dépassé par IE.

Par chance j'ai découvert la semaine dernière l'énorme communauté que représente Alsacréation, et aujourd'hui je vous demande humblement un coup de pouce.

Je n'ai pas de gros soucis avec mozilla ou chrome, mais IE refuse de m'afficher une colonne à gauche collée au menu horizontal. Il veut absolument me mettre la colonne plusieurs dizaines de pixels plus bas...

J'ai essayé moult combinaisons de "display" (sauf la bonne surement) avec différents ordres dans mes include.

Mais rien y a fait, et je me traine aujourd'hui à vos pieds afin de quérir un peu d'aide.

Plutôt qu'une longue description fastidieuse pour vous comme pour moi, voici un résumé visuel : (qui ça feignant? )

sous chrome :


sous IE :


Coté code, voici le html

<?php
	include('header.php'); 	
	include('menu.php');
	include('news.php');
?>
	
<div class="corps">		

<!-- le corps de la page -->
	
</div>
<?php
	include('column.php');
	include('footer.php');
?>

Quand au css (très raccourcis bien sûr) :

#header{
	width: 760px;
	height: 90px;
	margin-bottom: 10px;
}

#menu{ 
	font-weight : bold; 
	font-family : Arial; 
	font-size : 12px;
}

#column{
	margin : 35px 0px 0px;
	padding : 1px 0px;
	width : 154px;
	height : 800px;
	text-align : center ;
	background-color : #1c4e82;
	-moz-border-radius : 0px 0px 8px 8px;
	-webkit-border-bottom-right-radius : 8px; 
	-webkit-border-bottom-left-radius : 8px;
}

#news{
	margin : 2px 0px;
	padding : 4px;
	float : right;
	width : 590px;
	border : solid 1px #dee5f0;
	background-color : #f6f8fc;
	-moz-border-radius : 7px;
	-webkit-border-radius : 7px;
}

.corps{
	-moz-border-radius : 8px;
	-webkit-border-radius : 8px; 
	float : right;
	z-index : 10;	
	background-color : white;
	border : 2px outset #c9c9c9;
	font-family : "Trebuchet MS";
	font-size : 90%;
	color : #585858;
	width : 590px;
	height : 725px;
	position : relative;
	overflow : auto;
	margin : 2px 0px;
	padding : 0px 5px;	
}

#footer{
	height : 100px;
	margin : 2px;
	padding: 1px;
	text-align: center;
	background-color : #09335d;
	-moz-border-radius : 8px;
	-webkit-border-radius : 8px;
}

Voilà, je ne comprends pas ce qui ne va pas (surement beaucoup de choses ) pour IE

Merci à tous par avance.

Et si au passage vous tombez sur des énormités ou des maladresses signalez le svp, je débute, ceci est mon premier (vrai) site web.

Quand nous aurons résolu ce problème je vous parlerais de la "bordure fantome" (sous firefox uniquement )

Loki born to be an Alsanaute
Modifié par Lokidor (13 May 2010 - 15:59)

Bonjour. Il aurait été préférable de nous donner le code HTML de la colonne qui pose problème. Les includes sont beaux, toussa, mais ça ne nous aide pas trop.

en effet, pas très malin de ma part, la voici

<div id="column">
	<p style="font-size : 90%;">
		<a href="http://www.cnrs.fr/insis/">INSIS</a>
	</p>
	
	<form class="form_login" method="post" action="id.php">
		<p>
			<label for="login">Login :</label>
			<input type="text" name="login" id="login" size="10px"/>
			<br/>
			<label for="pass">Pass : </label>
			<input style="position:relative; left:6px;" type="password" name="pass" id="pass" size="10px"/>
			<input type="submit" value="Go"/>
		</p>	
	</form>
	
	<p class="zoom">
		<img alt="une image industrielle choisie parmis 11" src="images/aleatoire/<?php
		$i = rand(1,14); 
		echo $i;
		?>.jpg"/>
	</p>

	<p id="descendu"><a href="projet.php">Partenaires</a></p>
	<p id="partenaires">		
		<a href=""><img alt="logo cremant" src="images/logos/logo_cremant"/></a>
		<a href="projet.php#anr"><img alt="logo de l'anr" src="images/logos/logo_anr.jpg"/></a><br/>
		<a href="projet.php#projet_europeen"><img alt="logo geodes" src="images/logos/logo_geodes.png"/></a>
		<a href="projet.php#projet_europeen"><img alt="logo comcas" src="images/logos/logo_comcas.png"/></a>
		<a href="projet.php#projet_gdr"><img alt="logo du gdr et soc-sip" src="images/logos/logo_gdr_soc-sip.png"/></a>
		<a href="http://wiki.unice.fr/display/LEATINTRA/Home"><img alt="icone du wiki du leat" src="images/icones/wiki.png"/></a>
	
	</p>
	<p>
		<br/><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11-blue" alt="Valid XHTML 1.1" height="31" width="88" /></a><br/>
		<a href="http://jigsaw.w3.org/css-validator/check?uri=referer"><img src="http://www.w3.org/Icons/valid-css-blue" alt="Valid CSS" /></a>
	</p>
	
	<p class="copyright">
		<br/><br/>&copy; CNRS Photothèque / CREMANT / Université Nice-Sophia Antipolis / LEAT / Emmanuel Perrin
	</p>
</div>

voici donc
Modifié par Lokidor (14 May 2010 - 00:16)

Personne n'a une idée?