Menu foireux sous IE

[Compte_supprime_2535]

Une fois de plus, IE fait son capricieux. De fait, c'est la première fois que je vois ça, j'utilise plus jamais IE. Alors si quelqu'un pouvait m'indiquer ce qui déconne dans le code, pourquoi le "sidebar" (barre à droite avec les catégories etc) s'affiche pas droit... Suivez là jusqu'au niveau des pubs et vous verrez ce que je veux dire.

De plus, je viens d'ajouter une tribune et depuis lors, sous IE, le titre de la tribune apparaît (Izi board) mais tout disparâit en dessous jusque le bouton Paypal. Comparez avec Firefox et vous verrez qu'il manque un sacré bout! Je pige absolument pas pourquoi. Et enfin, si vous checkez la source sous IE, il indique tout le code en "version PHP", en gros il prend que une partie des pages PHP puis on dirait qu'il s'arrête un moment et lis plus le reste...

Peut-être pas très clair mais un coup de main serait l'idéal. Merci!

http://www.arnoz.be/blog/

[Compte_supprime_2535]

Une p'tite idée?

[Compte_supprime_2535]

Allo?

[gvosnet]

Effectivement, affichage foireux sous IE.

Petite remarque, on ne sait jamais, dans ton bloc Javascript suivant, tu ne fermes pas les commentaires ( <!-- ) :

<script language =" JavaScript" type="text/javascript">
<!-- Begin
function textCounter
(...)
 return false
}
</script>

D'ailleurs, la prochaine fermeture "normale" de Javascript se fait juste avant ton image Paypal, donc ça devrait être ça.

Mets simplement //--> avant de fermer ton premier bloc de Javascript et ça devrait tourner.

Bon courage.

[Compte_supprime_2535]

Ooooooooooh... Merci! :) J'avoue qu'en repassant plusieurs fois dessus j'ai pas remarqué ça et ce javascript est pompé du net... Bon à part ça, ça a l'air de fonctionner.

Mais peut-être pourrais-tu m'aider pour deux autres choses:

Pourquoi les accents sont bizarre dans la tribune sous IE et pas sous FF?

Et pourquoi le bout du blog est décalé?? C'est en rapport avec le css j'imagine, au cas ou, le voici ("livré" avec Wordpress).

/* Begin Typography & Colors */
/* Begin Navigation */
#supernav {
 font: bold 15px 'Trebuchet MS', Verdana, Arial, Sans-Serif;
 position: absolute;
 top: 183px;
 left: 50%;
 width: 760px;
 margin: 0 0 0 -312px;
 padding: 7px 7px 7px 20px;
 text-align: left;
 display: block;
 }
#supernav li {
 display: inline;
 margin: 0;
 padding: 0px;
 }
#supernav a {
 color: #000000;
 background-image: url(images/ulbgy.jpg); 
 padding: 4px 30px;
 margin: 0;
 }
#supernav a:hover {
 color: #000000;
 background-image: url(images/ulbgr.jpg);
 }
/* End Navigation */

body {
 font-size: 62.5%; /* Resets 1em to 10px */
 font-family: 'Verdana', Arial, Helvetica, sans-serif;
 background-color: #d5d6d7;
 color: #333;
 text-align: center;
 }
#page {
 background-color: white;
 border: 1px solid #959596;
 text-align: left;
 }

#header {
 background-color: #73a0c5;
 }

#content {
 font-size: 1.2em
 }

.narrowcolumn .entry, .widecolumn .entry {
 line-height: 1.4em;
 }


.narrowcolumn .postmetadata {
 text-align: center;
 }

.alt {
 background: #C3C8D9; border-top: 1px solid #6A7180; border-bottom: 1px solid #6A7180
 }

#footer {
 background-color: #eee;
 }

small {
 font-family: 'Arial', Helvetica, sans-serif;
 font-size: 0.9em;
 line-height: 1.5em;
 }

h1, h2, h3 {
 font-family: 'Verdana', Arial, Helvetica, sans-serif;
 font-weight: bold;
 }

h1 {
 font-size: 2.5em;
 text-align: left;
 }

.description {
 font-size: 1em;
 text-align: left;
 }

h2 {
 font-size: 1.6em;
 }

h2.pagetitle {
 font-size: 1.6em;
 }

#sidebar h2 {
 font-family: 'Trebuchet MS', Verdana, Sans-Serif;
 font-size: 1.3em;
 }

h3 {
 font-size: 1.5em;
 }

h1, h1 a, h1 a:hover, h1 a:visited, .description {
 text-decoration: none;
 color: white;
 }

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
 color: #333;
 }

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
 text-decoration: none;
 }


.commentlist li, #commentform input, #commentform textarea {
 font: 0.9em 'Verdana', Arial, Helvetica, sans-serif;
 }

.commentlist li {
 font-weight: bold;
 }

.commentlist cite, .commentlist cite a {
 font-weight: bold;
 font-style: normal;
 font-size: 1.1em;
 }

