Bug IE / firefox

myplog Messages postés 3 Date d'inscription   Statut Membre Dernière intervention   -  
 Myplog -
Bonjour à tous,
J'ai décidé de m'inscrire sur ce forum parce que j'ai très souvent des réponses à mes questions quand je suis dans le flou artistique :)

Je suis vraiment débutant dans le webmastering.
Je tourne sous MacOs Snow Léopard sur macbook pro intel core II duo 15pouces
J'utilise firefox et safari.

Je suis entrain de faire un site web pour l'assoce d'une amie. J'utilise Wordpress parce que le site se voudra participatif et l'option CMS est parfait pour les futurs admins.
J'ai créé mon template Wordpress de A à Z.

En découvrant les joies du webdesign, je me suis vite confronté aux aspects assez frustrant des compatibilités sur différents navigateurs.

Voici l'adresse du site : http://www.etatdeslieux.org

Regardez-le sur firefox puis sur IE.

Je suis vraiment perdu. Je ne sais pas quoi faire pour fixer ces bugs.
Si vous connaissez des solutions, je suis preneur.

Merci beaucoup beaucoup,

Myplog
A voir également:

8 réponses

Réponse 1 / 8
Id=ntity Messages postés 79 Date d'inscription   Statut Membre Dernière intervention   1
 
Tu es débutant en programmation web et tu as codé ton template wordpress de A à Z ? Chapeau bas...

De ce que je vois du code, le souci sera surement repérable dans le fichier CSS contenant les attributs de la div #header ou dans les attributions des balises <li></li>

Si ce n'est pas ça alors je ne peux t'aider. Si le menu change de place de façon aussi radicale c'est à coup sûr une mauvaise définition des attributs dans le CSS.

Ciao Ciao
0
Myplog
 
Hello Id=ntity,

Oui j'ai codé mon template en suivant un tutoriel vraiment bien expliqué :)
Et j'ai mangé pas mal de bouquins sur le sujet ces derniers temps…

Merci pour ta réponse mais je ne comprend pas trop ce que veux dire: «une mauvaise définition des attributs dans le CSS. » Ça veut dire que la hiérarchisation de mes balises n'est pas bien gérée ?

à bientôt,

Myplog
0
Réponse 2 / 8
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213
 
Sous IE8 j'ai ce message d'erreur :

Détails de l’erreur de la page Web
Message : Exception levée mais non décelée
Ligne : 19
Caractère : 2424
Code : 0
URI : http://www.etatdeslieux.org/wp-includes/js/jquery/jquery.js?ver=1.3.2

Et là, je passe la main à un spécialiste en js...
0
Myplog
 
Mouarf !!
Super…
0
notobe Messages postés 1952 Date d'inscription   Statut Membre Dernière intervention   213 > Myplog
 
Certes... j'ai pensé "à tes souhaits" sur le coup quand j'ai lu le truc ;-)
0
Réponse 3 / 8
Id=ntity Messages postés 79 Date d'inscription   Statut Membre Dernière intervention   1
 
Dans ton fichier css, le menu doit etre mal configuré. Montre-nous le CSS
0
Myplog
 
Voici mon css : 

/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-family: Verdana, Helvetica, sans-serif;
list-style-type: none;
}

/*End  Reset */
.enquetes{
margin-left: 10px;
}

#logo{
	position: relative;
	margin-top: 50px;
margin-left: 63px;
	}

h2{

font-size: 20px;
}

#header{
position:relative;
}


p{
font-size: 12px;

}

a{
text-decoration: none;
color: #3c3f48;
font-size: 12px;
}

a:hover {
text-decoration: underline;
}


#header a{
position: relative;
padding-top: 10px;
border: 5px solid #004268; /*#004268*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: white;
background: #004268;
margin-right: -20px;
text-transform: lowercase;
}

#header ul li{
margin-top: -3px;
margin-bottom: 5px;


}

input {
background: #eeeeee;
border: solid 1px #eeeeee;
color: #3c3f48; /*couleur du search*/
padding: 3px;
}

