CSS float Chrome vs Firefox

Question

J'ai récemment acheté un thème wordpress, et je suis tombé sur un problème de css que je n'arrive pas à résoudre. Malheureusement, le créateur du thème ne fournit plus de support, donc j'espère que l'un d'entre vous pourra m'aider :D

Si vous consultez ce site :

demo.shakenandstirredweb.com/shaken-grid/

dans Google Chrome, vous verrez que l'en-tête flotte à gauche. C'est très bien !

Cependant, si vous consultez le site dans Firefox, vous verrez que l'en-tête ne flotte pas vers la gauche, mais reste quelque peu au milieu. J'ai joué avec les id's et les classes header, wrap et site-info, mais je n'arrive pas à faire flotter l'en-tête de Firefox à gauche comme dans Chrome.

Chrome

L'en-tête flotte à gauche en fonction du contenu du corps du texte.

Firefox

L'en-tête reste quelque peu au milieu.

Des suggestions ?

Merci d'avoir pris le temps de lire ce document !

EDIT : Ok, j'ai compris qu'il s'agit de la fonction div classe wrap . Dans Firefox, la largeur maximale est "bloquée" sur 1300px tandis que Chrome élargit la largeur automatiquement. Ce qui est bizarre, c'est que la largeur de .wrap dans la feuille de style est définie sur 1010px , marge auto. Quelqu'un sait-il ce que je dois faire ?

EDIT : Ok, je pense que ça a quelque chose à voir avec le javascript. Je suppose que cette fonction ne fonctionne pas avec Firefox :

function centerLayout(){
    if( jQuery(window).width() > mobile_width ){
        jQuery('#header .wrap, #footer .wrap, #filtering-nav, .navigation').css('width', jQuery('.isotope').width() - 10);
    }
}

Des conseils ?

Answer 1

Cela devrait régler le problème :

ajoutez ceci à votre feuille de style :

#grid {
  margin: auto;
  width: 1050px;
}

Answer 2

Essayez de le faire comme

Par exemple, j'ai mis 3 colonnes, mais pour m'assurer que cela fonctionne dans tous les navigateurs.

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3; /*normal att*/

le faire une fois avec -moz- , une autre avec -webkit- et avec none

certaines propriétés ne sont pas comprises par tous les navigateurs, il faut donc ajouter le nom du kit utilisé par le navigateur. comme dans l'exemple, les colonnes multiples ne sont pas toujours prises en charge, il faut donc ajouter le nom du kit.

la propriété que je voulais utiliser est "column-count" j'écris comme d'habitude et pour m'assurer qu'elle fonctionne parfaitement dans tous les autres navigateurs j'ajoute "-kit name-" avant le nom de la propriété

J'espère que j'ai bien expliqué cette fois-ci =]

Answer 3

Essayez de faire quelque chose comme

CSS

#header {
  overflow: hidden;
}

#header > .wrap {
  float: left;
  width: 100%;
}

JS

function centerLayout(){
  if(jQuery(window).width() > mobile_width ){
    newWidth = jQuery('.isotope').width() - 10;
    jQuery('#header .wrap, #footer .wrap, #filtering-nav, .navigation').css('width',newWidth);
  }
}
jQuery(document).ready(centerLayout);