FLOAT+IE

filoulebauju Messages postés 176 Statut Membre -
filoulebauju Messages postés 176 Statut Membre - 29 oct. 2008 à 13:38

Bonjour,

j'ai un soucis un peu bete, mais j'ai un problème de float sur ie...

en effet, sur firefox, chrome, opéra etc, ca s'affiche très bien.
Sur IE...

voici des captures d'écran pour mieux comprendre.

IE: http://apu.mabul.org/up/apu/2008/10/28/img-224517lnz52.jpg.html

AUTRES: http://apu.mabul.org/up/apu/2008/10/28/img-2246217kg0u.jpg.html

voici les codes sources qui je pense peuvent servir:
HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>yeahhhh c'est le projet!!!!</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>
<script type="text/javascript">

		function creationLigne(numLigne) 
		{
  			nouveauDiv = document.createElement("div"); // crée un nouvel élément div
  			nouveauDiv.setAttribute("class","ligne");
			for(var i=1 ; i<=4 ; i++)
			{
				id = numLigne*10+i;
				id = "el"+id;
  				image = document.createElement("img"); // crée un nouvel élément div
	  			image.id=id;
				
				if(numLigne==1)
					image.src="images/boardunit.gif";
				else
					image.src="images/boardunitoff.gif";
				image.className="drop";
				
				nouveauDiv.appendChild(image);
				
				if(numLigne==1)
					Droppables.add(image, { accept: 'draggable', onDrop: function (element,dropon) {dropon.src=element.src; } } );
			}
			
			image2 = document.createElement("img");
			image2.alt="";
			if (numLigne==1)
				image2.src="images/r0_4.gif";			
			else
				image2.src="images/r0_0.gif";	
			nouveauDiv.appendChild(image2);
			
			
			if(numLigne==1)
				document.getElementById("ligne").appendChild(nouveauDiv);
			else
			{
				prem=document.getElementById("ligne").firstChild;			
				document.getElementById("ligne").insertBefore(nouveauDiv,prem); // ajoute l'élément qui vient d'être créé et son contenu au DOM
			}
		}
			
		function ajouterLigne(num)
		{
			for(i=1; i<=num; i++)
				creationLigne(i);
		}
		
		function creationCouleur()
		{
			 var color = new Array("blue","fushia","green","orange","purple","red","white","yellow");
			 var couleur = new Array("Bleu","Fushia","Vert","Orange","Violet","Rouge","Blanc","Jaune");
			 
			 nouveauUl = document.createElement("ul"); 
  			 for(i=0 ; i<color.length ; i++)
			 {
				 nouveauLi = document.createElement("li"); 
				 nouveauLi.style.listStyleType = "none";
				 image = document.createElement("img");
				 image.id="couleur"+couleur[i];
				 image.className="draggable";
				 image.alt="";
				 image.src="images/play_"+color[i]+".png";
				 
				 new Draggable(image,{ revert: true});
				 nouveauLi.appendChild(image);
				 nouveauLi.appendChild(document.createTextNode(couleur[i]));
				 nouveauUl.appendChild(nouveauLi);
			 }
			 document.getElementById("couleur").appendChild(nouveauUl);
		}
		
	</script>
	<title>Projet</title>
</head>
<body onload="ajouterLigne(13); creationCouleur();">
<div id="bg1">
	<div id="header">
		<img src="images/mastermind.png" title="mastermind">
	</div>
	<!-- end #header -->
</div>
<!-- end #bg1 -->
<div id="bg2">
	<div id="header2">
		<div id="menu">
			<ul>
				<li><a href="index.html">Index</a></li>
				<li><a href="cvs.html">CV</a></li>
				<li><a href="regles.html">R&egrave;gles</a></li>
				<li><a href="mastermind.html">Jeu</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
		<!-- end #menu -->
		<div id="search">
			<form method="get" action="#">
				<fieldset>
				<input type="text" name="q" value="search keywords" id="q" class="text" />
				<input type="submit" value="Search" class="button" />
				</fieldset>
			</form>
		</div>
		<!-- end #search -->
	</div>
	<!-- end #header2 -->
</div>
<!-- end #bg2 -->

<div id="bg3">
	<div id="bg4">
		<div id="bg5">
			<div id="page">
				<div id="content">
					<div class="post">
						<div class="title">
							<h2>Mastermind</h2>
						</div>
						<div class="entry">
							<div id="ligne">
							
							</div>
							<div id="couleur">
							
							</div>
						</div>	
					</div>
				</div>
				<!-- end #content -->
				<div id="sidebar">
					<ul>
						<li>
							<h2>Blablabla</h2>
							<p>BlablablaBlablablaBlablabla</p>
						</li>
						<li>
							<h2>Blablabla</h2>
							<ul>
								<li><a href="#">Blablabla</a></li>
								<li><a href="#">Blablabla</a></li>
								<li><a href="#">Blablabla</a></li>
								<li><a href="#">Blablabla</a></li>
								<li><a href="#">Blablabla</a></li>
								<li><a href="#">Blablabla</a></li>
							</ul>
						</li>
					</ul>
				</div>
				<!-- end #sidebar -->
				<div style="clear: both; height: 40px;">&nbsp;</div>
			</div>
			<!-- end #page -->
		</div>
	</div>
</div>
<!-- end #bg3 -->
<div id="footer">
	<p>Site web r&eacute;alis&eacute; par messieurs BASEI, CORBET et PETIT.</p>
