28173 sujets

CSS et mise en forme, CSS3

Positionnement buggé sous IE

Avant de me jeter par la fenêtre...
Le problème concerne la bannière de mon site.
Dans cette bannière, je place:
1. Un logo, en haut à droite
2. Juste en dessous, l'dentité de l'utilisateur concerné
3. A l'extrême droite (peu importe la hauteur), un champ "Recherche"

Tout ceci donne:

#Banniere {
	position: relative;
	background-color: #FFF;
	width: 760px;
	height: 97px;
	margin-bottom: 5px;
}
.logo {
	position: absolute;
	left: 11px;
	top: 17px;
	width: 130px;
	height: 42px;
}

.qui{
	position: absolute;
	top: 70px;
	left: 17px;
	width: 480px;
	height: 20px;
	text-align: left;
}

.recherche{
	top: 70px;
	float:right;
	text-align: left;
}


Résultat impeccable sous Firefox Smiley cligne alors que sous IE le champ "Recherche" reste désespérement centré en plein milieu de la bannière au lieu de se caler à droite comme souhaité.
Une idée serait la bienvenue.
J'ai aussi essayé ceci mais sans plus de succés:


.recherche{
	position: absolute;
	top: 30px;
	right:20px;
	height: 40px;
	text-align: left;
}
Avec tes styles mais dans un code "propre", ça réagit bien et de la même façon pour les deux navigateurs chez moi:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>test</title>
<style type="text/css">

#Banniere {
	position: relative;
	background-color: #FFF;
	width: 760px;
	height: 97px;
	margin-bottom: 5px;
	background-color: pink;
}

.logo {
	position: absolute;
	left: 11px;
	top: 17px;
	width: 130px;
	height: 42px;
	background-color: blue;
}

.qui{
	position: absolute;
	top: 70px;
	left: 17px;
	width: 480px;
	height: 20px;
	text-align: left;
	background-color: white;
}

.recherche{
	top: 70px;
	float:right;
	text-align: left;
	background-color: red;
}
</style>
</head>

<body>

<div id="Banniere">
		 <div class="logo">logo</div>
		 <div class="qui">user</div>
		 <div class="recherche">cherche</div>
</div>

</body>
</html>


(j'ai ajouté des couleurs de fond pour me faciliter la lecture)
Alors là, je vois pas du tout !!!
J'ai vidé le cache sous IE, que faire d'autre? Bon, c'est déja pas un problème au niveau du code.
Merci les gars pour votre coup de main, je continue à chercher ce qui coince.
Bigre! J'ai fait comme Vikchill, j'ai rajouté un background-color: red; à .recherche et aucune couleur n'apparait sous IE ! !
J'ai visualisé la page depuis un autre PC et c'est exactement pareil.
Adieu, monde cruel ! Smiley decu
Sujet clos
Aller à