probleme display:none ie :s

Marsh Posté le 22-04-2010 à 17:07:55

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 :

ul#menu span{
display: none;

en rapport avec :

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

Merci beaucoup pour votre aide

Reply

Marsh Posté le 22-04-2010 à 17:07:55

Reply

Marsh Posté le 22-04-2010 à 17:56:18

Tu peux afficher ton code html et css en entier ?

Ton display:none; il est censé cacher le mot "Accueil" ?

Reply

Marsh Posté le 22-04-2010 à 18:03:36

Le display: none est censé cacher la liste de menu

-accueil
-blog
-contact
- a propos

sur firefox et tous les autres les puces sont bien masquées alors que sous ie on les voit clairement. Je pense que c'est ca qui me genere une erreur d'affichage sous ie mais j'en suis pas sur :x

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

<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>
<div id="header_boutons"
<ul id="menu" class="lien_up">
<li class="accueil">
<a href="http://www.designalpha.fr/"></a>
<span>Accueil</span>
</li>
<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> 
</div>

<div id="body-principal">
<div id="body_top">
<div id="body_left">
<div id="body_left_content">
<div id="content" class="narrowcolumn">
<div class="post" id="post-43">

<div class="post-top">
<div class="post-title">
<h2><a href="http://www.designalpha.fr/?p=43" rel="bookmark" title="Permanent Link to *Mode maintenance activé*">*Mode maintenance activé*</a></h2>
<h3>
Poste par <span>admin</span> | Poste dans <span><a href="http://www.designalpha.fr/?cat=3" title="Voir tous les articles dans News" rel="category">News</a></span> | le 17-04-2010-05-2008
</h3>

</div>
</div>

<div class="entry">
<p>Hello all,</p>
<p>Le titre est évocateur. Design Alpha est en maintenance pour quelques jours le temps que le nouveau design soit mis en place.</p>
<p>Je vous dis à très bientôt <img src='http://www.designalpha.fr/wp-includes/images/smilies/icon_smile.gif' alt='' class='wp-smiley' /> </p>

<p>Design Alpha</p>
</div>

<div class="postmetadata">
<div class="alignright"><a href="http://www.designalpha.fr/?p=43" ></a></div>
</div>
</div>

<div class="post" id="post-19">
<div class="post-top">

<div class="post-title">
<h2><a href="http://www.designalpha.fr/?p=19" rel="bookmark" title="Permanent Link to La sélection – 1">La sélection – 1</a></h2>
<h3>
Poste par <span>admin</span> | Poste dans <span><a href="http://www.designalpha.fr/?cat=5" title="Voir tous les articles dans Arts graphique expo" rel="category">Arts graphique expo</a>, <a href="http://www.designalpha.fr/?cat=3" title="Voir tous les articles dans News" rel="category">News</a></span> | le 13-04-2010-05-2008
</h3>

</div>
</div>

<div class="entry">
<p style="text-align: center;"><a href="http://www.designalpha.fr/wp-content/uploads/2010/04/poupee-goth-banner.jpg"><img class="aligncenter size-full wp-image-20" title="poupee-goth-banner" src="http://www.designalpha.fr/wp-content/uploads/2010/04/poupee-goth-banner.jpg" alt="" width="560" height="137" /></a></p>
<p>Voici le premier volet de la section « La sélection ». <a href="http://www.designalpha.fr/?p=19#more-19" class="more-link">Lire la suite »</a></p>

</div>

<div class="postmetadata">
<div class="alignright"><a href="http://www.designalpha.fr/?p=19" ></a></div>
</div>
</div>

<div class="post" id="post-8">
<div class="post-top">
<div class="post-title">

<h2><a href="http://www.designalpha.fr/?p=8" rel="bookmark" title="Permanent Link to 30 magnifiques fond d’écran">30 magnifiques fond d’écran</a></h2>
<h3>
Poste par <span>admin</span> | Poste dans <span><a href="http://www.designalpha.fr/?cat=3" title="Voir tous les articles dans News" rel="category">News</a>, <a href="http://www.designalpha.fr/?cat=4" title="Voir tous les articles dans Ressources" rel="category">Ressources</a></span> | le 13-04-2010-05-2008
</h3>

