18041 sujets

Questions générales et questions de débutants

Supprimer un espacement verticale entre deux div sous IE

Bonjour,

Je suis apprentis webmaster et je suis confronter dans mon projet à un petit problème que voici;
le code ci-après fonctionne parfaitement sous Firefox et Opéra mais pas sous IE:


HTML

[#green]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<link href="css/bloc_dossier.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur_bloc_dossier">
  <div id="tete_bloc_dossier"></div>  
  <div id="corps_bloc_dossier">
	<div id="surtitre_dossier" class="surtitre_dossier">Blalaalal</div>
    <div id="image_dossier"><img src="img/Sans-titre-1.jpg" width="113" height="77" /></div>
    <div id="texte_bloc_dossier">
    <p>dsfsd kljlkj fsdf dsfsd kljlkj fsdf dsfsd k lk fdh ffhd dfh dfgh ghfdh gfhdf hf gfhf fgdhdfj fsdf dsfsd kljlkj fsdf dsfsd kljlkj fsdf dsfsd k lkj fsdf dsfsd kljlkj fsdf dsfsd kljlkj fsdf dsfsd klj lkj fsdf dsfsd kljlkj fsdf dsfsd kljlkj klj lkj fsdf dsfsd kljlkj fsdf dsfsd kljklj lkj fsdf dsfsd kljlkj fsdf dsfsd kljklj lkj fsdf dsfsd kljlkj fsdf dsfsd kljklj lkj fsdf dsfsd kljlkj fsdf dsfsd kljklj lkj fsdf dsfsd kljlkj fsdf dsfsd kljklj lkj fsdf dsfsd kljlkj fsdf dsfsd kljklj lkj fsdf dsfsd kljlkj fsdf dsfsd klj</p>
    </div>
  </div>  
  <div id="pied_bloc_dossier"> </div>
</div>
</body>
</html>
[/#]



CSS


[#green]
@charset "utf-8";
/* CSS Document */

#conteneur_bloc_dossier{
	width:488px;
	float:left;
	margin: 0;
	padding: 0;
}
#tete_bloc_dossier{
	background:url(../img/tete_bloc_dossier.png) no-repeat;
	width:488px;
	height:12px;
	float:left;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
#corps_bloc_dossier{
background:url(../img/corps_bloc_dossier.png) repeat-y;
width:488px;
margin:0 0 0 0;
padding:0 0 0 0;
float:left;
}

#surtitre_dossier{
/*float:top left;*/
margin:0 0 0 10px !important;
padding:0 0 0 25px !important;
margin:0 0 0 11px;
padding:0 0 0 12,5px;
}

.surtitre_dossier{
background:transparent url(../img/bg_more_big.gif) no-repeat;
/*../../images*/
/*scroll*/
width:453px;
color:#C0267D;
font-size:14px;
font-weight:bold;
text-decoration:none;
}

#image_dossier{
margin:0px;
padding:0px;
float:left;
}

#image_dossier img{
width:113px;
padding:10px 8px 5px 8px !important;
margin:0;
}

#texte_bloc_dossier{
float:top left;
}
#texte_bloc_dossier p{
	text-align:left;
	margin:0px 0px 0px 0px;
	padding:10px 10px 12px 20px;
}
#pied_bloc_dossier{
float:left;
background:url(../img/pied_bloc_dossier.png) no-repeat;
width:488px;
height:17px;
}
[/#]

upload/21219-VersionIE6.jpg
Capture sous IE6 (dysfonctionnement visible juste après la tête du cadre)
upload/21219-VersionFFe.jpg
Capture sous Firefox3 c'est ce que je veux obtenir


À très vite j'espère!!!
Merci d'avance pour votre précieuse aide
Modifié par rida (19 May 2009 - 12:22)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Pour ce qui est de ton problème, j'ai beaucoup de mal à le saisir. L'images images que tu as postées nous présentent la même chose (à part un espacement supérieur sous l'image dans FF (seconde image), qui est très certainement normal (dû à la hauteur de ligne du texte)).

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour,

En effet en plus de ne pas respecter une de Règle de base du forum, tu ne facilites pas le travail de ceux qui souhaite t'aider. Une adresse visible serait déjà pas mal ou a défaut nous montrer comment tu as découpé tes images, bien qu'on puisse le deviner en lisant ton css, c'est quand même assez peu motivant de refaire tout le boulot de découpe.

Voila pour être tout à fait franc je veux bien t'aider à tracker ce bug mais aide nous un peu de ton côté
Smiley cligne
Laurie-Anne a écrit :

Pour ce qui est de ton problème, j'ai beaucoup de mal à le saisir. L'images images que tu as postées nous présentent la même chose (à part un espacement supérieur sous l'image dans FF (seconde image), qui est très certainement normal (dû à la hauteur de ligne du texte)).


Je pense qu'il s'agit de l'espace entre le haut du cadre gris (coins arrondis) et le corps du cadre en question... en haut, juste au dessus de "[+] Blalaaala"
Bonjour,

Je propose d'attribuer une couleur de fond bien visible à #tete_bloc_dossier, ça devrait permettre de mieux cerner le problème. Donc, côté CSS:
#tete_bloc_dossier{
background: red url(../img/tete_bloc_dossier.png) no-repeat;
...
}

Je n'ai pas testé (forcément, pas la page sous la main... et pas IE6 non plus, d'ailleurs), mais je dirais qu'IE6 ne respecte pas la hauteur de 12px, mais applique plutôt la hauteur d'une ligne de texte complète (dans les 18-19px dans le cas présent, à vue de nez). C'est un bug connu d'IE6, corrigé dans les versions 7 et 8.

Correctifs possibles:
1. on s'en fiche, c'est IE6;
2. on diminue la hauteur d'une ligne de texte dans le bloc fautif. Ce qui peut se faire de deux manières différentes (je laisser chercher un peu).
3. on force IE6 à prendre en compte la hauteur de 12px en rajoutant un overflow:hidden (à voir, pas sûr que ça soit suffisant).

Bon, après c'est juste d'expérience que je dis ça, je peux me tromper. Smiley smile

PS: si quelqu'un veut faire une recherche sur les ressources en ligne qui traitent de ce bug, pour écrire une courte synthèse à publier comme astuce sur Alsacréations, ça serait tip top.

PPS: la mise en forme correcte du code, ça tient toujours. Il peut être bon de lire les informations données à ce sujet (et pas en diagonale), voire de suivre les liens d'aide donnés. Merci d'avance. Smiley smile
Modifié par Florent V. (18 May 2009 - 22:41)
a écrit :
Je pense qu'il s'agit de l'espace entre le haut du cadre gris (coins arrondis) et le corps du cadre en question... en haut, juste au dessus de "[+] Blalaaala"


Tu as raison mistike c'est bien ça mon problème

Merci beaucoup de vos réponses !!
Florent V. j'essaierai tes suggestions et je vous tiens au courant!! a bientôt
Modifié par rida (19 May 2009 - 12:34)
Merci Florent V.
pour tes indications qui m'ont permises de mettre un terme à mon problème.
Notamment avec la ligne overflow:hidden;
#tete_bloc_dossier{
	background:url(../img/tete_bloc_dossier.png) no-repeat;
	width:488px;
	height:12px;
	float:left;
	overflow:hidden;
	margin:0 0 0 0;
	padding:0 0 0 0;
}


Un GRAND GRAND merci à tous pour vos réponses.
Modifié par rida (25 May 2009 - 11:17)
Sujet clos
Aller à