28220 sujets

CSS et mise en forme, CSS3

Bonjour,

Ayant à réaliser un site pour une institution publique (donc compatibilité maximale envers les navigateurs), je croise sur ma route les pas d'IE/Mac 5.1, lequel entend bien me mettre des bâtons dans les roues.

Voyez plutôt : dans un conteneur (largeur : 50 em), j'ai placé le texte (largeur : 35 em pour une bonne lisibilité), et le menu flottant à droite (largeur : 12 em). Toutes les largeurs sont spécifiées, ça devrait éviter à IE/Mac certains bugs avec les flottants...

Eh bien non, ça marche à peu près bien sauf sous IE/Mac, où c'est proprement illisible, sans que je sache ni d'où ça vient ni comment régler ce problème. Smiley bawling

Voici les captures d'écran :

Sous Ubuntu avec Firefox
Sous MacOS 9.1 avec MSIE 5.1

Voici la feuille de styles

Et voici la structure XHTML de la page :

<div id="milieu">
        <!-- le menu latéral flottant -->
	<div id="parcours">
		<div>
			<ul>
				<li></li>
			</ul>
		</div>
	</div>

	<!--Corps du texte-->
	<div id="cadre">
		<div class="paragraphe">
			<h1></h1>
			<h2></h2>
			<div style="position:relative;">
                                  <!-- le texte dans des balises <p></p> -->
                        </div>
			<hr />
		</div>
	</div>
</div>


Si quelque personne plus avisée que moi parvenait à mettre la main sur les propriétés fautives...
Modifié par 1000k (18 Jul 2005 - 11:22)
J'ai un IE5-Mac, je peux peut-être trouver un truc. Mais pour répondre à ta question il faudrait plus d'éléments. Essaie de mettre en ligne provisoirement et de coller un lien ici. Milieu; sur une page en deux colonnes ; c'est à gauche ou à droite ?
On ne sait quoi est quoi quand on voit les captures d'écran. ( surtout sur un petit écran )
La vrai page c'est mieux, car on peut utiliser des outils comme WebDeveloper pour analyser rapidement.
Voilà qui est fait, le site et la base SPIP ont été transférés ici afin que le site soit accessible en ligne : http://lespaysans.free.fr

"Milieu" est tout simplement la partie de la page qui est le conteneur du menu flottant et du texte de l'article. Elle est située entre l'en-tête et le pied de page, donc au milieu (et de plus, elle est centrée horizontalement) Smiley smile

Avec un corps de texte de 35em de large centré dans la page (la lisibilité est optimale entre 60 et 80 caractères par ligne), et un menu flottant à droite, il y avait énormément d'espace à partir de 1280x1024. De même, une largeur totale de plus de 50em à taille normale oblige un scroll horizontal en 800x600. Et il y avait des problèmes à fort taux de zoom sur le texte dans les Mozillas. Donc j'ai créé le conteneur "milieu" et ça fonctionne... sauf avec IE5/Mac Smiley decu
Modifié par 1000k (13 Jul 2005 - 11:49)
1000k a écrit :
et ça fonctionne... sauf avec IE5/Mac Smiley decu

sur ie5.0/win marche pas non plus. Le div "cadre" se trouve à la suite.
Hors sujet : comment sont fait tes coins arrondis ?
Oui, en effet, c'est tout en border-radius, j'ai déjà assez de mal à m'en sortir sans rajouter des difficultés supplémentaires Smiley cligne

a écrit :
sur ie5.0/win marche pas non plus

Merci pour la précision, je n'avais que IE 6 à disposition. Donc c'est décidé, je deviens Smiley fou
1000k a écrit :
Oui, en effet, c'est tout en border-radius, j'ai déjà assez de mal à m'en sortir sans rajouter des difficultés supplémentaires Smiley cligne

sur ie5.0/win marche pas non plus

Merci pour la précision, je n'avais que IE 6 à disposition. Donc c'est décidé, je deviens Smiley fou

Disons que développer selon les standards, et non pour Firefox, a de plus fortes chances de donner le résultat sans doute espéré Smiley cligne