</div>
</div>

<div class="entry">
<p style="text-align: center;"><a style="text-decoration: none;" href="http://www.designalpha.fr/wp-content/uploads/2010/04/coeurwallpaper.jpg"><img class="aligncenter size-full wp-image-4" title="coeurwallpaper" src="http://www.designalpha.fr/wp-content/uploads/2010/04/coeurwallpaper.jpg" alt="" width="704" height="181" /></a></p>
<p style="text-align: left;">Tutorart a mis à disposition quelques fond d’écran tout simplement sublime. <a href="http://www.designalpha.fr/?p=8#more-8" class="more-link">Lire la suite »</a></p>
</div>

<div class="postmetadata">
<div class="alignright"><a href="http://www.designalpha.fr/?p=8" ></a></div>
</div>
</div>

<div class="post" id="post-1">
<div class="post-top">
<div class="post-title">
<h2><a href="http://www.designalpha.fr/?p=1" rel="bookmark" title="Permanent Link to Bienvenue sur DesignAlpha">Bienvenue sur DesignAlpha</a></h2>

<h3>
Poste par <span>admin</span> | Poste dans <span><a href="http://www.designalpha.fr/?cat=3" title="Voir tous les articles dans News" rel="category">News</a></span> | le 13-04-2010-05-2008
</h3>
</div>
</div>

<div class="entry">
<p>Sur ce site, nous parlerons de tout ce qui tourne autour de l’image numérique, du Web et son actu. Nous parlerons également de nouveaux talents dans de différents domaines qui parviennent à faire un trou dans la toile ^^</p>
<p>Une rubrique « Tutoriels » fera son apparition dans quelques jours.</p>
<p>D’ici là, je vous souhaite de passer de bons moments sur DesignAlpha <img src='http://www.designalpha.fr/wp-includes/images/smilies/icon_smile.gif' alt='' class='wp-smiley' /> </p>
</div>

<div class="postmetadata">
<div class="alignright"><a href="http://www.designalpha.fr/?p=1" ></a></div>
</div>
</div>

<div class="navigation">
<div class="alignleft"></div>
<div class="alignright"></div>
</div>

</div>

</div>
</div>

<div id="body_right">
<ul id="body_social">
<li id="facebook">
<a href="http://www.facebook.com/group.php?gid=110587708981962">
<span>Design Alpha sur Facebook</span>
</a>
</li>
<li id="twitter">
<a href="http://twitter.com/Dsignalpha">
<span>Design Alpha sur Twitter</span>
</a>
</li>
<li id="flux_rss">
<a href="http://www.designalpha.fr/?feed=rss2">
<span>Design Alpha RSS</span>
</a>
</li>
</ul> 
<div id="body_right_content">

<div id="main_search">
<form method="get" id="searchform_top" action="http://www.designalpha.fr/">

<div>
<input type="text" value="Tapez votre recherce ici..." name="s" id="searchform_top_text" onclick="this.value='';" />
<input type="image" src="http://www.designalpha.fr/wp-content/themes/Stripey/images/go.gif" id="gosearch" />
</div>
</form>
</div>

<div id="sidebars">
<div id="sidebar" class="sidebars">
<ul>

<li id="recent-posts-3" class="widget widget_recent_entries"> <h2 class="widgettitle">Articles récents</h2> <ul>
<li><a href="http://www.designalpha.fr/?p=43" title="*Mode maintenance activé*">*Mode maintenance activé* </a></li>
<li><a href="http://www.designalpha.fr/?p=19" title="La sélection – 1">La sélection – 1 </a></li>
<li><a href="http://www.designalpha.fr/?p=8" title="30 magnifiques fond d’écran">30 magnifiques fond d’écran </a></li>

<li><a href="http://www.designalpha.fr/?p=1" title="Bienvenue sur DesignAlpha">Bienvenue sur DesignAlpha </a></li>
</ul>
</li><li id="categories-4" class="widget widget_categories"><h2 class="widgettitle">Catégories</h2> <ul>
<li class="cat-item cat-item-5"><a href="http://www.designalpha.fr/?cat=5" title="Voir tous les articles classés dans Arts graphique expo">Arts graphique expo</a> (1)
</li>
<li class="cat-item cat-item-3"><a href="http://www.designalpha.fr/?cat=3" title="Voir tous les articles classés dans News">News</a> (4)

