5568 sujets

Sémantique web et HTML

[Résolu] Flotant dans une div plante sur Firefox :(

Salut,
J'ai ce code (en simplifié) :

<html>
<head>
	<title>Test</title>
	<style>
		body  {
			background-color: grey;
			}
		#page {
		 text-align: left;
		background-color: #F2F2F2;
		width:950px;
		position:relative;
		margin: 5px auto;
		border: 4px solid white;
	}
	</style>
</head>
<body>
<div id="page">
	<span style="float:left">Tadatata</span>
	<span style="float:right">Tutuuut</span>
</div>
</body>
</html>


Sur opera, ca s'affiche parfaitement comme je veux :
http://files.getwebb.org/files/20/91/69/35d8078f7edec26b49a39a21395459f45c/miniature_infos.png
Mais sur Firefox, le flottant fait planter la page :
http://files.getwebb.org/files/0f/f3/eb/1905fd3f099ee139e0fd3a65986133b287/miniature_infos.png

Je suis vraiment bloqué par ce truc tout con, je pense pas que c'est moi qui ai fait une erreur mais plus que c'est un bug des Gecko Smiley decu . J'immagine que je ne suis pas non plus le premier à avoir ce problème (même si j'ai rien trouvé de concret en recherchant :'()

Merci
Modifié par Rapha (02 Oct 2008 - 10:05)
Bonsoir Rapha,

J'ai, en ce qui me concerne, et avec un Doctype valide... le même rendu sous Opéra et sous FF.

La validité de ton code faisant défaut, le navigateur se débrouille comme il peut pour tenter d'interprêter ton code, avec plus ou moins de réussite...gloire à Opéra sur ce coup là Smiley cligne

Un contexte de formatage (overflow:hidden par exemple) + un Doctype valide devrait réconcilier ces deux navigateurs Smiley cligne

Cdt,
Sylvain
Bonjour,

Tout d'abord je te conseillerai d'utiliser un feuille de style a part dans un fichier .css

Ensuite il vaut mieu ne pas insérer du css directement dans un html comme tu la fait ici : 


<span style="float:left">Tadatata</span>
<span style="float:right">Tutuuut</span>


Pour finir essaye de faire comme ceci :

.css

body 
{
 background-color: grey;
}

#page 
{
text-align: left;
background-color: #F2F2F2;
width:950px;
position:relative;
margin: 5px auto;
border: 4px solid white;
}

.left
{
float:left;
}


.right
{
float:right;
}


.html


<body>

<div id="page">
   <div class=left>Tadatata</div>
   <div class=right>Tutuuut</div>
</div>
Salut,
je viens d'essayer avec un DOCTYPE (en fait y'en avais déjà un sur la page ou j'utilise le code, mais pas sur l'exemple que j'ai simplifié) :
<!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>
	<title>Test</title>
	<style>
		body  {
			background-color: grey;
                                          overflow:hidden
			}
		#page {
		 text-align: left;
		background-color: #F2F2F2;
		width:950px;
		position:relative;
		margin: 5px auto;
		border: 4px solid white;
	}
	</style>
</head>
<body>
<div id="page">
	<span style="float:left; width:200px">Tadatata</span>
	<span style="float:right; margin-left:200px; text-align:left;">Tutuuut</span>
</div>
</body>
</html>


... Et malheureusement ca n'a pas marché :'(

Sinon j'ai trouvé une solution pas trop propre avec un <div style="clear: both"></div>

EDIT : Oui, mais je le repete j'ai simplifié ma page, la page réelle est avec un CSS externe, les codes dans le CSS et tout Smiley langue
Modifié par Rapha (20 Sep 2008 - 22:46)
Rapha a écrit :
Salut,
(en fait y'en avais déjà un sur la page ou j'utilise le code, mais pas sur l'exemple que j'ai simplifié) :

Ne pas simplifier les exemples Smiley cligne

Donc, externaliser les mises en forme si ce n'est déjà fait, et appliquer le contexte de formatage sur le conteneur des flottants :
#page {
	text-align: left;
	background-color: #F2F2F2;
	width:950px;
	position:relative;
	margin: 5px auto;
	border: 4px solid white;
	[#blue][b]overflow:hidden;[/b][/#]
}


Cdt,
Sylvain
Sujet clos
Aller à