28173 sujets

CSS et mise en forme, CSS3

[résolu] Espace entre les div sous IE

Bonjour à tous !

Tout d'abord je tiens à préciser que j'ai effectué une recherche avant de poser ma question. J'ai bien trouvé des personnes ayant rencontré le même problème que moi mais les solutions apportées n'étaient pas appropriées dans mon cas.

Alors voilà, je commence en ce moment un site avec quelques amis et je rencontre un problème avec IE7 (et surement IE6 mais je n'ai pas testé). Bien que je m'efforce à placer des 
margin:0;
et autres 
padding:0;
dans ma feuilles CSS, un espace taquin persiste à se faufiler entre mes balises <div> !

Pour illustrer mon problème je vous link deux screenshots, la première sous FireFox 2, et la seconde sous Internet Explorer 7 (le maudit). Je tiens a vous rassurer, le background rouge n'est là que pour faire mieux apparaitre l'espace en question Smiley lol

Sous FireFox: http://i68.photobucket.com/albums/i7/Anatal/galaxie_ff.jpg

Sous IE7: http://i68.photobucket.com/albums/i7/Anatal/galaxie_ie7.jpg

Je vous envoie également mon code HTML (très court rassurez vous):
<html>
<head>
<title>New</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="SGW design" href="new.css">
<link href="pop.css" rel="stylesheet" type="text/css">
<script src="new.js" type="text/javascript"></script>
</head>
<body>

<!-- DEBUT HEADER -->
<div id="banniere">

	<div id="bloc_a">
		<div class="ligne_1">
			<div class="cellule"><img src="img/a1.jpg" name="a1" width="229" height="77"></div>
			<div class="cellule"><a href="new.html" onMouseOver=On('a2') onMouseOut=Off('a2')><img name="a2" src="img/a2.jpg" title="Retour vers l'Accueil" width="70" height="77"></a></div>
		</div>
		<div class="ligne_2">
			<div class="cellule"><img src="img/b1.jpg" name="b1" width="299" height="111"></div>
		</div>
	</div>
	
	<div id="bloc_b">
		<div class="cellule"><img name="titre" src="img/t.jpg" width="379" height="116"></div>
		<div class="ligne_2b">
			<div class="cellule"><img src="img/b2.jpg" name="b2" width="58" height="72"></div>
			<div class="cellule"><a href="new.html" onMouseOver=On('b3') onMouseOut=Off('b3')><img name="b3" src="img/b3.jpg" title="Accéder aux Articles" width="80" height="72"></a></div>
			<div class="cellule"><img src="img/b4.jpg" name="b4" width="106" height="72"></div>
			<div class="cellule"><a href="new.html" onMouseOver=On('b5') onMouseOut=Off('b5')><img name="b5" src="img/b5.jpg" title="Accéder au Forum" width="80" height="72"></a></div>
			<div class="cellule"><img src="img/b6.jpg" name="b6" width="55" height="72"></div>
		</div>
	</div>
	
	<div id="bloc_c">
		<div class="ligne_1">
			<div class="cellule"><a href="new.html" onMouseOver=On('a3') onMouseOut=Off('a3')><img name="a3" src="img/a3.jpg" title="Accéder aux Galeries" width="71" height="77"></a></div>
			<div class="cellule"><img src="img/a4.jpg" name="a4" width="228" height="77"></div>
		</div>
		<div class="ligne_2">
			<div class="cellule"><img src="img/b7.jpg" name="b7" width="299" height="111"></div>
		</div>
	</div>
	<img src="img/c1.jpg" name="c1" width="977" height="38">
</div>
<!-- FIN HEADER -->

<!-- DEBUT MENU -->
<div id="barre_menu"></div>
</body>
</html>


Aisni que mon code CSS:
body {margin:auto; background-color:#0c0c0c; width:100%; height:100%; color:#000000; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif;}

img {border:0;}

#banniere {text-align:center; margin:auto; width:977px; height:226px; padding:0;}

#bloc_a, #bloc_b, #bloc_c {float:left; font-weight:bold; text-align:center; border:0; border-spacing:0; padding-top:0; margin:0; text-decoration:none; border-style:none;}

#bloc_a, #bloc_c{width:299px; height:188px;}
 
#bloc_b{width:379px; height:188px;}

#barre_menu{ background: url(img/menu.jpg) no-repeat; margin:auto; padding:0; width:977px; height: 52px; font-size: 14 px; word-spacing: 5px; font-weight: bold;text-align: right;}
 
.ligne_1{width:299px; height:77px;}
.ligne_2{width:299px; height:111px;}
.ligne_2b{width:379px; height:72px;}

.cellule{float:left;}


Si quelqu'un voit l'erreur que j'ai faite, cela m'aiderai beaucoup.

Merci à vous Smiley cligne

ps: au passage, ma page n'est pas centrée sous IE7 aklors qu'elle l'est sous FF !?!
Modifié par Aris Boch (25 Mar 2007 - 18:47)
Hum.... Smiley confused

J'ai trouvé par hazard la solution à mon problème en lisant le poste de quelqu'un d'autre... c'est tout bête mais j'avais oublié de mettre un Doctype !

Après rectification de ce petit oubli, ça fonctionne parfaitement.

désolé de vous avoir dérangé pour rien. Smiley rolleyes

[résolu]
Aris Boch a écrit :
c'est tout bête mais j'avais oublié de mettre un Doctype !

J'allais le dire. Smiley ravi
Félicitations en tout cas pour ton autonomie pour trouver des réponses à tes questions. Smiley smile )

Aris Boch a écrit :
[résolu]

Par contre, la mention [Résolu] s'ajoute dans le titre de ton sujet (pour le modifier, tu dois éditer ton premier message à l'aide du lien « éditer » en haut à droite dudit message.
Sujet clos
Aller à