.commentlist p {
 font-weight: normal;
 line-height: 1.5em;
 text-transform: none;
 }

#commentform p {
 font-family: 'Verdana', Arial, Sans-Serif;
 }

.commentmetadata {
 font-weight: normal;
 }

#sidebar {
 font: 1.1em ' Verdana', Arial, Sans-Serif;
 }

small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
 color: #777;
 }

code {
 font: 1.1em 'Courier New', Courier, Fixed;
 }

a, h2 a:hover, h3 a:hover {
 color: #06c;
 text-decoration: none;
 }

a:hover {
 color: #147;
 text-decoration: none;
 }

/* Begin Structure */
body {
 margin: 0;
 padding: 0;
 }

#page {
 background-color: white;
 margin: 0px auto;
 padding: 0;
 width: 760px;
 border: 1px solid #959596;
 }

#header {
 padding: 0;
 margin: 0 auto;
 height: 200px;
 width: 100%;
 background-color: #73a0c5;
 }

#headerimg {

 margin: 15px;
 height: 200px;
 width: 100%;
 }

.narrowcolumn {
 float: left;
 padding: 0 0 20px 30px;
 margin: 0px 0 0;
 width: 480px;
 }

.narrowcolumn .postmetadata {
 padding-top: 5px;
 }


#footer {
 padding: 0;
 margin: 0 auto;
 width: 760px;
 color: #868fa0;
 clear: both;
 }

#footer p {
 margin: 0;
 padding: 20px 0;
 text-align: center;
 }
/* End Structure */



/*	Begin Headers */
h1 {
 padding-top: 8px;
 margin: 0;
 }

.description {
 text-align: left;
 }

h2 {
 margin: 30px 0 0;
 }

h2.pagetitle {
 margin-top: 0px;
 text-align: center;
}

#sidebar h2 {
 margin: 0px 0 0;
 padding: 0;
 background: #C3C8D9; border-top: 1px solid #6A7180; border-bottom: 1px solid #6A7180

 }

h3 {
 padding: 0;
 margin: 30px 0 0;
 }


h3.comments {
 padding: 0;

 margin: 40px auto 20px;
 }
/* End Headers */


/* Nav */

.alignright {
 float: right;
 }

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



/* Post */


.post-info 
{
 font-size:0.89em;
 font-family: 'Verdana', Arial, Helvetica, sans-serif;
 margin:0;
 padding:0;
 color: #295142;
}
.post-info a
{
 color: #06c;
}
.post-info a:hover 
{
 color: #295142;
 text-decoration: none;
}
.post-title {
 font-family: 'Trebuchet MS', Geneva, Verdana, Arial, Helvetica, sans-serif;
 font-size:2.2em;
 margin:0;
}
.post-title a:hover
{
 color: #06c;
 text-decoration:underline;

}
.post-title a:link, .post-title a:, .post-title a:active

{
 text-decoration:none;
 color: #000000;
}

.post-date {
 float: left;
 color: #000000;
 font-family: 'Verdana', Helvetica, sans-serif;
 font-size: 1em;
 text-align: center;
 font-weight: bold;
 margin: 3px 4px 0 0;
 padding: 9px 3px 7px 8px;
 width: 50px;
 background: #C3C8D9;
 line-height:1em;
 border:2px solid #6A7180;
}	


html>body .post ul {
 margin-left: 0px;
 padding: 0 0 0 30px;
 list-style: url(images/li.gif);
 padding-left: 10px;
 text-indent: -10px;
 } 

html>body .post li {
 margin: 7px 0 8px 10px;
 }

.post {
 padding:10px 0;
 margin:3px 0;
 text-align: justify;
 background-color: #FFFFFF;
border-top:#6A7180 2px solid;	

 }

.post ul li:before, #sidebar ul ul li:before {
 content: url(images/li.gif);
 }

.post ol {
 padding: 0 0 0 35px;
 margin: 0;
 }

.post ol li {
 margin: 0;
 padding: 0;
 }


#sidebar ul, #sidebar ul ol {
 margin: 0;
 padding: 0;
 }

#sidebar ul li {
 list-style-type: none;
 list-style-image: none;
 margin-bottom: 15px;
 }

#sidebar ul p, #sidebar ul select {
 margin: 5px 0 8px;
 }

#sidebar ul ul, #sidebar ul ol {

 margin: 5px 0 0 10px;
 }


#sidebar ul ul ul, #sidebar ul ol {
 margin: 0 0 0 10px;
 }

ol li, #sidebar ul ol li {
 list-style: decimal outside;
 }

#sidebar ul ul li, #sidebar ul ol li {
 margin: 3px 0 0;
 padding: 0;
 }
/* End 
Entry Lists */


/* Begin Form Elements */
#searchform {

 margin: 10px auto;
 padding: 5px 3px; 
 text-align: center;
 }

