[Résolu] Probleme width sur Internet Explorer

Bonjour tous le monde,

j'ai un petit problème qui apparait uniquement sur ie :

- dans le premier lien il manque un padding-left :10px; qu'on à sur firefox par exemple
- dans le deuxième lien il y a un problème de border-right autour du bloc droit qui n'apparait pa




Merci Merci
Modifié par kodjoed (23 Aug 2013 - 06:01)

ok... ma boule de cristal me dit............. non elle ne me dit rien. Bon bin je crois que tu seras obligé de joindre ton code ou un lien vers ta page.

lien 1 : http://www.500milligrammes.com/website/#produits


lien 2 : http://www.500milligrammes.com/website/#produitlaitier
Modifié par kodjoed (23 Aug 2013 - 12:34)

Et si t'essayais de corriger d'abord toutes les erreurs HTML.
Ton problème vient de la propriété "box-sizing" appliqué à tous les éléments que tu n'as d'ailleurs préfixée que pour Mozila. Si tu l'enlève, tu te rendra compte que même sous FF ça donne le même résultat.

Il y a beaucoup d'erreurs HTML ?

car MERCIIII M'sieur pour box-sizing tu as raison je l'ai virè, ça pose un problème car le problème est réglé pour le lien N°1

*,
*:after,
*:before {
padding: 0;
margin: 0;
[#red]-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;[/#]
}

reste plus que le numéro 2, et cette largeur de page que je ne comprend pas !!! tu as une idée ?
Modifié par kodjoed (23 Aug 2013 - 12:33)

Lusse bon j'ai finalement trouvè mon problème numéro 2 il suffisait de changer
position : absolute par position fixed

#vertical {
padding-left:145px; 
[b]position: fixed;[/b]
top: 50%; 
left: 0%; 
width: 100%; 
height: 600px; 
margin: -300px 0 0 -0px; 
background: white;
}

Juste une petite question, j'ai installè un pluggin pour modifier la scrollbar du bloc N°2 ici ->

http://www.500milligrammes.com/website/#produitlaitier

mais le hic c'est qu'il n'apparait qu'après plusieurs actualisation de la page (au minimum 2 pour ie)
au lieu d'apparaitre directement lorsque l'on atterrit sur la page
Modifié par kodjoed (23 Aug 2013 - 12:33)

@kodjoed : pourquoi tu réédite tes sujets c'est dommage pour les personnes qui passeront aprés toi car si on le relie comme çà nous avance pas du tout.

Ola @mini-truc comment ça va

j'ai remis les anciens postes, Si tu as une petite idée concernant mes problèmes tu es la bienvenue


http://www.500milligrammes.com/website/#produitlaitier

ce lien connait 2 erreurs :

1) lorsque je met position fixed à la place de absolute, tout est bon sous internet explorer mais sur smartphone et tablette la hauteur de 600px que j'utilise dans la balise verticalepour centrer verticalement s'applique et du coups il m'est impossible de voir le contenu complet de ma page verticalement car elle s'arrête à 600px sur smartphone et tablette ;

2) l'apparition de la scrollbar après plusieurs actualisation, Moi je pense qu'il y a un dysfonctionnement en js ou une actualisation pas assez appuyè lorsque l'on atterrie sur la page... Enfin une chose est sure, la scroll apparait plus rapidement sur Internet explorer, comme si l'actualisation était de meilleure qualité lol
Modifié par kodjoed (23 Aug 2013 - 13:05)

Problème N°1 résolu en ajoutant ceci à ma balise #verticale

#vertical {
padding-left:145px; 
position: absolute; 
top: 50%; 
left: 0%; 
width: 100%; 
height: 600px; 
margin: -300px 0 0 -0px; 
background: white;

[b]/* et le patch pour IE */ 
position : expression("fixed"); 
width : expression("100%");
top : expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight); 
left : expression("0px"); [/b]
}

Il ne manque plus que mon problème de scroll
Modifié par kodjoed (23 Aug 2013 - 13:22)