</li>
<li class="cat-item cat-item-4"><a href="http://www.designalpha.fr/?cat=4" title="Voir tous les articles classés dans Ressources">Ressources</a> (1)
</li>
</ul>
</li> </ul>
</div>

</div>

</div>

</div>

</div>
</div>

<div id="footer">
<div id="footer_text">
<p>
© All Rights Reserved @ <a href="http://www.designalpha.fr/">Design Alpha</a>
</p>
</div>

</div>
</div>

</body>
</html>

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

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

/* HEADER */

#header{
background: url(img/navbar.png) repeat-x;/*, url(img/lueur_navbar.png) no-repeat center bottom;*/
height:41px;
position: relative;
}
#header_boutons{
width: 900px;
height: 40px;
margin: auto;
position: relative;
}
#header_title{
float:left;

}

#header_title h1{
color:#fff;
font-size:38px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
padding:0 0 0 140px;
letter-spacing:-2px;
font-style:italic;
position: absolute;
}

#header_title h1 a{
color:#fff;
}
#header_title h1 a:hover{
text-decoration:none;
}

.accueil {
background: url(img/boutonaccueil1.gif);
right: 368px;
}
ul#lien_up{
display: block;
width: 368px;
}
.accueil:hover{
display: block;
width: 101px;
height: 44px;
background-image: url("img/accueil2.png" );
}

.leblog {
background: url("img/boutonblog.gif" );
right: 276px;
}
.leblog:hover{
display: block;
background-image: url("img/boutonblog21.png" );
}
.contact {
background: url("img/boutoncontact.gif" );
right: 180px;
}
.contact:hover{
background: url("img/boutoncontact2.jpg" );
display: block;
}
.about {
background: url("img/boutonabout.gif" );
right: 85px;
}
.about:hover{
background: url("img/boutonabout2.jpg" );
display: block;
}

.description{
font-size:14px;
position:relative;
top:-5px;
color:#bfbfbf;
display:block;
text-align:center;
letter-spacing:0;
font-weight:normal;
}

#header_rss a img{
position:relative;
top:110px;
display:block;
z-index:100;
}
/* --- 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;
}
/* BODY */

#body-principal{
margin:auto;
padding-right:15px;
text-align:left;
width:976px;
}
#body_top{
width:108%;
overflow:hidden;
margin-left: -65px;
/*background:url(img/backoffice.png) repeat-y*/
}
#logo{
background: url("img/logo.png" ) no-repeat scroll;
width: 90px;
height: 58px;
margin: 60px 0 0 90px;
}

#body_left{
width:670px;
float:left;
margin-left: auto;
margin-right: auto;
}

#body_right{
width:267px;
float:right;
margin: 190px 10px 0 0;
position: relative;
}
ul#body_social li, ul#body_social a {

display: block;
height: 50px;
padding: 0;
}
ul#body_social li {
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
width: 100%;
}
ul#body_social span {
display: none;
}
#body_right ul li#facebook{
background: url("img/facebook.png" ) no-repeat left;
width: 60px;
height: 43px;
margin-top: 10px;
margin-left: 7px;
}
#body_right ul li#twitter {
background: url("img/twitter.png" ) no-repeat;
width: 104px;
height: 38px;
margin-left: 8px;
margin-top: 10px;
}
#body_right ul li#flux_rss {
background: url("img/rss.png" ) no-repeat;
width: 48px;
height: 47px;
margin-left: 17px;
}

/* left contact */

#body_left_content{
padding: 40px 0 0 45px;
width: 710px;
margin-left: auto;
margin-right: auto;
float: left;
}
#content{
margin-top: 177px;
margin-left: 10px;
}

.post{

width:102%;
margin:0 0 10px 0;
}
a.more-link {
background: url(img/nav.png) top no-repeat;
float: right;
width: 181px;
height: 41px;
color: #505050;
}

.post-top{

width:100%;
overflow:hidden;
margin-top: 0;
}