input:focus, input:hover {
background: #a0a0a0;
color: #ffffff;
}

/*MAIN STYLE*/

body {
background: #d3d3d3 url(images/bg.gif) repeat-x ;
}

#wrap{
background: white;
width: 880px;
margin: auto;
min-height: 768px;
text-align: center; /*IE fix*/
}
#wrap img{
margin-top: 0px;
margin-left: -26px;
}

#header h1{
float:left;
}

#header ul {

overflow: hidden;
margin-left: 62px;

}

#header ul li{
float: left;
padding-right: 28px;
display: inline; /*IE fix*/



}




#header #search{

position: absolute; 
width: 270px;
height: 66px;
right: 0;
top: 0px;

}

#header #search input#s{

width: 130px;
}

#header #search input#searchsubmit{

}

#search #rss{
position:absolute;
top: 8px;
left: 230px;

}

#rss img{
width: 15px;
height: 16px;
padding-right: 1px;
margin-top: 0px;
}

/* MAIN CONTENT*/



#main {
overflow:hidden;
clear:both;
overflow: hidden;
background: #ffffff;
margin-top: 50px;
}

#main #primary{
float: left;
width: 612px;
margin-top: px;
}

#main #sidebar{
float:right;
width: 213px;
}


/*TITRES ARTICLES*/

#main #primary .post-item,
#page_content {
position:relative;
overflow: hidden;
padding-left:60px;
text-align: justify;
padding-bottom: 80px;

}


#main #primary .post-item h2 {
max-width: 480px;
font-family: arial;
margin: 0px;

}

#main #primary .post-item h2 a{
font-size: 16px;
font-family: arial;
}

.puce {
float: left;
padding-top:3px;}

.ligne{
position:relative;

margin-top: 40px;
margin-bottom: 17px;

}

#primary .post-item .meta {
margin-top: 1px;
font-size: 0.6em;
margin-bottom: 10px;
} 

#main #primary .post-item p{

text-align: justify;

max-width: 480px;
}

.post-item .addpuce {
float:left;
margin-top: 27px;

}

.comment, .comment a {
font-family: verdana;
font-size: 9.5px;
margin-top: 38px;
margin-bottom: 18px;
}


.post-item .addcomm{
margin-top: -10px;
}


/* MORE LINK*/

a.more-link {
color: gray;
position: relative;
margin-top:5px;
float:left;

}

div.numComments {
background: url(images/commmarqueur.png) no-repeat;
position: absolute;
height: 20px;
width: 18px;
left: 63px;
bottom: 45px;



}

.numComments a {
font-family: Verdana, sans-serif;
font-size: 9.5px;
padding-left: 4px;
padding-top: 3px;
color: white;
}

.numComments p {
font-family: Verdana, sans-serif;
font-size: 11px;
padding-left: 21px;
padding-top: -2px;
color: #3c3f48;
float: left;
}
/* SECONDARY / SIDEBAR*/

.lignesid{
overflow:hidden;
position:relative;
float:left;
right: 28px;
}

#sidebar .widget ul li{
text-align: right;
overflow: hidden;

}

.widget{
margin-right: 42px;
margin-bottom: 30px;

}

#sidebar .widget h2, 
#sidebar .widget ul li {
text-align: right;
border-bottom: 1px solid #bbbbbb;
border-top: 1px solid white;
padding-bottom: 10px;
}


#sidebar .widgettitle:first-child
{
border-top: none;
}

#sidebar .widget h3:last-child {
border-bottom:none;
}

.featuredImage {
margin-top: 20px;
margin-bottom: 0px;

}
/*TITRE SIDEBAR*/
.widgettitle{
font-family: arial;
}
 
#facebook{
float:right;
margin-right: 30px;
margin-bottom: 50px;
}
/* FOOTER */

#footer {
clear:both;
overflow:hidden;
position:relative;
background: #004268;
height:194px;
margin-top: 0px;

}

#footer ul {
position: absolute;
bottom: 20px;
margin-left: 20px;}

