Emplacement de l'ascenseur sur un DIV avec Firefox

**legentil** · 02/06/2011, 16h52

Bonjour à tous !

J'ai un problème, j'ai une page dans laquelle j'ai une zone DIV.
Je voudrais que cette zone affiche un ascenseur quand le contenu est trop grand.

J' ai donc rajouté dans mon CSS la ligne overflow:auto;

ça fonctionne bien sous chrome, l'ascenseur est placé au niveau du div, par contre sous firefox 4.0.1 la zone DIV est allongée et l'ascenseur se met donc directement sur le bord de la page quand mon div dépasse.

Quelqu'un saurait il comment changer ce comportement sous firefox?

voilà mon code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<div class="tableau">
	<table WIDTH="100%" HEIGHT="100%" CELLSPACING="0" BORDER="0" CELLPADDING="0">
		<tr HEIGHT=10>
			<td class="tableau_hg"WIDTH=10/>
			<td class="tableau_fond"/>
			<td class="tableau_hd" WIDTH=10/>
		</tr>
		<tr>
			<td class="tableau_fond" WIDTH=10 />
			<td>
				<div class="contenu" id="contenu"/>	
			</td>
			<td class="tableau_fond" WIDTH=10/>
		</tr>
		<tr HEIGHT=10>
			<td class="tableau_bg" WIDTH=10/>
			<td class="tableau_fond"/>
			<td class="tableau_bd" WIDTH=10/>
		</tr>
	</table>
</div>

et mon CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
.contenu {
  height:100%;
  width:100%;
  background-image: url("images/jaune.png");
  overflow:auto;
}

Merci d'avance pour votre aide !

**12monkeys** · 02/06/2011, 19h21

Bonsoir

Ta div 'contenu' n'est pas fermée ? Dans ton exemple elle n'a pas de balise fermante </div>; Si c'est le cas, c'est surement çà qui crée le bug.

**legentil** · 03/06/2011, 09h47

Merci pour ta réponse, en fait ma balise est vide :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div class="contenu" id="contenu"/>

C'est ensuite du code javascript qui va dynamiquement charger un contenu dans ce div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function charger(adresse, titre)
 {
  // Nous créons un objet XMLHttpRequest
  get_Xhr();
  xhr.onreadystatechange = function()
   {
    //Si la requete est terminée est qu'elle ne remonte pas d'erreur ( voir *1* ci dessous )
    if(xhr.readyState == 4 && xhr.status == 200)
     {
      document.getElementById('contenu').innerHTML = xhr.responseText;
	  document.title = titre;
     }
   }
  // Mais c'est ici que l'on indique les valeurs à transmettre
  // On ouvre la page "lapage.php" en mode asynchrone ( true ) 
  xhr.open("POST", adresse, true);
  // Obligatoire si l'on passe en POST   
  xhr.setRequestHeader('Content-Type','x-www-form-urlencoded');
  //Envoie de la requete
  //xhr.send("nserie="+nserie);
  xhr.send();
 }

J'ai essayé de mettre un contenu statique dans cette balise DIV, mais le comportement reste le même

**12monkeys** · 03/06/2011, 10h05

Bonjour

Ton code n'est pas bon :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="contenu" id="contenu"/>

il faut obligatoirement une balise fermante :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="contenu" id="contenu"></div>

Pour éviter ce genre d'erreur tu peux analyser ton code avec les outils du W3C : http://validator.w3.org/

**legentil** · 03/06/2011, 12h47

Merci pour ta réponse, j'ai corrigé et passé le reste du code au vérificateur w3c.
ça m'a permis de corriger toutes les imperfections de mon code, par contre j'ai un warning me disant que mon document n'avait pas de doctype.
J' ai rajouté :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Tant que je laisse cette balise au début de mon document, mon css n'est plus pris en compte, je l'ai donc enlevé en attendant de trouver une solution au problème.

Par contre, bien que le controle w3c se termine par un success, firefox continue de me placer l'ascenseur sur la page et pas sur mon DIV

Une autre idée?

Mon site dans son état actuel peut être vu à l'adresse :http://lesbourrachos.free.fr/2011/

Merci encore !

**NoSmoking** · 03/06/2011, 13h02

bonjour,
commences par mettre des unités aux valeurs dans ta feuille de style, c'est IMPERATIF, si la valeur est significative, différente de 0.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
top : 160;   /* pas BIEN */
top : 160px; /* BIEN */

**12monkeys** · 03/06/2011, 13h07

Le problème est lié à l'association de ton height:100% sur ton .contenu {} avec un tableau : ton div .contenu {} se trouve dans un div.

Si tu mets une valeur fixe sur .contenu {} genre 500px alors cela fonctionne. De même que si tu supprimes ton tableau height:100% va reprendre ses effets.

Je me demande aussi pourquoi utiliser le positionnement absolu pour positionner le corps de ta page. Ce positionnement doit être utilisé avec parcimonie, regarde ici pour d'autres conseils : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

Emplacement de l'ascenseur sur un DIV avec Firefox

CSS

Vue hybride

Discussions similaires

Partager

Partager