probleme avec display ie

**loxipar** · 22/04/2010, 18h25

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.....

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
ul#menu span{
 display: none;

en rapport avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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><!--.accueil -->

Ai-je raison et si c'est le cas, quelqu'un connaitrais la solution au problème ? :p

Merci beaucoup pour votre aide

**psykoz** · 22/04/2010, 19h18

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
li
{
   float: left;
   margin: 0 15px;
}

**loxipar** · 22/04/2010, 19h53

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

**psykoz** · 22/04/2010, 20h51

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.

**loxipar** · 22/04/2010, 20h59

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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; 
    }