.post-title{
background: url("img/barre_titre.jpg" ) no-repeat scroll 0 0 white;
width:715px;
padding:0 20px 5px 0;
float:left;
}

.post-title h2{

font-size:22px;
color:#000;
font-weight: normal;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 18px 0 15px 40px;
/*background:url(images/bgr_post_title.gif) no-repeat left bottom;*/
margin:0;
}

.post-title h2 a{
color: #022954;
}

.post-top h3{
font-weight:normal;
color:#817565;
font-size:11px;
padding:0 0 8px 15px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.post-top h3 a, .post-top h3 span{
color:#022954;
text-transform:capitalize;
}

.entry{
line-height:20px;
font-size:13px;
margin-bottom: -15px;
}

.entry p{

background-color: white;
padding: 0 15px 25px;
}

.entry p a{
text-decoration:underline;
padding-top: 10px;
text-align: center;
margin-top: 20px;
}

.entry p a:hover{
text-decoration:none;
}
.postmetadata{

width:181px;
height:41px;
overflow:hidden;
}
.postmetadata a{
color:#f26522;
font-weight:bold;
text-decoration:underline;
font-size:12px;
}
.postmetadata a:hover{
text-decoration:none;
}
.postmetadata .alignright{
padding:12px 20px 0 0;
}

.post-page{
width:100%;
}

h2.page_title{
font-size:27px;
color:#000;
font-weight:normal;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
padding:0 0 5px 0;
background:url(images/bgr_post_title.gif) no-repeat left bottom;
margin:0 0 15px 0;
}

.post-page .entry{
}

.post-page .entry a{
text-decoration:underline;
}

.post-page .entry a:hover{
text-decoration:none;
}

.entry strong{
}

.post-page .entry strong, .post-page .entry h1, .post-page .entry h2, .post-page .entry h3, .post-page .entry h4, .post-page .entry h5, .post-page .entry h6{
color:#000;
display:block;
font-weight:normal;
}

.post-page .entry strong{
font-size:28px;
}

.post-page .entry h1{
font-size:26px;
padding:0 0 14px 0;
}

.post-page .entry h2{
font-size:24px;
padding:0 0 14px 0;
}

.post-page .entry h3{
font-size:22px;
padding:0 0 12px 0;
}

.post-page .entry h4{
font-size:20px;
padding:0 0 10px 0;
}

.post-page .entry h5{
font-size:18px;
padding:0 0 8px 0;
}

.post-page .entry h6{
font-size:16px;
padding:0 0 6px 0;
}

/* right content */

#body_right_content{
margin: -30px 0 0 0;
width:100%;
}

#main_search{
width:270px;
height:49px;
background:url(img/searchbar.png) no-repeat;
margin:100px 0 10px 0;
}

#searchform_top{
padding:8px 0 5px 20px;
float:left;
}

#searchform_top_text{
width:210px;
border:0px;
background:none;
color:#60757d;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
float:left;
margin:5px 4px 0 0;
}

#gosearch{
float:left;
}
/* ADS */

/* Styles for one-column display */
#wp125adwrap_1c { width:100%; overflow:hidden; }
#wp125adwrap_1c .wp125ad { margin-bottom:5px; }

/* Styles for two-column display */
#wp125adwrap_2c { width:100%; overflow:hidden; }
#wp125adwrap_2c .wp125ad { width:125px; float:left; padding:0 7px 7px 0; }
#wp125adwrap_2c .wp125ad img { width:125px; float:left; }

/* SIDE BAR */

#sidebar{
width:256px;
}

.sidebars h2{
font-size:22px;
color:#303030;
text-transform:capitalize;
font-weight:normal;
padding:10px 0 10px 25px;
background:url(images/bgr_sidebars_h2.gif) no-repeat left 12px;
color: skyblue;
}

.sidebars ul{
color:#4c4c4c;
}

.sidebars ul li{
margin:0 0 15px 0;
padding:4px 13px 0 13px;
color: black;

}

.sidebars ul li ul li{
margin-bottom:0;
width:auto;
background:none;
}

.sidebars ul li ul li ul li{
margin-left:0;
}

.sidebars li ul{
}

