28220 sujets

CSS et mise en forme, CSS3

[résolu] Positionnement Firefox/IE décalé en hauteur

Salut ,

Vu l'heure, je vais essayer de rester clair, lucide, et conçis Smiley biggol

J'ai un calque "Navigation" positionné à 68px du haut de ma page (par dessus un calque Cadre qui est sensé regroupé un Header -dans lequel se trouve mon calque "Navigation"- , deux cadres de Contenu et un Footer ... je ne citerai pas l'origine de depart de mon modele Smiley confused car je positionne les 3/4 en abolute ... ) , et j'obtiens un decalage du haut de 10px, entre IE ( Smiley fache ) et Firefox... j'ai essayé de créer des marges ou padding, rien n'y fait ! donc si quelqu'un à une solution et à quelques minutes à perdre .. Smiley cligne

Le modele de page :
http://vincent.noki.free.fr/labo/cadet/planning.php
Et pour le CSS (bloc id #Navigation en fin) :
http://vincent.noki.free.fr/labo/cadet/tpl/stylesheet.css

Pour plus de details direct ...


Bonne journée à tous Smiley biggrin 
CSS (Imbrication : Cadre -> Header -> Navigation) :

#Cadre {
        position: absolute;
        width: 800px;
        min-height: 100%;
	left: 50%;
	margin-left: -400px;
        background: #fff;
        text-align: left;
	border-right: 1px solid #778;
	border-left: 1px solid #778;
}
#CadreHeader {
	height : 100px;
	background-image : url('../img/header_fond.png');
	background-position : top left;
	background-repeat : no-repeat;
}
#Navigation {
	z-index: 2;
	position : absolute;
	left : 50%;
	top : 68px;
	width : 800px;
	margin-left : -400px;
	margin-bottom: 5px;
}

xHTML (c'etait mieu aaavant ! [confused]) :

<div id="Cadre">
	<div id="CadreHeader">
		<div id="SessionInfo">...</div>
		<div id="Navigation">
			<ul id="ListeMenu">
				<li><a href="planning.php" id="CurrentMenu">Planning</a></li>
				<li><a href="patients.php">Patients</a></li>
				<li><a href="consultations.php">Consultations</a></li>
				<li id="StatistiqueMenu"><a href="statistiques.php">Statistiques</a></li>
			</ul>
		</div>
	</div>
</div>

Edited by Champolion (13 Sep 2005 - 20:00)
Bonjour.

Le lien ne fonctionne pas (pour se rendre compte).

#Cadre {
position: absolute;
width: 800px;
[b]min-height: 100%;[/b]


La propriété min-height est inopérante sous IE.

C'est déjà un problème.
Modifié par GeorgesM (13 Sep 2005 - 07:56)
en fait j'ai le meme probleme
et j'ai remarqué qu'en virant la balise situé en haut du doc html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
tout rentre dans l'ordre pour la position... mais pas pour le rendu Smiley decu

ya pas un moyen de la mettre ailleurs cette balise ?
C'est comme demander à un architecte de placer les interrupteurs pour la lumière au fond du couloir plutôt qu'à l'entrée...
Probleme résolu, j'ai joué avec selecteur ' > ' et le padding (au pif ... Smiley langue ).

html>body #Navigation {
	margin-top : -12px; /* Supprimes la marge superieur sur Firefox */
}
#Navigation {
	padding: 1px 0 1em 0;
}

Modifié par Champolion (13 Sep 2005 - 23:25)
Sujet clos
Aller à