Tu utilises quelle librairie à tout hasard ? Es tu sur quelle soit compatible avec IE ? Il est fréquent que certaine librairie ne soit pas compatible avec tous les navigateurs ; ce qui est bien dommage.

Sinon je ne vois pas de raison apparente pour que cela ne fonctionne pas sous IE ; j'ai testé sous chrome et je n'ai rien vu dans le console. As tu testé sous firefox ? Parfois firfox interprete correctement mais affiche une erreur en console (il arrive à la traiter mais pas internet explorer).

Je t'ai exposé les cas que j'ai déjà rencontré et qui pourrait être similaire

(au passage j'aime bien ta charte graphique)

http://www.500milligrammes.com/website/#produitlaitier


Justement
sur smartphone // tablette // Internet Explorer ->
ça fonctionne au bout d'une seul actualisation si la scroll n’apparait pas dès notre entrè sur la page

Mais
sur firefox // Chrome // Opera // Safari->
marche lorsque l'on tombe sur la page directement mais si on actualise la page ou que l'on navigue sur le site puis reviens sur la page, la scroll modifiée laisse place à celle par défaut


Mais la je n'ai pas trop d’idées j'utilise ce pluggin ->
http://manos.malihu.gr/jquery-custom-content-scroller/

Merci @mini-truc pour le compliment, je vois qu'on a les même goûts

Alors je pense qu'il est possible que le rendu ne soit pas bien appelé ou au mauvais endroit ;
peux tu nous publier ton JS qui te permet de générer l'effet ? Car à moi que je me trompe je ne le vois pas dans les posts précédents.

Et tu appelles bien ta librairie tout en haut ?

en fait tous mes css et js sont appelè à partir de la page index
et tu as raison la ligne du milieu n'y était pas j'avais du l'effacè par inadvertance
mais bonje confirme le fait que ça ne marche toujours pas



celui qu concerne la scrollbar

se trouve ici ->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="index/produits/cssjs/jquery.mCustomScrollbar.concat.min.js"></script>
<link href="index/produits/cssjs/scrollbar.css" rel="stylesheet" />

J'ai beaucoup de mal à voir tes sources mais j'y arrive et sous chrome (çà ne fonctionne plus) j'ai çà en bah de page, fin de section :

(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar();

$("#remove-content").click(function(e){
e.preventDefault();
$("#content_1 .mCSB_container p:last").remove();
$("#content_1").mCustomScrollbar("update");
});
});
})(jQuery);

Il n'y aurait pas conflit entre la 1er et la 2eme ligne, qui me semble-t-il, sont censé faire la même chose.

Edition : je viens d'aller voir le site où est mentionné le plugin, tu appelles correctement le scroll sur ton élément. Cependant en parcourant ton source, j'ai vu plusieurs erreur
- tu as plusieurs éléments qui se nomment #content
- il est mentionné aussi qu'il faut appeler la librairie tout en bas de la page avant le fin du body
Modifié par mini-truc (26 Aug 2013 - 16:08)

oui en fait tout part de ma page index.html, c'est la ou j'appelle toutes mes pages css et js pour toutes les pages qui passent par elle... ensuite chaque page qui s'y relie n'a ni header ni footer, seulement le body de la page en question sans mentionner la balise body car ce n'est pas nécessaire dans mon cas

on continu, chaque page ou je veux que la scrollbar apparaisse je lui infiltre ce code justement en bas de page ->

(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar();

$("#remove-content").click(function(e){
e.preventDefault();
$("#content_1 .mCSB_container p:last").remove();
$("#content_1").mCustomScrollbar("update");
});
});
})(jQuery);

Donc avant de revenir vers vous à nouveau ->

- je vais supprimer la première ligne voir si il y a une évolution
- et aussi modifier les éléments s’appelant #content cotè scroll


en tout ças merci pour ton acharnement positif mini-truc ;D

Voici le code brut du pluggin de la scrollbar

<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar();