</div>
<!-- end #footer -->
</body>
</html>

CSS:

.HD{
	float:right;
	}
.HG{
	float:left;
	}
.accroche{
	clear:left;
	text-align:center;
	}
* {
	margin: 0;
	padding: 0;
}

body {
	margin: 0px;
	background: #002F43 url(images/bg01.jpg) repeat-x;
	font-family: "Calibri","Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #B9B9B9;
}

h1, h2, h3 {
	margin-bottom: 1.5em;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.4em;
}

h3 {
	font-size: 1em;
}

p, ul, ol {
	margin-bottom: 1.5em;
	line-height: 180%;
}

ul, ol {
	margin-left: 3em;
}

blockquote {
	margin-left: 3em;
	margin-right: 3em;
}

a {
	color: #B9B9B9;
}

a:hover {

}

strong {
	color: #D7D7D7;
}

img.left {
	float: left;
	margin: 5px 25px 0px 0px;
}

img.right {
	float: right;
	margin: 5px 0px 0px 25px;
}

/* Background */

#bg1 {
	background: url(images/bg02.jpg) no-repeat center top;
}

#bg2 {
	background: url(images/bg03.jpg) no-repeat center top;
}

#bg3 {
	background: url(images/bg04.jpg) repeat-y center top;
}

#bg4 {
	background: url(images/bg05.jpg) no-repeat center top;
}

#bg5 {
	background: url(images/bg06.jpg) no-repeat center bottom;
}

/* Header */

#header {
	width: 900px;
	height: 145px;
	margin: 0px auto;
	color: #FFFFFF;
}

#header h1 {
	float: left;
	margin: 0px;
	padding: 70px 0px 0px 25px;
	font-size: 40px;
}

#header h1 sup {
	font-weight: normal;
}

#header h2 {
	float: right;
	margin: 0px;
	padding: 95px 25px 0px 0px;
	font-size: 14px;
}

#header a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Header2 */

#header2 {
	width: 900px;
	height: 88px;
	margin: 0px auto;
}

/* Menu */

#menu {
	float: left;
}

#menu ul {
	margin: 0px;
	padding: 34px 0px 0px 0px;
	list-style: none;
}

#menu li {
	float: left;
}

#menu a {
	padding-left: 50px;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
}

/* Search */

#search {
	float: right;
}

#search form {
	margin: 0px;
	padding: 35px 80px 0px 0px;
}

#search fieldset {
	margin: 0px;
	padding: 0px;
	border: none;
}

#search input.text {
	width: 160px;
	background: none;
	border: none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #AEC38B;
}

#search input.button {
	display: none;
}

/* Page */

#page {
	width: 846px;
	margin: 0px auto;
	padding: 40px 0px 0px 0px;
}

/* Content */

#content {
	float: left;
	width: 583px;
}

.post {
}

.post .title {
	height: 49px;
	background: url(images/img02.gif) no-repeat;
}

.post .title h2 {
	float: left;
	padding: 12px 0px 0px 24px;
	font-size: 24px;
}

.post .title h2 a {
	text-decoration: none;
	color: #FFFFFF;
}

.post .title h2 a:hover {
	color: #8AC800;
}

.post .title p {
	float: right;
	padding: 12px 24px 0px 0px;
	font-size: 15px;
	font-weight: bold;
	color: #343434;
}

.post .entry {
	padding: 30px 23px 0px 23px;
}

.post .meta {
	height: 70px;
	clear: left;
	margin: 0px 23px;
	padding: 15px 0px 0px 0px;
	border-top: 1px solid #262626;
}

.post .meta .credit {
	float: left;
}

.post .meta .links {
	float: right;
}

.post .meta .links .more {
	padding-left: 17px;
	background: url(images/img05.gif) no-repeat left center;
}

.post .meta .links .comments {
	padding-left: 19px;
	background: url(images/img04.gif) no-repeat left center;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 236px;
}

#sidebar ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#sidebar li {
	background: url(images/img03.gif) no-repeat;
	padding: 0px 23px 20px 23px;
}

#sidebar li ul {
}

#sidebar li li {
	padding: 8px 0px;
	background: none;
	border-bottom: 1px solid #262626;
}

#sidebar h2 {
	margin: 0px;
	padding: 16px 0px 30px 0px;
	font-size: 14px;
	color: #FFFFFF;
}

/* Footer */

#footer {
}

#footer p {
	margin: 0px;
	padding: 20px 0px;
	text-align: center;
	color: #566D77;
}

#footer a {
	color: #8097A1;
}

#couleur{
float : right;
}

#ligne{
float: left;
}

Merci de votre aide car là, je sèche.

Afficher la suite

A voir également:

FLOAT+IE
Ie tab - Télécharger - Outils pour navigateurs
Ie 11 - Télécharger - Navigateurs
Ie 8 - Télécharger - Navigateurs
Ie 9 - Télécharger - Navigateurs
Ie 10 - Télécharger - Navigateurs

1 réponse

Réponse 1 / 1

filoulebauju Messages postés 176 Statut Membre 8

personne n'a une idée?

Discussions similaires

Prélèvement Apple.com Bill

Prélèvement inconnu APPLE.COM/BILL ORIGINE IRL

Prélèvements sur Itunes.com/bill Itunes.com Lu

Prélèvement GD Media.

Version IE portable ou standalone

FLOAT+IE

1 réponse

Votre réponse

Discussions similaires

Newsletters