[résolu] IE-Firefox : Problème mise en forme

Bonsoir,

Après maintenant plus d'une heure de recherche et sans succès je me permets de poser ma question ici .

Mon site s'affiche correctement sous Firefox mais sur IE on peut voir qu'en bas de la page, il y a un grand rectangle blanc qui apparait sans raison. Comment ca se fait ?

Autre problème maintenant, moins important, sous Firefox, les petit rectangles sur le côté sont très espacés tandis que sur IE pas. Comment je peux faire pour qu'ils soient plus rapprochés et a même distance aussi bien sur IE que Firefox ?

Dois-je vous coller mon fichier CSS et mon code xHTML ici, ou le lien suffit ?

Merci pour votre aide

A++
Modifié par fabienfs (03 Jun 2007 - 18:40)

ca manque de commentaires pour s'y retrouver la dedans

salut,

Je crois pas que ce soit ça mais déjà tu as 2 <div id="main"> qui se suivent dans ton code.

edit: a trop tard j'avais pas vu la reponse precedente
Modifié par CPascal (03 Jun 2007 - 10:20)

Bonjour,

Merci pour vos réponses

J'ai entièrement revu mon code mais il me reste plus 2 erreurs pour la validation

L'erreur est la suivante :

Error Line 114 column 5: document type does not allow element "ul" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.
		<ul>

Le problème est donc qu'il n'accepte pas de balise <ul> dans une balise <span>. Je ne sais pas comment m'y prendre autrement. J'utilise le span car sur mon site j'ai fait des espèces de "box" pour mettre le contenu dedans.

CSS :

.box {
	width: 550px;
	border: 1px solid #8c2a45;
}

.box h1 {

	width: 100%;
	height: 23px;
	background: url(images/bg-box.jpg) no-repeat;
	padding: 3px 0 0 10px;
	font-size: 14px;
	color: #ffffff;
}

.box span {
	padding: 10px;
}

HTML :

<div id="box">
<h1>En directe</h1>
<span>

<ul id="player">

<li><img src="images/poste-radio.jpg" alt="Poste Radio" width="133" height="80" /></li>

<li><img src="images/poste-radio2jpg" alt="Poste Radio" width="133" height="80" /></li>

<li><img src="images/poste-radio3jpg" alt="Poste Radio" width="133" height="80" /></li>

</ul>

<br />

<a title="Aide sur les players" href="Aide.aspx">Besoin d'aide, cliquez ici</a>

</span>
</div>

Qu'elle balise pourrais remplacer mon <span> actuel ?

Merci

A++
Modifié par fabienfs (03 Jun 2007 - 14:57)

Bonjour,

Je ne vois pas l'utilité du span, d'autant que c'est par défaut une balise inline ne pouvant pas contenir de balise de type block (ul, p ...)

Hello,

A la base j'utilisait le span pour définir un margin pour pas que mon texte colle a ma border.

Je les ai enlevés, et mon code est valide xHTML Transitional.

Il me reste à présent que le problème des "pavés" sur le côté droit qui s'espacent trop dans Firefox alors que dans IE pas. J'ai pourtant défini qu'un margin-bottom: 5px. Je ne comprend pas pourquoi ils s'écartent tant.

Je ne comprend pas non plus pourquoi tout en bas de ma page, sur le côté droit, une ligne blanche dépasse sous IE et pas sous Firefox

A++
Modifié par fabienfs (03 Jun 2007 - 16:38)

Re,

Effectivement c'était le commentaire qui posait problème.
Avant d'essayer vraiement, j'y aurais jamais cru !

C'est quoi exactement ce mode Quirks d'IE ?

Encore une toute petite chose : tu ne sais pas comment ca ce fait que les cadres "pavés" sur la droite sont ci espacés ? C'est incompréhensible, il n'y a pas de margin ou de padding ni de <br /> pourtant il y a un grand écart entre chaque pavés.

Conernant la balise <form>, c'est par défaut dans asp.net. Ca na rien avoir (du moin je le pense) avec le web 2.0

Encore merci
Modifié par fabienfs (03 Jun 2007 - 17:59)

Re,

Ben, tes divs frequence, grille et webcam ont par contre un beau padding

Humm, le padding s'aplique quand même à l'intérieur de mon div, je ne comprend pas pourquoi ca joue sur l'extérieur.

Qu'est ce que je dois utiliser à la place du padding pour bien positionner mon texte ? J'ai essayer un top: 50px; mais mon texte ne bouge pas
Modifié par fabienfs (03 Jun 2007 - 18:10)

Re,

Par exemple:

	  <div id="frequences">
	  <p>Bruxelles : 89.9 FM</p>
	  </div>

#frequences {
	width: 178px;
	height: 92px;
	position: relative;
	background: green;
	color: #90772d;
	font-weight: bold;
	font-style: italic;
	font-size: 14px;
	margin-bottom: 5px;
}

#frequences p{
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
}

Nickel !

Merci beaucoup.

A++