probleme avec display ie

Version imprimable

Bonjour à tous :)

J'ai un petit problème avec un display: none (je pense que ca vient de là)

Je viens de finir de coder mon site, je l'ai essayé sur tous les navigateurs possible, il s'affiche nickel, je le passe sous ie, les onglets de ma barre de navigation partent complètement en vrille T_T

http://img7.hostingpics.net/pics/969699nav1.jpg
sous firefox

http://img7.hostingpics.net/pics/836125Snavprob.jpg
sous ie..... :x

j'ai l'impression ie n'a pas pris en compte ce bout de code css :
Code:

1 2 3 ul#menu span{ display: none;
en rapport avec :
Code:

1 2 3 4 5 6 <div id="header_boutons" <ul id="menu" class="lien_up"> <li class="accueil"> <a href="http://www.designalpha.fr/"></a> <span>Accueil</span> </li>
Ai-je raison et si c'est le cas, quelqu'un connaitrais la solution au problème ? :p

Merci beaucoup pour votre aide :)

22/04/2010, 18h18
psykoz
Bonjour

Ce que je constate dans votre problème que tu essaie de mettre des <li> en même ligne :

Tu fait flotter et c'est reglé :
Code:

1 2 3 4 5 li { float: left; margin: 0 15px; }
22/04/2010, 18h53
loxipar

merci pour ta réponse,

en faisant flotter je me retrouve avec l'ordre des boutons inversés (a propos - contact - le blog - accueil)

et j'ai toujours ce probleme d'affichage des puces T_T
22/04/2010, 19h51
psykoz

Merci de mettre le code html et css de votre page ou bien un lien vers la page afin d'essayer de vous aidez a trouver une solution pour votre probléme.

----------------------------------- pour le code html ---------

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
<div id="conteneur">
<div id="header">
<div id="header_title">
<h1>  
<a href="http://www.designalpha.fr/">Design Alpha</a><span class="description">De l'image numérique à la 3D</span>
</h1>
 </div><!-- #header_title -->
<div id="header_boutons"
<ul id="menu" class="lien_up">
 <li class="accueil">
<a href="http://www.designalpha.fr/"></a>
<span>Accueil</span>
 </li><!--.accueil -->
<li class="leblog">
<a href="http://www.designalpha.fr/"></a>
<span>LeBlog</span>
</li>
<li class="contact">
<a href="http://www.designalpha.fr/"></a>
<span>Contact</span>
</li>
<li class="about">
 <a href="http://www.designalpha.fr/?page_id=2"></a>
<span>A propos</span>
 </li>
</ul>
   </div> <!-- #header_boutons -->
</div><!-- #header -->

-------------------- POUR LE CSS ----------------

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
    ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{ 
        margin:0; 
        padding:0; 
    } 
    ul{ 
        list-style:none; 
    } 
    a{ 
        text-decoration:none; 
    } 
    a:hover{ 
        text-decoration:none; 
    } 
    a img{ 
        border:0; 
        padding: 0 15px 15px; 
    } 
    .clear{ 
        clear:both; 
    } 
    html{ 
        background:#edf9fe url(images/bgr_html.gif) repeat-x; 
        border-bottom:5px solid #ffffff; 
    } 
    body{ 
        background: url(img/backoffice.jpg) repeat-y scroll center top; 
           background-color: #022954; 
           font-family: Verdana,'Lucida Grande',Arial,Sans-Serif; 
           margin: 0; 
           padding: 0; 
           position: relative; 
           z-index: 1; 
           text-align: left; 
    } 
    #conteneur{ 
           background: url(img/background.jpg) no-repeat scroll center top transparent; 
           margin: 0; 
           padding:0; 
           position:relative; 
           z-index:1; 
    } 
    /* --- menu --- */ 
 
    ul#menu { 
        margin: 0; 
        padding: 0; 
    } 
    ul#menu span{ 
        display: none; 
    } 
    ul#menu li { 
        list-style: none outside none; 
        margin: 0; 
        padding: 0; 
        position: absolute; 
    } 
    ul#menu li, ul#menu a { 
        display: block; 
        height: 40px; 
        padding: 0px; 
        width: 95px; 
        margin: 0 0 3px 0; 
    }

voila.

Ça fait sept heure que je suis sur ce problème T_T

22/04/2010, 20h43
psykoz

1 pièce(s) jointe(s)

Bonsoir

Vous trouverez un petit exemple dans le fichier joint.

j'ai deja testé l'exemple sur : ie6-7, firefox, opera et safari.
22/04/2010, 21h12
loxipar

Merci beaucoup d'avoir pris le temps de me rediger un exemple :)

C'est vrai que je me suis focalisé sur le css mais j'ai pas pensé a faire des modifs dans le html :) En tout cas j'ai fait qques test et on dirait qu'il y'a beaucoup de mieux. Je fait une petite pause histoire que mes yeux s'arretent de pleurer à cause d'une journée de code intensive et je reviens vous donner du nouveau :)

encore merci ^
22/04/2010, 23h18
psykoz

je vous souhaite bonne chance ;).