.sidebars li ul li ul{
padding-bottom:0px;
padding-left:10px;
background:none;
width:auto;
}

.sidebars li ul li ul li ul{
}

.sidebars li{
margin-bottom:0px;
background:none;
}

.sidebars li li{
margin-bottom:0px;
border-left:1px solid #87CEEB;
padding:7px 0 7px 5px;
font-size:13px;
}

.sidebars li li li{
background:none;
border:0;
padding-bottom:3px;
}

.sidebars li a{
color:#F0F0F0;
}

.sidebars li.widget_categories ul li{
font-weight:bold;
color:#F0F0F0;
}

.sidebars li.widget_categories ul li a{
font-weight:normal;
background:url(images/li_cat.gif) no-repeat left 4px;
padding:0 0 0 10px;
}

.sidebars li.widget_archives ul li a{
font-weight:normal;
background:url(images/li_ar.gif) no-repeat left 4px;
padding:0 0 0 12px;
}

.sidebars li.linkcat ul li a{
background:url(images/li_links.gif) no-repeat left 4px;
padding:0 0 0 15px;
font-weight:bold;
}

.sidebars li.widget_meta ul li a{
font-weight:normal;
padding-left:2px;
background:url(images/li_pagenav.gif) no-repeat left 6px;
padding:0 0 0 14px;
}

.sidebars .widget_tags p{
padding:0px 10px 10px 15px;
}

.sidebars .widget_tags a{
color:#4c4c4c;
}

.sidebars .textwidget{
padding:10px;
}

/* FOOTER */

#footer{
width:100%;
background:url(img/navbarfindesite.png) repeat-x;
padding-bottom: 7px;
}

#footer_text{
text-align:center;
position:relative;
}

#footer_text p{
line-height:18px;
font-size:11px;
font-family:Verdana, Geneva, sans-serif;
color:#FFFFFF;
}

#footer_text a{
color:#FFFFFF;
}

#footer_text b a{
color:#0072bc;
}

/* Begin Typography & Colors */

#wp-calendar #prev a, #wp-calendar #next a {
font-size: 9pt;
}

#wp-calendar a {
text-decoration: none;
}

#wp-calendar caption {
font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
text-align: center;
}

#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}
/* End Typography & Colors */

/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}

/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}
/* End Images */

/* Begin Calendar */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 98%;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
}

#wp-calendar caption {
text-align: center;
width: 100%;
}

#wp-calendar td {
padding: 3px 0;
text-align: center;
}

#wp-calendar td.pad:hover { /* Doesn't work in IE */
background-color: #fff; }
/* End Calendar */

/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
cursor: help;
}

acronym, abbr {
border-bottom: 1px dashed #999;
}

blockquote {
margin: 15px 30px 10px 10px;
padding-left: 24px;
padding-bottom:7px;
background:url(images/blockquote_bg.gif) repeat-y;
}

blockquote blockquote{
background:url(images/blockquote_bg2.gif) repeat-y;
}

blockquote cite {
margin: 5px 0 0;
display: block;
}

.center {
text-align: center;
}

hr {
display: none;
}

a img {
border: none;
}

.navigation {
display: block;
text-align: center;
margin:10px 0 10px 0;
width:613px;
padding:4px 0 4px 0;
overflow:hidden;
color:#000;
}

.navigation a{
color:#000;
font-size:13px;
}

.wp-pagenavi{
line-height:1.8em;
padding:0 15px 0 15px;
font-weight: bold;
font-size:13px;
text-align:right;
}

.wp-pagenavi a {
padding: 4px 8px 4px 8px;
margin: 2px;
color:#000;
}
.wp-pagenavi span.pages {
padding: 4px 8px 4px 8px;
margin: 2px;
background:#f1fafe;
border:1px solid #c1cbcf;
}
.wp-pagenavi span.current {
padding: 4px 8px 4px 8px;
margin: 2px;
background:#f1fafe;
border:1px solid #c1cbcf;
}
.wp-pagenavi span.extend {
padding: 4px 8px 4px 8px;
margin: 2px;
background:#f1fafe;
border:1px solid #c1cbcf;
}
/* End Various Tags & Classes*/

