Aller au contenu

Intégration en CSS compatible que sous IE

Webdesigneuse

Par Webdesigneuse
dans (X)HTML et CSS

 Partager

Sujets conseillés

Webdesigneuse

Webdesigneuse

Posté
Posté

Bonsoir à tous,

Je suis en train de bosser sur un module à ajouter sur le site d'une cliente, qui a été réalisé l'année dernière.

Sur ce projet j'ai créé la charte graphique + suivi du projet et un collaborateur a réalisé le dev et l'intégration.

Le site fonctionnait bien sous IE6, Firefox2 au moment de la mise en ligne... mais depuis la nouvelle version de Firefox

c'est la cata ! le site est éclaté dans tous les sens ! j'ai aussi testé sous Gooogle Chrome, c'est idem.

Avez vous une idée d'où cela peut venir ?

Merci à tous ;)

Le site : la-syrah.fr

baulet

baulet

Posté
Posté

bonsoir,

essaye déja la validation w3c, il y a un caractere non utf8. on verra plus clair après

apres, essaye de construire en solide, parce que les float, à 1 pixel près en trop ca fait ..."site éclaté"

jongles avec les positions : relative pour les "conteneurs"

absolue pour les contenus...

(par exemple)

faire une mise en page solide sous tous les explorateurs, c'est possible, mais pas facile :) alors ... courage !

Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté

Merci Baulet...

Je sens que je vais devoir reprendre tout à zéro ;-/

Comment je vais expliquer ça à ma cliente moi ?...

elle va jamais vouloir payer ça ! et c'est encore bibi qui va se tapper tout

le boulot pour rien !? :nonono:

Comme tu le dis, c'est pas facile de faire compatible pour tous les navigateurs,

mais je ne comprends pas comment on peut arriver à faire un site éclaté à ce point...

Bon sang, je ne suis pas douée en dev et en intégration (bien pour ça que je délègue)

mais les sites que j'ai intégrés moi-même tiennent debout même s'ils ne sont pas W3C.

(exemple fait il y a 3 ans : www.salle-lacolombine.com)

Désolée pour ma colère, mais décidément ce n'est pas mon jour... je me bat aussi avec

un autre projet dont le dev (un autre !) n'a tjs pas livré un travail qui devait être livré en mai !

c'est du délir ce métier ! :shutup:

Bon je vas faire toutes les véif dont tu me parles, encore merci Baulet ;)

Merci Incite... je cours essayer ;)

Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté

J'ai viré le caractère non utf8... le site est bien validé W3C ! en voilà une bonne nouvelle ! et un très bon point pour le dev...

mais pour le reste je n'arrive pas à caler les div voyageuses...

Demain est un autre jour et après une bonne nuit de sommeil j'y verrais sans doute plus clair ;)

iNCiTE Web

iNCiTE Web

Posté
Posté

Je pense que le problème est le même pour le contenu : fait en sorte de donner des valeurs aux div pour qu'ils soient calés en largeur, dans leur conteneur...

Je sais pas si tu as l'extension Firebug pour FF, c'est avec ça que j'ai édité directement ton code et je voyait les résultats en temps réel.

D'autre part le soir avec la fatigue on est en général moins efficace, des petits bugs passent inaperçus ; à la fraîche je trouve que ça va beaucoup plus vite (euh enfin, ça dépend de la veille aussi hum)

iNCiTE Web

iNCiTE Web

Posté
Posté

En fait ile te faut rajouter 

width: 637px

à #menu_nav et tout passe nickel...

Tu as vérifié quand on met pleins de news, que le design se pousse bien vers le bas ? (on se fait souvent avoir quand on met des height)

Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté

Hello Seb ;)

Voilà une petite lumière dans mon matin brumeux...

Je vais commencer par me réveiller avec un thé fort et deux petits Lu ;)

puis je saute sur mon clavier et mes lignes de code pour tester ce que tu me dis...

^^

Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté

Bien pratique ce Firebug ;)

Alors... en effet je viens de tester le bloc news sur le côté, avec plein de news et le bas de page ne descend pas comme attendu,

donc ce sera idem pour le contenu textuel (central) de la page...

j'avais pourtant demandé que ça se pousse automatiquement...

ok je vais corriger ça donc.

Pour le #menu_nav... merci ! ça marche nikel ! :thumbup:

Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté

Baulet a raison...