avant de s'occuper d'IEMac, il faudrait :
- valider le HTML
- établir la CSS sans extensions et implémentations propriétaires

Là, on pourrait commencer à travailler sur une base solide Smiley cligne

<edit>En effet, c'est catastrophique dans Opera, par exemple</>
Modifié par Laurent Denis (13 Jul 2005 - 15:25)
Il est vrai que j'ai développé le site en accès restreint (donc pas de possibilité de validator) et sous SPIP (donc Tidy bloque sur les boucles).

Le XHTML est autant valide que possible (c'est quand même SPIP, il reste quelques soucis, dont les /> à la fin de la balise img, par exemple).

Par contre Mea Culpa sur la CSS, j'ai voulu la faire plus pratique mais alors j'ai découvert que j'ai fait plein de trucs qu'il fallait pas au niveau sauts de ligne, et espaces après les : .
Ça y est, c'est corrigé, elle passe le validateur. Les seules implémentations non standard sont les (-moz-)(-khtml-)border-radius, pour donner envie de passer à Mozilla, Konqueror ou Safari (et pas que Firefox) Smiley ravi .

Il y a encore plein de choses à faire pour bien adapter le site, et grâce à vos critiques ça avance Smiley biggrin

Peut-être qu'à terme il faudra en venir aux feuilles de styles spéciales navigateurs récalcitrants Smiley ohwell , même si je n'aime pas trop ça.

Au fait à propos d'IE5/Win, qui l'utilise encore ? Ceux qui ne savent pas changer de version ou de navigateur, et sont-ils nombreux ?

PS : Laurent, concernant Opera, je m'y mets de suite.
PS2 : n'empêche que ça passe dans les navigateurs texte Smiley cligne
Modifié par 1000k (13 Jul 2005 - 16:30)
1000k a écrit :
Au fait à propos d'IE5/Win, qui l'utilise encore ? Ceux qui ne savent pas changer de version ou de navigateur, et sont-ils nombreux ?


Tu trouveras pleins de stats contradictoires et diverses.

Une seule certitude : ce sont encore les utilisateurs privés d'IE qui évoluent le plus vite vers les nouvelles versions, faute de faire vraiment un choix. Il peut en être tout autrement sur les grands comptes et les intranet.
1000k a écrit :
Il est vrai que j'ai développé le site en accès restreint (donc pas de possibilité de validator) et sous SPIP (donc Tidy bloque sur les boucles).


Que ne l'as-tu dit plus tôt ! Tu es tout pardonné, et nos voeux t'accompagnent Smiley cligne
Je le savais !
Les vieilles querelles sont toujours les meilleures Smiley cligne

Spip est pas mal du tout, mais c'est vrai qu'avec mes tendances à l'XHTML Strict et à l'UTF-8, il y a des différends et des choix à faire Smiley smile Ils se sont quand même bien améliorés.

Cela dit, je viens de tester sous Opera, c'est horrible Smiley eek Mon dieu, encore du boulot qui m'attend Smiley lol
Je n'ai pas dit que SPIP était mal, loin de là.

Juste qu'il fallait du courage pour lui faire faire certaines choses (pour lesquels il n'a effectivement pas été conçu)
Ça y est, après quelques déboires disque-duresques qui ont retardé la mise à jour du code, ça a l'air de passer sous Opera (je suppose que ça venait d'un display:inline que j'avais mis pour IE, mais il a l'air de s'en passer).
Je n'ai pu tester que sous la 6.04. Je ne sais pas si ça fonctionne aussi sous la 8.01... Si quelqu'un l'a sous la main --> ... Smiley cligne

PS : http://browsershots.org est victime de son succès, il y a 8 à 14h d'attente...
Modifié par 1000k (18 Jul 2005 - 10:28)
Victoire !

Ça a l'air de marcher sur IE6/Win et Mac, Mozilla(s), Safari, Netscape (7,8), Opera, Konqueror, navigateurs texte (Lynx, w3m).

À moins qu'on ne remarque un bug dans les IE5/win ou Opera 7 ou 8, je considère ce problème comme résolu.