/* Begin Lists

Special stylized non-IE bullets
Do not work in Internet Explorer, which merely default to normal bullets. */

.entry ul {
margin: 0 10px 25px 30px;
list-style: none;
padding:15px 15px 15px 20px;
background:#ecf9fe;
border:1px solid #c5e3ee;
}

.entry ul li {
border-bottom:1px solid #c5e3ee;
background:url(images/entry_before.gif) no-repeat left 12px;
padding:6px 0 6px 11px;
color:#625f5e;
display:block;
}

.entry ul li:before{
/*content: url(images/entry_before.gif);*/
}

.entry ol {
margin: 0 10px 25px 30px;
padding:15px 15px 15px 40px;
background:#ecf9fe;
border:1px solid #c5e3ee;
}

.entry ol li {
margin: 0;
padding:6px 0 6px 0;
border-bottom:1px solid #c5e3ee;
color:#625f5e;
}

.postmetadata ul, .postmetadata li {
display: inline;
list-style-type: none;
list-style-image: none;
}

ol li{
list-style: decimal outside;
}
/* End Entry Lists */

/* Begin Form Elements */
#searchform {
margin: 10px auto;
padding: 5px 3px;
text-align: center;
}

#sidebar #searchform #s {
width: 108px;
padding: 2px;
}

#sidebar #searchsubmit {
padding: 1px;
}

.entry form { /* This is mainly for password protected posts, makes them look better. */
text-align:center;
}

select {
width: 130px;
}

#commentform{
width:400px;
}

#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}

#commentform textarea {
width: 350px;
padding: 2px;
}

#commentform #submit {
margin: 0;
width:65px;
height:25px;
}
/* End Form Elements */

/* Begin Comments*/

h2#comments{
font-size:27px;
color:#000;
font-weight:normal;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
padding:0 0 5px 0;
background:url(images/bgr_post_title.gif) no-repeat left bottom;
margin:0 0 10px 25px;
}

.alt {
margin: 0;
padding: 10px;
}

.commentlist {
padding: 0;
text-align: justify;
margin:0 0 0 25px;
}

.commentlist .comment {
margin: 15px 0 0 0;
padding: 10px 15px 20px 15px;
list-style: none;
background:#f5f5f5;
border:1px solid #dfdfdf;
}

.commentlist .alt {
background:#fff;
}

.commentlist .comment .comment {
margin: 15px 15px 15px 15px;
padding: 10px 15px 20px 15px;
width:auto;
}

.commentlist p {
margin: 10px 5px 10px 0;
line-height:18px;
}
.commentmet_data{
width:100%;
overflow:hidden;
}
.commentmet_data td{
vertical-align:top;
text-align:left;
}
.commentmet_avatar{
width:102px;
padding:15px 0 0 0;
}
.commentmet_text{
}
.commentmet_avatar img{
border:2px solid #909090;
}

#commentform p {
margin: 5px 0;
}

.commentmet_replay{
width:100%;
overflow:hidden;
}
.commentmet_replay a{
float:right;
display:block;
color:#aaaaaa;
font-weight:bold;
background:#000;
padding:3px 20px 3px 20px;
}

.nocomments {
text-align: center;
margin: 0;
padding: 0;
}

.commentmetadata {
margin: 0;
display: block;
padding:0 0 5px 0;
color:#000;
font-size:17px;
font-family:Verdana, Geneva, sans-serif;
text-transform:capitalize;
}
.commentmetadata a{
color:#0071bc;
}
.commentmetadata span{
color:#636363;
font-size:11px;
}
.commentmetadata span.commentmetadata_title{
color:#0071bc;
font-size:17px;
}
.commentmetadata a{
color:#0071bc;
}

.commentmet_text{
font-size:12px;
}

#respond{
margin:40px 15px 0 30px;
padding-bottom:60px;
}

h3#respond_title{
font-size:27px;
color:#000;
font-weight:normal;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
padding:0 0 5px 0;
background:url(images/bgr_post_title.gif) no-repeat left bottom;
margin:0 0 20px 0;
}

#commentform{
margin-left:55px;
color:#000000;
font-size:12px;
width:80%;
font-family:Arial, Helvetica, sans-serif;
}

