28172 sujets

CSS et mise en forme, CSS3

Probleme d'affichage sur Internet Explorer :(

Bonjour à tous !
Je suis en train de me faire un blog et j'ai un petit problème : mon site s'affiche bien avec Firefox mais il est coupé avec Internet Explorer : http://secrets2lost.chez-alice.fr/blog
Ca vient surement du code de ma page html, où j'ai intégré du css. J'ai un peu de mal avec le css donc je me suis pas mal servis d'exemples de différents sites.
Voici le code de la page, il est peut etre un peu farfelu Smiley smile
Merci d'avance pour votre aide
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Le blog de Math'</title>
	<style type="text/css">
		html {font-size: 100%;}
		body {width:90%; padding: 1em; font-size: .85em; font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;}

		
		h1 {
			margin-top: 0px; 


			margin-left: 180px;
			margin-bottom: 0px;
			background: url(header.PNG) no-repeat left top;
			height: 381px;
			width: 609px;
		}

		ol, ul, li {
			padding: 0;
			margin: 1em;
		}
		

		html {
			background: yellow;
			margin: 0;
			padding: 0;
		}

		div#colonne1 {
			float: left;
			width: 160px;
			margin-left: 180px;
			padding: 1px 0;
			background: url(03.PNG) no-repeat left top;
			height: 462px;
			width: 209px;
		}
		
			#colonne1 li {
				list-style-type: none;
				padding: 20px 0 0 5px;
				margin: 0 0 0 70px;


			}
		





		div#centre {
			overflow: hidden;
			padding: 1px -40px;
			background: url(04.PNG) no-repeat left top;
			height: 462px;
			width: 400px;
		}
			#centre li {
				list-style-type: none;
				margin:  0 0 0px;


			}
	</style>
	
	<!--[if lte IE 6]><style type="text/css">
		div#colonne1 {
			margin-right: 0px;
		}
		
		div#centre {
			overflow: visible;
			height: 1%;
		}
	</style><![endif]-->
</head>

<body>
	<h1></h1>
	
	<div id="colonne1">
	<h2></h2>
	<ul>
		<li><FONT COLOR="FFFFFF"><b>

Vidéos<br>
Pics<br>
Music<br>
Facebook<br>
MySpace<br>
Twitter<br>

		<b></FONT> </li>
	</ul>
	</div><!-- fin de div#colonne1 -->
	
	
	
	<div id="centre">
		<h2></h2>

Bienvenue sur mon nouveau blog, où vous trouverez mes dernières créations graphiques, vidéos et musiques !<br>
		
<br>Dancing In Bayeux - Par Mathieu et Arnaud<br><br>
<center><object width="240" height="199"><param name="movie" value="http://www.youtube.com/v/51gC1i7Si8Q&hl=fr&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/51gC1i7Si8Q&hl=fr&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="240" height="199"></embed></object></center>
			
		</div>
		
	</div><!-- fin de div#centre -->
</body>
</html>

Modifié par youpitou (26 Jun 2010 - 12:22)
Bonjour à tous !
Il s'agit d'un bug ie6 qui double la marge d'un elem flottant, alors il suffit d'ajouter display inline a cet elem.

div#colonne1 {
float: left;
margin-left: 180px;
display:inline
}
bonjour à tous,

je permets d'écrire dans ce sujet car j'ai un gros problème. Voilà je viens de terminer mon site, tout allait bien jusqu'à ce que quelqu'un me dise qu'il ne fonctionnait pas avec IE. Je sais que j'aurais du contrôler au fur et à mesure...
Je suis un peu perdue car j'ai lu sur plusieurs sites qu'on pouvait mettre des commentaires conditionnels et créer une feuille de style spéciale pour IE, mais là je dois avouer que je ne sais pas par où commencer. Surtout qu'une partie du site est affichée correctement.
Si quelqu'un pouvait me renseigner
Merci par avance

voici l'adresse : http://nathaliefabian.free.fr
Sujet clos
Aller à