Jump to content
Sign in to follow this  
Kreestal

Espace blanc inexplicable sous IE + autres bugs

Rate this topic

Recommended Posts

Bonsoir à tous! :)

C'est après trois jours de modification acharnée de CSS et de tests en tous genres sur différents navigateurs (Firefox, IE6, I7, IE pour Mac, Safari, Opéra...) que je touchais au but, quand j'ai dû réaliser qu'IE était plus fort que moi. J'ai plusieurs gros bugs que je ne parviens pas à résoudre toute seule.

Pour info, mon blog utilise Wordpress 2.1.1, soit la toute dernière version.

Edit: ma feuille de style se trouve à cette adresse.

  • Espace blanc inexplicable dans IE6: je n'ai jamais vu un bug pareil. Rendez-vous, avec IE6, sur l'article suivant. Le billet, contenu dans la div "content", commence par une image, suivie ensuite par du texte. Dans Firefox et IE7, tout va bien. Par contre IE6 rajoute un inexplicable espace blanc énorme entre le titre du billet et l'image... Je ne comprends pas pourquoi!!! J'ai beau regarder la source, je ne vois rien de suspect (cependant je n'arrive pas à valider ma page en Strict, peut-être est-ce dû à ça?).

    Le même problème se pose, à d'autres endroits (à croire que ce bug n'en fait qu'à sa tête) du site, en particulier sur les billets n'ayant eu aucune réponse. Exemple ici (à consulter avec n'importe quelle version d'IE cette fois): l'espace blanc se trouve désormais au bas de la page, sous le formulaire de commentaire.

  • Problème de padding ou de margin: à ce problème d'espace blanc inexplicable se greffe un problème de padding ou de margin (je n'ai pas réussi à l'identifier) sur les billets n'ayant pas encore reçu suffisamment de commentaires pour "pousser" le formulaire de commentaires au plus bas de la page (?). Exemple encore ici à regarder dans n'importe quelle version d'IE: la div "content" est mystérieusement collé à la div "sidebar", alors que cela ne doit pas être le cas.

  • Des règles différentes pour des navigateurs différents: enfin, le petit bonus est que je me prends les pieds dans les différents hacks, pour IE6, IE7, pour que quelque chose fonctionne dans Firefox mais pas dans IE, bref, ma css est assez épouvantable. J'ai lu des articles sur les commentaires conditionnels, mais j'hésite à les utiliser car je ne sais pas si les CSS ainsi indiquées prendront le pas sur la CSS principale pour les navigateurs auxquelles elles s'adressent en particulier. Je dois avouer que les différences padding et margin IE/FF commence à sérieusement me prendre la tête...

Si vous pouviez éclairer mon chemin tortueux de vos respectables lumières, j'avoue que vous me libéreriez d'un immense poids.

D'avance merci à vous! :flower:

Edited by Kreestal

Share this post


Link to post
Share on other sites

Bonjour,

Pour solutionner tes espaces blancs, c'est sûrement un problème d'haslayout (http://www.test.blog-and-blues.org/haslayout/trad_temp.html) et tu devrais pouvoir le régler en ajoutant à tes blocs concernés un height: 1%;

<div style="height: 1%;" class="post" id="post-99">

là vite fait dans le code et à l'arrache pour ta page Le bruissement de tes ailes... Encore un mystère d'IE

Je pense que la solution de ton problème est identique pour tous les défauts constatés.

Pour ce qui est des commentaires conditionnels, je te conseille plutôt que les hacks c'est beaucoup plus "robuste" en cas de mise à jour du navigateur.(http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows)

Edited by ghost

Share this post


Link to post
Share on other sites
Bonjour,

Pour solutionner tes espaces blancs, c'est sûrement un problème d'haslayout (http://www.test.blog-and-blues.org/haslayout/trad_temp.html) et tu devrais pouvoir le régler en ajoutant à tes blocs concernés un height: 1%;

<div style="height: 1%;" class="post" id="post-99">

là vite fait dans le code et à l'arrache pour ta page Le bruissement de tes ailes... Encore un mystère d'IE

Je pense que la solution de ton problème est identique pour tous les défauts constatés.

Pour ce qui est des commentaires conditionnels, je te conseille plutôt que les hacks c'est beaucoup plus "robuste" en cas de mise à jour du navigateur.(http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows)

Bonjour ghost, merci beaucoup pour ta réponse (postée à 2h30 du mat'!!) ;-)

J'ai rajouté le hack que tu suggères dans la div que tu suggères (sous la forme d'une class .gainlayout comme indiqué sur le site que tu as linké):

<div style="height: 1%;" class="post" id="post-99">

...mais cela n'enlevait (en tout cas sur la bécanne que j'utilise à la fac) que le blanc qui existait avant l'image, et pas le problème de padding/margin et l'espace blanc sous le formulaire que j'avais sur la 2e page dans IE6.

Du coup j'ai appliqué la class à la div supérieure (la div "content"), en supprimant la class de la div que tu suggérais, et là ça a fonctionné.

Edit: je me suis réjouie trop vite: le problème n'est pas réglé dans Firefox: le même espace blanc se situe sous le formulaire de commentaire sur cette page. Je ne comprends pas :wacko:

Quant aux commentaires conditionnels, je me pencherai dessus dès que ces problèmes de CSS seront réglés! Il me semble en effet que ça doit être plus propre et plus fiable.

Edited by Kreestal

Share this post


Link to post
Share on other sites

De retour chez moi j'ai testé la page problématique avec IE7: test non concluant.

Pour résumer:

  • IE7: la div "content" est collée à la div "sidebar" alors que cela ne devrait pas être le cas. Sur le reste du site ça fonctionne a priori. Seule cette page coince, et j'ignore pourquoi! En outre, il y a un espace blanc incompréhensible en bas de la page, sous le formulaire de commentaire. Edit: problème résolu grâce au hack donné dans ce lien:

    <!--[if IE 7]><style>
    .gainlayout { zoom: 1;}
    </style><![endif]-->



  • Firefox 2: du coup ne reste plus que le problème posé dans Firefox: l'espace blanc qui se trouve en bas de cette page sous le formulaire de commentaire.

Le problème est résolu!! :P Que ça soulage!!

Pour reméder au bug dans Firefox, je me suis aidée de ce très bon article. Ainsi, il fallait préciser "overflow:auto" dans la class .gainlayout (ici, appliquée à la div "content").

Edited by Kreestal

Share this post


Link to post
Share on other sites

je suis complétement hors sujet mais je vais l'assumer : j'aime beaucoup ce que tu écris. Du style, de la vie, une vraie intention de partager des pensées.

Share this post


Link to post
Share on other sites
je suis complétement hors sujet mais je vais l'assumer : j'aime beaucoup ce que tu écris. Du style, de la vie, une vraie intention de partager des pensées.

Wow, merci beaucoup! :flower: Très touchée que tu apprécies. :blush:

Share this post


Link to post
Share on other sites

Bonjour,

Tu aurais eu le même résultat en donnant un height: 1% a "content", je crois que je m'étais mal exprimé hier soir (matin?). Mais la solution que l'on trouve est toujours la meilleure ... Bon courage et bonne continuation (c'est vrai qu'il sont bien beaux tes textes ...)

Share this post


Link to post
Share on other sites

En fait c'est ce que j'ai fait! Au départ je ne l'avais appliqué qu'à la div contenant le post, et ensuite, j'ai remarqué que cela ne corrigeait pas tout, donc j'ai, au pif, tenté de l'appliquer à "content" et en effet ça a fonctionné. Rien de tout cela n'aurait été possible sans ton aide précieuse! Je ne suis qu'un petit padawan. :)

Merci d'avoir pris le temps de survoler mes scribouillages...*

Share this post


Link to post
Share on other sites

Ahum, c'est à nouveau moi, encore un problème du même genre sur le même site.

Voyez par vous-mêmes: mon footer est étrangement décalé sur les "pages" du sites (comme celle que j'ai donné en exemple), alors qu'il ne l'est pas a priori sur les billets (exemple de "billet").

Ce problème n'a été rencontré que dans Firefox.

Par contre, dans IE 6 et IE7, un nouveau problème sorti de la cuisse de Jupiter: les commentaires et le formulaire de commentaire s'affichent mal maintenant, très décalés sur la gauche; or, si je passe la souris sur les liens que ces éléments contiennent éventuellement, tout se remet en place... :wacko:

Ce qui est bien avec les CSS, c'est qu'on est toujours surpris :rolleyes:

Share this post


Link to post
Share on other sites

Bon, dommage que je ne puisse pas éditer mon précédent message.

Je tiens juste à préciser les choses grâce à des captures d'écran:

- Firefox only : la div "footer" se décale curieusement vers la droite, alors qu'elle devrait être sous la div "content" qui est au-dessus d'elle. Cela n'arrive que sur certaines pages en plus, et pas sur toutes... -_-;;

footer-1.jpg

Je travaille avec Wordpress, et ce problème ne concerne que les "pages" (=contenu fixe, comme "à propos", "contact"), et non les "billets" (=les articles ajoutés régulièrement au blog).

Exemples de "pages" où le footer s'affiche mal:

Exemples de "Billets" qui ne sont pas concernés et où le footer s'affiche bien:

Je ne comprends pas! Les marges sont exactement les mêmes sur les deux gabarits, il doit donc s'agir d'un bug d'affichage et non d'une différence dans ma CSS.

* A noter que ce bug n'existe pas sur IE *

- Internet Explorer 6 et 7 only: alors là, accrochez vos ceintures. Au chargement d'un "billet", j'ai désormais ce très pénible bug d'affichage:

ie-comments.jpg

Autrement dit: certains champs de formulaire ainsi que certains commentaires semblent soudain avoir une marge négative qui sort d'on ne sait où.

Mais ce qu'il y a de plus bizarre, c'est que quand je passe la souris sur les liens existants dans ces morceaux de texte décalés, ils se remettent à leur place. Ci-dessous, l'exemple pour le titre "Ecrire un commentaire", remis soudain à sa place quand la souris survole les liens "Fil RSS" ou "Trackback":

ie-comments2.jpg

Une vache n'y retrouverait pas ses veaux... :unsure:

* A noter que ce bug, lui, n'existe pas dans FF *

Quelqu'un pourrait-il m'aider SVP? :?::blush:

Edited by Kreestal

Share this post


Link to post
Share on other sites

Petite mise à jour: ne trouvant pas de solution aux problèmes évoqués ci-dessus, j'ai repris ma CSS depuis le début et fait le grand nettoyage (en écrivant notamment deux CSS propre à IE 6 et 7, incluses dans mes pages grâce aux commentaires conditionnels).

Le problème sous Firefox est donc réglé (bien que je ne comprenne pas trop à quoi il était dû).

Par contre, on s'en doutait, le problème sous IE résiste: toujours ce même bug d'affichage évoqué dans le post précédent:

- Internet Explorer 6 et 7 only: alors là, accrochez vos ceintures. Au chargement d'un "billet", j'ai désormais ce très pénible bug d'affichage:

ie-comments.jpg

Autrement dit: certains champs de formulaire ainsi que certains commentaires semblent soudain avoir une marge négative qui sort d'on ne sait où.

Mais ce qu'il y a de plus bizarre, c'est que quand je passe la souris sur les liens existants dans ces morceaux de texte décalés, ils se remettent à leur place. Ci-dessous, l'exemple pour le titre "Ecrire un commentaire", remis soudain à sa place quand la souris survole les liens "Fil RSS" ou "Trackback":

ie-comments2.jpg

Une vache n'y retrouverait pas ses veaux... :unsure:

* A noter que ce bug, lui, n'existe pas dans FF *

Quelqu'un pourrait-il m'aider SVP? :?::blush:

Ajoutons que cela concerne aussi le corps de mes billets, en plus des commentaires. Voir ici une illustration du bug dans IE6 (déroulez la page au niveau des derniers commentaires, puis survolez les liens avec votre souris).

J'ai supprimé le hack hasLayout car finalement avec le remaniement de ma CSS, il faisait plus de mal que de bien.

D'avance merci pour toute suggestion, toute piste, aussi infime soit-elle, car là je suis vraiment bloquée... :mad2:

Share this post


Link to post
Share on other sites

Salut,

Pour ie6 essaye:

blockquote {
margin: 1em 0 0 1em;
border-left: 4px solid #939393;
background-color:#f1f1f1;
font-style:italic;
}

Avantageusement remplacé par

.commentlist li p{
margin-left: 1em;
}

Edited by ghost

Share this post


Link to post
Share on other sites

Ghost, tu mérites une médaille en chocolat pour ton aide! ça fonctionne nickel maintenant :smartass:

C'est quand même bizarre qu'IE "bloque" sur le padding (ici, c'était le padding bottom qui posait problème... oO)

Topic résolu! :!:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By kevinjoseph
      Bonjour, j’ai un gros problème sur mon site Wordpress . Du jour au lendemain, mon site wordpress fais une redirection vers un autre site wordpress que j’ai crée ,sans que je touche à quoi que ce soit. Quand j’essai d’aller sur l’admin pour désactiver les plugins et voir d’où peut venir le problème. Impossible d’accéder, sa me redirige vers l’admin de l’autre site. Au final il est impossible que j’accède au site via (google, la bare de recherche, les favoris, l’admin…) pour voir ce qu’il fonction pas, j’ai juste accès au FTP. J'ai essayé de voir d'où pouvez venir ce bug en supprimant les plugins, le théme, mes derniers modifications, regarder sur le .htaccess si il y avais quelque par le nom de domaine de l'autre site écrit. Ca n'a rien changer, le site continue de ce rediriger automatiquement vers l'autre site. Si vous avez une idée d’où sa peut venir ou comment faire pour arranger ça et surtout comment éviter que sa ce reproduise. Sa m’aiderai beaucoup, merci d’avance.
      voici le code du .htaccess:
       
      # BEGIN WordPress
      <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /
      RewriteRule ^index\.php$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /index.php [L]
      </IfModule>

      # END WordPress
      ~   Ludovic • 16:28    
    • By prem
      Hello j'aurais besoin urgemment de votre aide svp... Cela fais des jours que je bloques.
      Voilà j'ai des posts , chaque posts a plusieurs categories.
      j'ai fais une requete wp_query pour lister tous les posts sauf une categorie ,mais je me retrouves avec des doublons . voila mon code 
      <?php /** * The template for displaying a grid item. * * @package WordPress * @subpackage Edition * @since Edition 1.0 */ $do_not_duplicate = array(); $query = new WP_Query( array( 'category__not_in' => array( 32 ) ) ); if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); $do_not_duplicate[] = $post->ID; global $tw_section, // section object $grid_size, // grid size $post; // section object $section_id = get_the_ID($post); // section id $tw_categories = get_categories(); // get all post categories $post_type = get_post_type(); $thumbnail_size = 'half'; $thumbnail_size = ($grid_size == 'fullgrid') ? 'big' : $thumbnail_size; if ($grid_size == 'related') { $thumbnail_size = 'related'; } ?> <div class="<?php if ( isset($tw_categories[0]->term_id) ) { echo 'highlight_category_' . $tw_categories[0]->term_id; } ?> <?php echo (has_post_thumbnail()) ? 'has-thumbnail' : 'no-thumbnail'; ?> <?php echo $grid_size;?> grid-item"> <div class="isobrick-inner"> <?php the_post_thumbnail($thumbnail_size, array( 'onload' => 'jQuery(this).animate({ "opacity" : 0.75 }, 500);' )); ?> <?php echo themewich_review_circle('none', false); ?> <?php if ( 'post' == $post_type ) : ?> <span class="thumboverdate"> <i class="fa fa-bookmark"></i> <?php themewich_date('human'); ?> </span> <?php else: ?> <?php if ( function_exists( 'wc_get_template' ) ) : ?> <span class="thumboverdate"> <?php wc_get_template( 'loop/price.php' ); ?> </span> <?php endif; ?> <?php endif; ?> <div class="thumbovertext"> <div class="badge"> <?php echo ag_get_cats(3); ?> </div> <h2 class="title"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php $title = get_the_title(); if (strlen($title) >= 75) { $title = mb_substr($title, 0, 75) . "... "; } echo $title; ?> </a> </h2> <?php if ( 'post' == $post_type ) : ?> <?php preg_match('/<!--more(.*?)?-->/', $post->post_content, $matches); ?> <a class="button outline" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php if ( isset($matches[1]) && $matches[1] ) { echo $matches[1]; } else { _e('Lire la suite', 'themewich'); } ?> </a> <?php endif; ?> </div> <a class="brick-thumb-link" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php the_title(); ?> </a> </div> </div> <?php endwhile; ?> <?php endif; ?> <?php wp_reset_query(); ?>  
       
       
      et quand je fais un var_dump ($do_not_duplicate);
      j'obtiens 
      array(1) { [0]=> int(470) }
      array(2) { [0]=> int(470) [1]=> int(368) } 
      array(3) { [0]=> int(470) [1]=> int(368) [2]=> 
       
       
      et je souhaiterai avec l'aide d'un foreach ne poster mon article qu'une fois
    • By Theode69
      Bonjour à tous, sachez que votre réponse me sera d'une très grande aide ! 
       
      Je suis actuellement entrain de créer un  site pour une université. L'objectif est d'avoir terminé avant la fin du mois d'aout une version test/un MVP simple mais fonctionnel. Pour résumer, mon but est de simplifier et rendre plus rapide les inscriptions des étudiants auprès des professionnels. Ce site contiendra une partie pour les étudiants, une pour les professionnels.
       
      Pour faire simple chaque étudiant aura  un compte perso, sur lequel il pourra ajouter des documents (carte d'identité, RIB, justificatif de domicile, etc) afin de les stocker dans un cloud. 
       
      De l'autre côté, les professionnels (auto école, salle de sport, assurance, protection sociale, opérateur téléphonique) auront un espace dédié à leur activité. Ils auront une fiche résumant leur entreprise (secteur, téléphone, localisation) et ils renseigneront les documents nécessaire lors de l'inscription à leurs services. 
      Pour s'inscrire, l'étudiant n'aura plus qu'a autoriser l'accès à ses documents (préalablement enregistrés dans le cloud) évitant ansi de perdre du temps sur place en passant par la dématérialisation de l'inscription. 
       
      Le projet devra donc contenir : 
       
      une zone de connection privée pour chaque utilisateur et entreprise la liaison avec un cloud (je pensais sous traiter la gestion du cloud  à une entreprise spécialisée)  si possible une barre de recherche permettant de trouver les professionnels répondant aux besoins des utilisateurs  la possibilité pour le professionnel de télécharger les documents auxquels ils a été autorisé afin de procéder à l’inscription  si possible (pas urgent car surement compliqué) que chaque professionnel puisse établir une page de pré inscription où l’utilisateur remplie ses données de manières manuscrites (prénom, nom, mail, etc) avant de compléter l’inscription avec les documents justificatifs contenus dans le cloud   
       
      Ayant de bonnes bases en HTML+CSS et quelques connaissances concernant Java Script j'hésite encore sur la forme que pourra prendre le site. 
      Soit il m’est possible d’utiliser WordPress.org en utilisant différents plug ins (mais il y en a t-il qui permettent réellement de remplir tout ces objectifs?). 
      Soit je pensais créer mon site à l’aide de Meteor.Js ou Node.Js …

      Quelles solutions préconisez vous ? Si aucune ne vous semble adaptée selon vous comment pourrais je faire pour créer ce MVP ? Comment feriez vous pour commencer ce projet ? 
      Merci énormément pour l’aide que vous pourrez m’apporter dans cette aventure ! Je suis disponible si vous voulez échanger plus longuement. 
       
      Bien cdt 
      Théo R
    • By Toulonweb
      Bonjour,
      je souhaite réaliser une section annuaire sur un site tournant sous wordpress,
      j'ai eu beau chercher a droite et a gauche mais rien à part 2 plugins qui ne sont plus mis a jours depuis des années.
      Je précise que je ne souhaite pas faire un site annuaire mais seulement une section sur un site existant.
      J'ai bien tenté arffo mais il n'est plus compatible avec php 5
      Auriez vous une piste?
       
      Merci d'avance.
       
      Nicolas
    • By fbern
      Bonjour
       
      j'ai un vieux site sous wordpress, et je voudrais faire une dizaine de redirections.
      Je n'ai pas besoin d'expressions régulières, c'est du 1 pour 1.
      N'étant pas développeur, pouvez vous m'aider: dois-je obligatoirement utiliser mod rewrite ?
      Est-ce que vous n'auriez pas une solution plus simple car je n'ose pas mettre les mains dans Apache?
      merci
×
×
  • Create New...