#commentform small{
position:relative;
top:-1px;
font-size:12px;
}

#commentform a{
color:#000000;
}

#commentform input{
background:#f8fdff;
border:3px #c9d9e0 solid;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
padding:3px;
color:#000000;
}

#commentform textarea{
background:#f8fdff;
border:3px #c9d9e0 solid;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
padding:3px;
margin:5px 0 0 0;
color:#000000;
}

#commentform input#submit{
background:none;
border:0px;
}

/* End Comments */

/* Archives page */
.page_archives_div{
padding-bottom:60px;
}

.ar_panel{
}

.ar_panel3{
}

.page_archives_div h2{
font-size:27px;
color:#000;
font-weight:normal;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
padding:0 0 5px 0;
background:url(images/bgr_post_title.gif) no-repeat left bottom;
margin:0 0 15px 0;
}

.page_archives_div ul h2{
}

.page_archives_div ul{
margin:10px 0 40px 0;
padding:0px;
}

.page_archives_div ul li{
margin:0px;
padding:7px 0 8px 5px;
list-style:none;
background:url(images/bgr_post_title.gif) no-repeat left bottom;
}

.page_archives_div ul li ul li{
border:0px;
background:none;
}

.page_archives_div ul li ul{
margin:0px;
padding:0px;
padding-left:10px;
}

.page_archives_div ul li a{
font-weight:normal;
color:#000;
font-size:13px;
background:url(images/entry_before.gif) no-repeat left 4px;
padding:0 0 0 11px;
}

C'est un peu long

Voila

Reply

Marsh Posté le 22-04-2010 à 18:15:57

Code :

-----------------------------------   pour le code html ------------------------------------------------------- 
 
<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&#039;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 -->

Code :

--------------- POUR LE CSS ---------------------------------------------------- 
 
 
 
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; 
}

J'ai mis que le code utile.

Tu veux masquer les puces ou le menu ?

Il est en ligne ton site ?

Reply

Marsh Posté le 22-04-2010 à 18:21:49

je suis encore novice en html dsl ^^

non le site n'est pas encore en ligne je travaille en local pour le moment.

en fait je voudrai avoir le meme rendu que celui sur firefox (l'original donc) sur ie.

Je veux non seulement masquer les puces mais en plus de ca repositionner les onglets accueil blog contact et a propos à leur position originale.

Je me casse la tete depuis 14h sur le probleme :s

Reply

Marsh Posté le 22-04-2010 à 18:25:14

Tu es au courant que tes liens sont vides ?

Reply

Marsh Posté le 22-04-2010 à 18:31:45

Donc c'est pas un display:none; On l'utilise pour masquer des div par exemple.

Enleve déjà ton display:none;

rajoute un #menu ul li{list-style-type:none;}

Et comme le dis David Boring pour que ton lien fonctionne il faut mettre le texte avant la balise </a>

Reply

Marsh Posté le 22-04-2010 à 18:51:06

arf j'avais pas fait gaffe a la balise </a>

pour ce qui est du #menu ul li {list-style-type: none} ca ne change rien j'ai toujours une liste de puce affichée verticalement au lieu d'avoir mes images horizontalement (ont dirait pourtant qu'elle s'affiche mais superpositionnées)

Reply

Marsh Posté le 22-04-2010 à 18:53:38

Mais tu as encore le point gris devant ta liste ?

Pour l'affichage horizontal, je pense qu'il manque un float quelque part.

essaye un #menu ul li {float:right;}

Reply

Marsh Posté le 22-04-2010 à 18:56:09

oui j'ai non seulement le probleme des points gris mais en plus le titre de l'onglet s'affiche en toute lettre alors qu'il est censé être remplacé par une image.

Reply

Marsh Posté le 22-04-2010 à 18:56:09

Reply

Marsh Posté le 22-04-2010 à 19:17:02

tu pourrais pas poster ta page sur le net pour qu'on puisse immédiatement te trouver une solution. sinon utilises de vrais outils (firebug) et analyse ton bordel

---------------
Blablaté par Harko

Reply

probleme display:none ie :s

Sujets relatifs:

Leave a Replay