#footer ul li {

display: inline;
float: left;
margin-left: 10px;
}

#footer p{

font-family: courier, sans-serif;
font-size: 10px;
color: #eeeeee;
margin-top: 5px;
}
	
#footer p a{
font-family: courier, sans-serif;
font-size: 10px;
color: #eeeeee;
}

#firefox {

}

/*SEARCH*/


/* MORE/PREVIOUS*/

#morePrev a{
float:right;
font-size: 10px;
margin-bottom: 40px;

}

/* Single Posts*/

body.single div.post-item p {
font-style: italic;
}

body.single #main #primary div.post-item p.meta {
font-style: normal;
color: black;
}


body.single div.post-item {
padding-bottom: 30px;
}


#respond h3{
font-family: arial;
color: #3c3f48;
font-size: 13px;
}

#respond p{
font-size: 10px;
margin-bottom: 5px;
}

/* Page template */


.single div.tutorial_image{
background: #dcdcdc;
border: 1px solid white;
text-align: center;
padding: 20px;
margin: 1em 0;

}

.tutorial_image img{
border: 1px solid lightgray;
border-right: none;
border-bottom: none;
padding:2px;
max-width: 600px;
}

#page_content h2 a{
/*background: black;*/  /*MODIF SUR ONLINE LE 2DEC 2009*/
}

/*Comments Template*/

#comments_template{
margin-left: 63px;
background : #dcdcdc;
border: 1px solid lightgray;
clear:both;
margin-bottom: 2em;
overflow:hidden;
padding-right: 20px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
margin-right: 115px;
 
position: relative;
}

#comments_template #comments{
font-style: normal;
color: #3c3f48;
font-family: Arial;
}

#comments_template input{
border: 1px solid gray;
margin-bottom: 3px;

}

#comments_template li{

clear:left;
border-bottom: 1px solid #bbbbbb;
border-top: 1px solid white;
padding: 2em 0;
overflow: hidden;
}

#comments_template .avatar{
float:left;
margin-right: 25px;
padding: 2px;
border: 1px solid #D3D3D3;
border-right: none;
border-bottom: none;
}

.main_comment {

background: #eeeeee;
padding: 10px;
position: relative;

}

.main_comment span.arrow{
background: white;
position: absolute;
top: 10px;
}

#comments_template li:first-child{
border-top: none;
}

#comments_template li:last-child{
border-bottom: none;
}

#commentform p a{
font-size: 10px;
}


#commentform textarea#comment{
width: 390px;
margin-bottom: 10px;
}

/* FLICKR WIDGET*/

#wfm-recent-widget .flickr-image{
padding: 2px;

}

/*PERSO POUR EDL*/

.solo {
font-family:arial;
font-size:16px;
margin-bottom: 10px;
color: #3c3f48;
}
#main #primary .post-item, #page_content {
width: 670px;
}

.pdf{
margin-right : 9px;
}

#morePrev a {
background: #004268;
color: white;
 font-size: 10px;
 line-height: 12px;
 font-style: italic;
 float: right;
margin-right: 70px;
padding: 3px;
 border: 1px solid white;
 border-left: none;
 border-bottom: none;

 }

h4{
font-size: 12px;
}

/*WIDGET CONTROL*/


.widgettitle{
color: #3c3f48;
font-size: 17px;
}

.widget_popular_posts p{
text-align: right;
color: #3c3f48;
padding-top: 7px;
}

.widget_text {
text-align: right;
color: #3c3f48;
font-size: 12px;


}

.textwidget{
padding-top: 7px;
}
0
Réponse 4 / 8
Id=ntity Messages postés 79 Date d'inscription   Statut Membre Dernière intervention   1
 
Peux-tu donner la portion de code html du menu et le css correspondant si il y a?

NB: à la place de mettre ça:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family: Verdana, Helvetica, sans-serif;
list-style-type: none;
}

met ceci:

* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-family: Verdana, Helvetica, sans-serif;
list-style-type: none;
}

