28220 sujets

CSS et mise en forme, CSS3

[résolu] Un espace se créé sous IE, pourquoi ?

Bonjour tout le monde.

J'aurais vraiment besoin de vous pour déceler le problème..
Je connais pourtant la plupart des problèmes avec IE mais je n'arrive pas à comprendre.

Voici une page qui explique bien le problème (adaptée pour qu'on le voit encore plus) :
http://ns21.hosteur.com/~xbox36/xboxguigui/newarea/contact.php

Entre chaque présentation d'un membre de l'équipe, j'ai supprimé toutes les marges. Sous firefox donc, aucun espace. SOus IE un gros espace.

Pourquoi ???

Ca pourrait paraitre ridicule mais lorsque je remet la vraie marge, avec le surplus que rajoute IE, c'est vraiment laid Smiley confus

Un GRAND merci à qui saura m'aider Smiley smile

Extraits de code :

XHTML
<img src="images/mini54/xbox360.jpg" class="miniature" alt="" />
			<h2><a href="news.php?id=21">Konami en force sur 360</a></h2>
			<p>Quel bonheur d'apprendre que Konami nous réserve une surprise sur le nouveau bébé de Billou !</p>
			<hr/>

			<img src="images/mini54/condemned.jpg" class="miniature" alt="" />
			<h2><a href="news.php?id=20">Condemned Repoussé ?</a></h2>
			<p>Sega nous repousserai-t-il notre futur Hit Psychologique ?</p>
			<hr/>


CSS

p, hr, h2 {
margin : 0;
padding : 0
}

Modifié par Dark elf (19 Jul 2005 - 18:10)
Modérateur
Salut,

Pour ce qui est du code que t'as laissé sur ce post, je vois pas d'erreur en fait...

A défaut, voici en vrac et sans garantie de réussite quelques tests que je ferais... ( d'après ta feuille de style et ton code source)

#contenu #contact h2 { margin: 0; padding: 0; }


ou bien en supprimant <hr />

ou encore en supprimant <strong> (ou marges à 0)...

ben après pfuit! plus d'idées saugrenues...
Le hr m'est très utile ici...avec son "clear : both;" et je peux pas trop le mettre ailleurs..

Quand au strong, balise inline, je doute qu'elle pose problème ici Smiley ohwell
Modérateur
Ah attention! Je n'ai pas dis que c'était pas utile... C'est uniquement à titre de test pour tenter de situer le problème... Pour strong, effectivement, çà rime pas à grand chose ma suggestion...
Juste au passage, les guillemets simples masques les images dans IE/Mac. Comme les guillemets sont inutiles dans ce contexte, mieux vaut ne pas en mettre du tout.

/* header */
#header {
	height : 85px;
	background : url('ban.jpg');
}

upload/196-darkelf.jpg
C'est peut-être le <hr /> qui à une épaisseur qu'on peut oter en mettant hr { height:0;}. Ou bien remplacer <hr /> par <br /> qui lui n'a ni hauteur ni bordure ( ni rien en fait )
En premier lieu, attention à bien écrire le <hr>.

En XHTML, on écrit <hr espace barre-oblique> comme ceci : <hr />
Et non : <hr/>. L'espace n'est pas optionnelle.

XHTML 1.0 : Le langage de balisage hypertexte extensible a écrit :

C.2 Eléments vides
Inclure un espacement avant le / et >de fin des éléments vides, par exemple <br />, <hr /> et <img src="karen.jpg" alt="Karen" />. Utilisez également une syntaxe minale pour les éléments vides, par exemple <br />, comme syntaxe alternative de <br></br> qui est autorisé par XML, car cela donne des résultats inattendus dans certains agents utilisateurs.

http://www.la-grange.net/w3c/xhtml1/#guidelines

Pour ton problème, deux solutions.

La première (ma préférée) est de positionner ton <hr /> hors-écran :

#contact hr {
	position: absolute;
	top: -999em;
	left: -999em;
}

La deuxième est d'enlever le <hr /> et de déclarer clear: both; sur l'image :

#contact img {clear: both;}

Smiley lol
j'ai aussi eu le même problème avec un <hr /> qui ajoutait de l'espace sous ie.

je l'ai contourné en utilisant à la place un <div> vide

code html :

<div class="spacer"></div>


code css :

div.spacer {
	margin: 0;
	padding: 0;
	height: 0px;
	overflow: hidden;
	clear: both;
}


a noter que le overflow est présent pour corriger le fait que ie ajoute de lui même un espcace correspondant à la hauteur de la font-size utilisé.

je viens d'essayer la technique du déplacement en dehors de la page, bah sous firefox, ca ne fait pas le clear : c'est comme si je n'avais pas mis le hr
Stephan a écrit :
Juste au passage, les guillemets simples masques les images dans IE/Mac. Comme les guillemets sont inutiles dans ce contexte, mieux vaut ne pas en mettre du tout.

/* header */
#header {
	height : 85px;
	background : url('ban.jpg');
}

upload/196-darkelf.jpg


Merci pour l'info Smiley smile

Je vais faire des tests, je vous tiens au courant Smiley cligne
Modifié par Dark elf (19 Jul 2005 - 16:39)
Petit Lulu a écrit :

je viens d'essayer la technique du déplacement en dehors de la page, bah sous firefox, ca ne fait pas le clear : c'est comme si je n'avais pas mis le hr

en effet... Smiley hum

Alors enlève le <hr /> et place tes éléments dans une nouvelle <div> en clear: both;

<div class="nouvelle_div">
<img src="contact_fichiers/lionel.jpg" alt="" class="miniature">
<h2><strong>Lionel</strong> - webmaster@xbox360area.fr</h2>
<h3>Rédac' Chef / Relation Presse / Architecte Système</h3>
<p>Bah ici je sais pas trop ce que je veux ecrire sur moi encode [langue]</p>
</div>

.nouvelle_div {
	clear: both;
}

Smiley hum
Figure toi que c'est ce que j'ai fait après avoir réfléchi et trouvé qu'une div était justifiée ici.

Et ça marche bien Smiley smile
Stephan a écrit :
À la bonne heure Smiley lol

Au fait, c'est ok pour les images sous IE/Mac Smiley cligne


Tant mieux Smiley smile
On essait d'être accessible le plus possible Smiley biggrin
• Oui, le résultat est le même maintenant.
Sur Mac, ces remarques ne concernent que IE-Mac.
Le déplacement du texte sous les images provient du clear:both; indiqué dans ta classe présentation qui sert à styler tes div. Bizarre, oui mais c'est parce que IE-Mac a un comportement spécial ( pour ne pas dire idiot ) avec clear:both; auquel il ajoute clear:left. C'est pourquoi, je te suggères un simple <br class="retour" /> entre chaque div.
 br.retour {clear: both;}
Ou bien de modifier un <hr /> dans le but de le faire ressembler à un <br /> : ( sans aucun effet sur IE-Mac, qui gardera une hauteur (2px), une marge (7px) et une bordure (1px) )
hr.retouralaligne {
height: 0;
margin: 0;
border: 0; }


<edit> petit correctif à ce que je viens de dire : <br> est un élément de type en ligne, il ne peut donc se trouver isolé entre deux div ( pour la validité de la page ) Il faudra donc l'indiquer soit juste avant la fermeture de la div :
<br class="retour" /></div>
Ou bien dans un petit paragraphe entre les div :
<p><br class="retour" /></p>

Modifié par Aureance (20 Jul 2005 - 21:01)
Sujet clos
Aller à