Html et css et problème navigateur Mac

Bonjour à tous,

Comme je ne sais pas vraiment si c'est un problème de CSS ou d'xhtml je ne savait pas trop où poster ce sujet, d'avance pardon si je me suis trompé en le postant ici.

Avant de me décider à vous demander de l'aide j'ai fait une recherche sur le net voir si le sujet avait déjà été abordé et je suis tombé sur ça : http://forum.alsacreations.com/topic-1-52663-1-Hack-css-windows-VS-mac.html. Malheureusement le manque de coopération de l'auteur du sujet ne m'a pas permis d'éclairer ma lanterne alors que je constate le m^me genre de problème avec une page web du site sur lequel je travaille.

La page qui pose problème : http://www.alterterra.fr/exemple.html

Pour les possesseurs de mac , vous constaterez entre autre un soucis en bas de page (zone "extrait" qui déborde de la page) et un problème de positionnements des photos agrandies (apparaissent trop haut par rapport aux miniatures). Sur pc, aucun soucis sur IE, Chrome, Firefox, safari.

J'en ai eu des bugs qui m'ont fait m'arracher les cheveux mais alors là, j'avoue que je sèche totalement. J'ai essayé en donnant une hauteur fixe aux div "extrait" (en créant du coup une classe "extrait2") mais le résultat est encore pire.

Mon code est a priori propre (dixit le W3C) alors c'est peut-être dû au css... Si vous avez des idées je suis preneur.

Bonsoir,

Hou là là ! Un site aussi mal codé c'est hyper rare... désolé : tout en position:absolute, le mal provient de là. En réalité le bug que vous soulignez ne fait que révéler la structure très mal pensée du site. Dans la pratique il faudrait revoir l'ensemble de la structure, mais bon...

Et aussi : une image de 1044 × 1300 px en fond de colonne principale plus deux div pour les bordures haut et bas... un simple background:#fff, un box-shadow pour les ombres en bordures, et un border-radius pour les contours arrondis suffiraient. Le site ne s'en comporterait que mieux et ce serait nettement plus propre.

Quite à garder ce type de codage ancien (par des images), il faudrait au moins couper sur seulement quelques pixels de haut cette image et la répéter verticalement (background-repeat:repeat-y).

La feuille de style est injectée directement dans la page... hyper-mauvaise pratique pour l'optimisation du site. Par le même coup, les données de la hauteur de la div principale sont renseignées au cas par cas (pour la page ) :

#corps {
....
height: 8700px;
....
}

... fastidieux au possible.

Il faut faire un fichier css appelé à part, le même pour toutes les pages. Et produire une height sur la div à 100% de hauteur, ce qui sera valable pour tous les cas de figure (height:100%).
Modifié par Olivier C (08 Jan 2013 - 00:49)

Bonjour Olivier,

Effectivement je code à l'ancienne (enfin j'aurais pu faire le site en tableau ça aurait encore plus oldschool).

"Et aussi : une image de 1044 × 1300 px en fond de colonne principale plus deux div pour les bordures haut et bas... un simple background:#fff, un box-shadow pour les ombres en bordures, et un border-radius pour les contours arrondis suffiraient. Le site ne s'en comporterait que mieux et ce serait nettement plus propre." box-shadow, border radius sur les vieux IE...(ok y'a css3 pie et les filtres propriétaires mais le résultat est pas toujours beau je trouve.)

La feuille de style est injectée directement dans la page... hyper-mauvaise pratique pour l'optimisation du site. Par le même coup, les données de la hauteur de la div principale sont renseignées au cas par cas (pour la page ) : N'ayant pas terminé le site je fais cette opération au denier moment, car mon dreamweaver bug un peu avec les modifs sur les css externes.

Je sais que la position absolute c'est la facilité et ça engendre des soucis mais bon, à mon niveau, ça me fait gagner pas mal de temps. Après c'est peut-être mal codé, reste qu'il s'affiche comme je le souhaite sur tous les navigateurs... sur PC.

Je vais reprendre un peu tout ça et faire des essais (div avec height 100 %) et puis je verrai bien.

Merci pour tes conseils.