28220 sujets

CSS et mise en forme, CSS3

[résolu] Allignement plus haut sous firefox que sous explorer

Bonjour,

je bute sur un problème d'allignement que je ne comprend même pas.

Dans un conteneur de 76 px de hauteur, je desire mêtre en bas à gauche un texte et en bas a droite une barre de navigation.
J'ai donc positionné les deux (positionnement absolut) bottom:0 et left/right:0.

Seulement comme le dis le titre, sous firefox (et netscap 7) les deux éléments sont plus haut, alors que sous i.e tout roule...

J'ai déja testé un alignement float:left pour l'un et right pour l'autre en les incluant dans une liste non ordonée comme j'ai pus le lire dans d'autres poste mais cela complique grandement l'ensemble du code.

J'aimerais déja comprendre ce qui m'échappe là. Si quelqu'un pourait me dire ce que c'est, ça serait simpa Smiley cligne

voici le code html :

<div id="top">

<div id="txt2nav"><p>&nbsp;Vous êtes ici.....là........et là.....</p></div>

<ul class="bar2nav">
     <li><a href="#">lien 1</a></li>
     <li><a href="#">lien 2</a></li>
     <li><a href="#">lien 3</a></li>
</ul>  
</div>


et le css :

body {
width: 798px;
margin: 0;
position: relative;
}

/* le contenneur  -----------------------*/

#top {     
height: 76px;
width: 798px;
position: relative;
background-image: url(degrad.jpg);
}

/* le texte a gauche  -----------------------*/ 

#txt2nav {     
position: absolute;
color: #005;
left: 0;
bottom: 0;
}
 

/* barre de navigation -----------------------*/

#top ul {   
list-style-type: none;
position: absolute;
right: 0;
bottom: 0;

}

#top li {
display: inline;
float: left;
border: 1px solid #000;
background-color:#FFF;
}

Modifié par Hermes (02 Dec 2005 - 09:01)
Bonsoir,

Le résultat dans IE provient d'un bug de ce navigateur sur les marges.

Pour obtenir le même résultat dans Firefox, Opera, etc, annuler la marge inférieure du paragraphe et de l'élément ul.
Bonjour,

Merci de ton aide Laurent Denis.

Je suis surpris que le problème vienne d'une marge, je pensais qu'elles étaient par défaut à une valeur de 0.

Cela fait aussi parti du bug de la longueur de boite ?
Bonjour,

Non aucun rapport avec le modèle de boîte : c'est un problème de fusion des marges verticales. Un petit coin de CSS2 qu'on cache le plus souvent car il est un peu traumatisant Smiley cligne

Cela dit, beaucoup d'éléments HTML ont des marges verticales par défaut : <hn>, paragraphes, listes, blocs de citation, <form>... Voir les feuilles de styles par défaut livrées avec Firefox, ou la feuille de style par défaut contenue dans les annexes de la spécification CSS2. Il y a aussi un échange intéressant entre Eric Meyer et Yan Hixon sur le sujet, dans leurs blogs respectifs. Et je crois bien en parler quelque-part sur OpenWeb, dans un article sur les feuilles de styles (pour le coup, je ne sais plus où).
Modifié par Laurent Denis (02 Dec 2005 - 10:45)
Sujet clos
Aller à