Plus court et plus lisible ;)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
myplog Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
 
Voici le code html pour le menu: 

<div id="header">
<ul>
<li id="ongletbg"><a href="<?php bloginfo('url'); ?>">ACCUEIL</a></li><?php wp_list_pages('title_li=&include=24,26,15,17'); ?>
</ul>
</div>




Voici les css qui concernent le menu 



a, ul, li,label{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-family: Verdana, Helvetica, sans-serif;
list-style-type: none;
}

#header a{
position: relative;
padding-top: 10px;
border: 5px solid #004268; /*#004268*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: white;
background: #004268;
margin-right: -20px;
text-transform: lowercase;
}

#header ul li{
margin-top: -3px;
margin-bottom: 5px;
}

#header ul {

overflow: hidden;
margin-left: 62px;

}

#header ul li{
float: left;
padding-right: 28px;
display: inline; /*IE fix*/
}

.enquetes{
margin-left: 10px;
}


a{
text-decoration: none;
color: #3c3f48;
font-size: 12px;
}

a:hover {
text-decoration: underline;
}

input:focus, input:hover {
background: #a0a0a0;
color: #ffffff;
}

/*MAIN STYLE*/

body {
background: #d3d3d3 url(images/bg.gif) repeat-x ;
}

#wrap{
background: white;
width: 880px;
margin: auto;
min-height: 768px;
text-align: center; /*IE fix*/
}


Merci beaucoup pour votre aide.

Ps: j'ai entendu dire qu'il y avait moyen de rentrer une commande dans le terminal sous macOs pour débloquer le système de webdev sous Safari pour pouvoir simuler IE entre autre…
Info ou intox ? :)
0
Réponse 6 / 8
Id=ntity Messages postés 79 Date d'inscription   Statut Membre Dernière intervention   1
 
Enleves le position:relative ici:

#header a{
position: relative;
padding-top: 10px;
border: 5px solid #004268; /*#004268*/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: white;
background: #004268;
margin-right: -20px;
text-transform: lowercase;
}

et rajoute le css pour le header avec width, height...:

#header{
width: 800px;
height: 50px;
float:left;
}

Essaie avec ça.
0
Réponse 7 / 8
myplog Messages postés 3 Date d'inscription   Statut Membre Dernière intervention  
 
Hello Id=ntity,

dsl pour mes réponses tardives, je suis actuellement au Canada

J'ai modifier mon css et maintenant, le menu est aligné ! C'est déjà bien !!
Par contre, maintenant il reste plusieurs autres bugs d'affichage :

- le site n'est pas centré
- il n'y a plus de bordures arrondies sur le menu du haut
- Dans l'onglet "réflexions" par exemple, la sidebar est en bas...
- etc

C'est possible d'appliquer une feuille du style uniquement pour les utilisateurs d'IE ?

Merci pour tout
0
Réponse 8 / 8
Id=ntity Messages postés 79 Date d'inscription   Statut Membre Dernière intervention   1
 
Oui tout a fait.
Pour appliquer une feuille de style à IE :

<!--[if IE]>
Ton css
<![endif]-->

Pour plus d'informations, va faire un tour sur :

http://www.siteduzero.com/tutoriel-3-36505-les-hacks-css-pour-internet-explorer.html

Bon courage !
0
Myplog
 
Je crois que j'ai réussi… :)

J'ai encore quelques petites choses à régler mais maintenant ça s'affiche correctement sur IE, Opera, FF et Safari.

Merci pour votre aide précieuse !
0

Discussions similaires

Iptv beug
leogauthier15 -
bazfile -

1 réponse
Méssage Firefox ''Couldn't load XPCOM''
pistouri -
pistouri -

0 réponse
Problème IPTV SMARTER
eneleh49 -
glandu -

1 réponse
Smart IPTV met un temps fou à charger depuis que je suis passé à la fibre
Ancaro13 -
glandu -

3 réponses
Bug de chaîne IPTV
GeraltDeRiv13 -
bazfile -

1 réponse