apres, essaye de construire en solide, parce que les float, à 1 pixel près en trop ca fait ..."site éclaté"

Beaucoup de div sont montées sur du sable mouvant... je crois que je vais devoir tout reconstruire en div fixes...

J'ai notamment un soucis de chevauchement de la colonne des news sur le footer (à cause du float)...

J'ai déjà réussi à corriger l'allongement automatique de la colonne (avec un fond d'image)...

Pour ça, j'ai mis un min-height

Je ne savais pas qu'on pouvait donner une hauteur mini à un contenu... intéressant ;) (merci Alsacréation)

Je continue...

Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté

arf... en effet je ris jaune malgrès mes dents blanches :fou:

Dites... on est obligés de tenir compte de IE6 ??? :whistling:

Mon problème maintenant, c'est de combler le trou qui apparait quand

le contenu de la colonne news et/ou le contenu de la page (nouvelles_gauche)

font descendre le footer...

J'ai essayé de mettre une image de fond qui se répète en y dans le conteneur total,

mais ça ne marche pas... je persiste et cherche :c_tonguesmile:

Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté (modifié)

Ok, IE ne peut pas être zappé... surtout avec la cible du site qui touche l'ensemble de la population.

Je détaille la CSS ligne par ligne et là je vois un truc que je ne connais nullement :

html>body #infos_left #news_content{
	/*height:346px;*/
}

Quoitesse ? (je cherche aussi de mon côté)

Pardon, j'ai oublié de dire que c'est moi qui est placé les /* */ pour annuler car ça fait bugguer les div si je laisse le height

Modifié par Webdesigneuse
Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté

Ok... si j'ai bien compris c'est pour donner une position fixe à une div par rapport à la fenêtre ...comme si la fenêtre était le conteneur total...

C'est bien ça ?

Du coup je comprends pourquoi il n'y avait pas initialement de conteneur total...

L'actuel conteneur total c'est moi qui l'ai ajouté... pour mettre un fond qui se répète et qui sera visible à la place du trou (discussion plus haut)

Dois-je conclure que mon conteneur ne marchera jamais puisque la div fixe ne tient compte que de l'écran ?

Je sens que je perds en clareté...

Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté (modifié)

Merci Baulet pour tes encourragements ;)

Je n'arrivais pas à me détendre devant le film ce soir, du coup je m'y suis à nouveau collé... ^^

Alors, voilà où j'en suis :

J'ai un soucis avec l'étirement vers le bas...

il ne fonctionne pas sous IE7 alors que sous FF3 c'est nikel

La preuve en images : http://www.la-syrah.fr/test/nouvelles.php?id=42

Ce que j'ai fait =>

- pour la colonne des news :

background:url(images/fonds_news.jpg) repeat-y center top;
	 margin:0;
	 min-height:346px;
	 padding-left:14px;
	 padding-right:5px;
	 padding-top:14px;

-pour le conteneur total :

#total {
	 background:url(images/etire_bas_page2.jpg) repeat-y center top;
	 height:100%;
	 margin:0;

IE n'aime vraiment rien... il va donc falloir que je trouve des scripts complémentaires à la pelle à ce rythme...

Mais, demain étant un autre jour... douce nuit à tous :dots:

Modifié par Webdesigneuse
iNCiTE Web

iNCiTE Web

Posté
Posté

Si tu veux qu'un texte "pousse" son conteneur en hauteur, il ne faut pas lui mettre de propriété de hauteur... retires donc le min-height de la colonne de news.

Il me semble également que le height: 100% de #total ne sert à rien, car c'est 100% de son conteneur, hors il n'en possède pas ; peut-être avec FF ça fonctionne comme tu veux mais pas sous IE7 en tous cas.

Comme je te disais, passe minuit on s'embrouille, surtout après quelques heures passées devant la téloche :P

Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté (modifié)

Hello !

Oui je crois que la téloche et l'heure tardive ne facilitent en rien l'échange des neuro-transméteurs ^^

Ma journée étant bien chargée aujourd'hui je vais manquer de temps, mais j'ai déjà fait ce que tu m'as suggéré...

...en effet il y a du mieux !

http://www.la-syrah.fr/test/nouvelles.php?id=42

Cependant j'ai tjs un soucis sous IE7. Le texte est visible dans sa globalité mais le footer ne descend pas..

Je me penche sur la question cette aprem.

So, see you later...

Encore merci Incite ;)

Modifié par Webdesigneuse

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...