$("#add-content").click(function(e){
e.preventDefault();

$("#content_1 .mCSB_container").append("<p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Fusce adipiscing dui eu metus gravida.</p>");
$("#content_1").mCustomScrollbar("update");
});

$("#remove-content").click(function(e){
e.preventDefault();
$("#content_1 .mCSB_container p:last").remove();
$("#content_1").mCustomScrollbar("update");
});
});
})(jQuery);
</script>

la première ligne ne peut pas être supprimée et pour l’élément #content si j'ai bien vérifier ma page scrollbar.css, elle n'en comporte que 2 et ils ne se chevauchent pas, les voici ->

#content { background:#fff; padding:0px; }

.content{margin:0px; padding: 0px; width:500px; min-height:500px; max-height:500px; overflow:auto; background:#fff; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; border: 1px solid #c0c0c0;}

Modifié par kodjoed (26 Aug 2013 - 23:51)

Tu utilises un CMS ou autres outils de générateur de site ? Ton code source est vraiment différent de tout ce que j'ai vu jusqu’à présent. Tu devrais tester ton site au W3C pour te rendre compte réellement.

Pour le #content je ne parlais pas du javascript mais de l'HTML et là c'est vraiment obligatoire ; tu n'as pas le droit d'avoir plusieurs #content sur une même page.

Je ne peux pas faire grand chose de plus ; avant çà marchait encore sur Chrome maintenant plus du tout ; as tu une version antérieure pour rétablir l'état ?

Bon courage.

j’utilise aussi un js pour l'effet fadein fadeout lorsque l'on change de page

sur W3C j'ai "Result: 6 Errors, 2 warning(s) " mais je ne comprend pas ou sont mes erreurs, surtout que sur la balise <Auteur Marie-christine Marques> il voit trois fois l'erreur ???


Oki je comprend pour la balise #content et je vais rétablir ça sur le champ
si ça marche plus sur chrome c'est la galèreeeee je vais essayer de refaire marcher


en tout ças merci ;D
Modifié par kodjoed (27 Aug 2013 - 14:44)

Je reviens après quelques tests, je peux affirmer que ->


tout fonctionne :

- lorsque j'appelle les fichiers js et css directement sur la page produitlaitier.html et que je la test, tout fonctionne

- lorsque je met le contenu de ma page #produitlaitier directement dans la page index.html par exemple, le tout fonctionne aussi (c'est à partir de cette page ou tous les fichiers js et css sont appelè).

Ce qui laisse penser qu'il n'y a pas de dysfonctionnement entre les différentes pages js et css que j'appelle.


Rien ne fonctionne :

- À cause de cette ligne ->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Lorsque cette ligne n'est pas appelè directement de la page ou le contenu #produitlaitier se trouve, la scroll n’apparait pas.Dans mon cas elle se trouve dans la page index.html car elle sert aussi à faire fonctionner le plugin fadein qui sert de transition entre les pages lors de la navigation.



Pourquoi la distance pose problème ici ???

Sachant que l'on navigue à partir de la page index.html et que les fichiers js et css y sont implantè, normalement le chargement de ces deux fichiers s'est fait et donc il ne devrait pas y avoir de problème en principe

Serait-ce liè au temps trop court qu'il y a entre chaque changement de page, que la scroll n'a même pas le temps de se charger ????

je n'ai plus trop d’idée !!!
Modifié par kodjoed (27 Aug 2013 - 20:48)

Non, en fait tu appelles une page (si je comprend bien) lorsque tu cliques sur une catégories et celle-ci s'affiche dans une div ? Je pense qu'elle n'hérite donc pas de la page parent.

Peut être faut il que tu revoie la conception "structurelle" ; moi par exemple je n'aurais pas appelé une page dans une page ; mais j'aurais été cherché (ajax) le contenu en BDD et afficher dans un cadre dédié (fenêtre modale) qui s'affiche uniquement lorsque tu cliques sur une catégorie et dès lors que tu cliques sur "X" tu caches ce bloc.

De plus cela t’éviterais des chargements de type page/#category