#sidebar #searchform #s {
 width: 115px;
 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 input {
 width: 170px;
 padding: 2px;
 margin: 5px 5px 1px 0;
 }


#commentform textarea {
 width: 100%;
 padding: 2px;
 }

#commentform #submit {
 margin: 0;
 float: right;
 }
/* End Form Elements */


/* Begin Comments*/
.alt {
 margin: 0;
 padding: 10px;
 }

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

.commentlist li {
 margin: 15px 0 3px;
 padding: 5px 10px 3px;
 list-style: none;
 }

.commentlist p {
 margin: 10px 5px 10px 0;
 }

#commentform p {
 margin: 5px 0;

 }

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



/* End Comments */


/* Begin Sidebar */
#sidebar
{
 padding: 20px 0 10px 0;
 margin-left: 538px;
 width: 213px;
 background-color: #dddee3;

 }

#sidebar form {
 margin: 0;
 }
/* End Sidebar */


/* Begin Various Tags & Classes */


blockquote{
 background: #EEE url(images/blockquote.png) no-repeat bottom left;
 padding: 10px 10px 45px 10px;
 margin: 1em 1em 1em 3em;
 width:430px;
}

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

.center {
 text-align: center;
 }

hr {
 display: none;
 }

a img {
 border: 0px;
 }

.navigation {
 display: block;
 text-align: center;
 margin-top: 10px;
 margin-bottom: 60px;
 }


 /* Link Tabs */


#tabs ul {


 display:inline;
 list-style:none;
 }

#tabs li {

 text-align:center;
 display:inline;
 margin:0 0px 0 0px;
 border:1px solid #6A7180;
 }

.tab {

 padding:0px 2px 0px 2px;
 background:#c3c8d9;
 color:#000000;
 font-family: 'Trebuchet MS', Verdana, Sans-Serif;
 font-size: 1.3em;
 cursor:pointer;

 }

.tab:hover {

 background-color: #E84D2F;
 color:#000000;
 }

.selectedtab {

 padding:0px 2px 0px 2px;
 font-family: 'Trebuchet MS', Verdana, Sans-Serif;
 font-size: 1.3em;
 background-color: #ECE47C;
 color:#000000;
 }

.tabcontent {

 display:none;
 }

.tabselectedcontents {

 display:block;
 padding:10px;
 }

/* Link Tabs End */

[gvosnet]

Pour l'histoire des accents, tu devrais mettre ça entre les balises HEAD :

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

[Compte_supprime_2535]

Bon, cette fois, c'est la sidebar qui descend...

Tout le reste est corrigé (pour le charset, c'était UTF-8 parce que les messages sont stockés dans un fichier .txt), merci d'ailleurs. Mais si qqu'un pouvait m'aider et me dire pourquoi cette sidebar se retrouve en bas dans IE et dans FF tout est OK... Les forums de Wordpress ne m'ont pas aidé. Ce serait qqchose comme un problème de "width" ou quoi d'après ce que j'ai lu, mais j'ai tout essayé et j'arrive à rien. Si vous pouviez m'aider...

Merci!

#sidebar
{
 padding: 15px 0px 0px 0px;
 margin-left: 538px;
 _margin-left: 548px;
 width: 213px;
 background-color: #dddee3;

 }

#sidebar form {
 margin: 0;
 }

[gvosnet]

Ah, pour ce qui est des CSS, je ne touche pas encore assez dans ce domaine pour pouvoir t'aider...

Je passe la main

[ggbce]

Je ne sais pas si tu as modifié qqchose, mais ton sidebar fonctionne super bien avec IE6SP1 sur mon poste.

Pour ton problème de Izi board, c'est peut-être la méthode de créer le tag qui n'est pas bon... car en lisant le code source de ta page je vois exactement ce qui est écrit:

...</script>
<ul>


	<h2>Izi Board</h2>
	<script language="JavaScript" type="text/javascript">
function textCounter(field, countfield, maxlimit) {
  if(field.value.length > maxlimit){
  field.value = field.value.substring(0, maxlimit);
  }
  else{ 
  countfield.value = maxlimit - field.value.length;
  }
}
...

Si c'est créé dynamiquement avec PHP ou ASP c'est pas le navigateur qui est en trouble car c'est du côté serveur que le parsing se fait !

[Compte_supprime_2535]

J'allais justement poster une réponse :) J'ai effectivement résolu le souci de sidebar. J'ai joué avec les valeurs width pour la mettre au bon endroit sous FF, puis j'ai remis une ligne du style:

_width: "valeur de IE"px;

Grâce au "_", IE lit cette valeur et la sidebar fonctionne pour les deux browsers, en fait le width a pas la même valeur pour les deux navigateurs.

Quoiqu'il en soit, ça fonctionne. Et la tribune fonctionne aussi. Maintenant j'en ai marre, donc le problème que tu soulèves je checkerai plus tard . Tant que ça fonctionne

Merci à vous.