28220 sujets

CSS et mise en forme, CSS3

[Résolu] <li> margin et position absolute sur IE

Bonjour,

Je m'excuse tout d'abord pour les questions un peu en "vrac" et si les sujets ont déjà été abordés (j'ai tout de même essayé de chercher avant de poster sans succès). Je début en css et comme l'aurez compris, tombe sur des problèmes avec IE.

1er problème:
http://fushigidane.free.fr/pb_IE_li_margin.htm
Les listes constituant les éléments du menu gauche sont très espacées entre elle malgré un margin de 0. Or, rajoutant simplement une bordure aux <li>, les espacements redeviennent corrects.
Ce problème n'apparait pas sur Firefox.
(Lien vers ficher css correspondant.)

2ème problème:
http://fushigidane.free.fr/pb_IE_position_absolute.htm
Menu carrément pas à sa place...
J'ai pu corriger le problème en mettant un "float: left" plus adéquat au lieu d'un "position: absolute". Cependant j'aimerai bien comprendre pourquoi malgré un "position: absolute", l'affichage est correct sur Firefox et non sur IE.
(Lien vers ficher css correspondant.)

Et j'aurais encore une autre question sur "position absolute" Smiley smile
Soit le html:

<div id="page">
  <div id="menu">
       <!--code du menu-->
  </div>
  <div id="contenu">
       <!--code du contenu-->
  </div>
</div>

Et le css:

#page {
	margin: auto;
	width: 700px;
}
#menu {
	position: absolute;
        left: 10px;
	width: 140px;
}

Il s'agirait donc d'une page centrée sur l'écran et contenant un menu et autre chose à sa droite.
Cependant avec ce code là, le menu se trouve à 10px du bord de l'écran et non à 10px du bord de son conteneur "page". Pourquoi cela?
Sans le "left", le menu se trouve bien dans son conteneur (pas sous IE comme dit plus haut), mais avec left ça n'est plus le cas.
J'ai lu les tutoriels de Openweb sur le positionnement, mais il doit y avoir qqchose(s) qui m'échappe(nt)... Smiley ohwell


Désolé, je suis bien conscient de donner l'impression de s'adresser à un "service de dépannage" avec un tel 1er message Smiley sweatdrop
Modifié par mark_nikil (10 Mar 2005 - 22:24)
Ah merci!

En fait, ça ne marche pas tout à fait, car en mettant le conteneur en position absolute, le menu est bien placé dans son conteneur mais celui-ci n'est plus centrée.
Mais c'est pas grave, car ça je comprends un peu mieux du coup et j'ai pu trouver ici (:p) qu'il faut mettre le conteneur en "position:relative" pour garder le centrage tout en positionnant les éléments intérieurs =)
pour le problème 1 c'est un problème classique avec la propriété display: block dans une liste
Normalement en spécifiant la hauteur de ce block cela règle le problème.
Essaye de rajouter dans #menu a:hover la propriété height: 15px;


Une remarque normalement selon les normes du W3C on ecrit sans majuscules le code.
De plus il semble qu'a la fin de chacune de tes déclarations css il manque le ; pour fermer. Encore une fois c'est obligatoire il me semble.


Si la réponse ne va pas cherche sur le forum les endroits ou on parle des problemes de la propriété display. Je crois même que dans le faq on en cause.
Bon courage.
Merci de la réponse!

Effectivement en spécifiant la hauteur du block li, ça règle le problème (bon j'en rencontre un autre en même temps mais c'est pas trop grave ^^)

Vraiment bizarre en tout cas. C'est IE le problème ou y a aussi des trucs louches sous d'autres navigateurs? ^^

Pour le source de la page, il bizarre (en majuscule, pas de ";") car en fait j'ai sauvegardé le rendu html avec IE (y a un poil de php à l'origine).
En sauvegardant, IE met des majuscule aux balises et fait d'autres trucs bizarres Smiley langue (Firefox enlève le "/" sur les balises simples)
Sujet clos
Aller à