18041 sujets

Questions générales et questions de débutants

Problème de comportement sur police monospace

Bonjour,

Je suis en train de faire un retour aux sources préhistoriques avec un site ayant un design ATARI 8 bit Smiley biggrin
Beaucoup trouveront ça moche, d'autre seront peut-être nostalgiques, etc ...

Bref, là n'est pas le propos ! Le tit truc qui agace est le suivant :
sur Gecko, les accents s'affichent normalement (à la mode moderne, avec l'accent au dessus de la lettre, qui elle est de taille normale), sur Opera la lettre s'affiche comme dans le temps, avec une lettre petite afin que l'accent ne dépasse pas en hauteur.
Et ce ù*ù$ù*^p de IE, non content de foutre le design en l'air en ne comprenant pas les pseudo-éléments :before et :after, me génère des symboles au lieu des lettres accentuées !

La page et la feuille CSS :

@charset "utf-8";
* {
	font-family: terminal, monospace;
	line-height: 1.15em;
	text-align: left;
}
title, h2 {text-transform: uppercase}
html>body>h1 {display: none;}
h2 {margin: 2em 0 0 0;}
p {margin: 0;}
hr {
	display:none;
}
@media screen {
	* {
		font-size: 1em;
		font-weight: bold;
	}
	html {
		width: 80%;
		margin: 0 auto 0 auto;
		padding: 0;
		background: #000;
		color: #0e5;
	}
	html:after {
		content: "\2588";
		text-decoration: blink;
		text-align: left;
	}
	head, title {display: block;}
	head:before, head:after, html body:before, html body:after {
		display: block;
		clear: both;
		text-decoration: none;
	}
	head:after, body:before, body:after {text-align: left;}
	head:before {
		margin: 0;
		padding: 1em 0 2em 0;
		font-size: 1em;
		content: "**** 8-BIT COMPUTERS-LIKE ****" ;
		text-align: center;
	}
	head:after {
		margin: 0;
		padding: 0;
		font-size: 1em;
		content: "READY.";
	}
	body {
		margin: 0;
		padding: 0;
		text-align: left;
	}
	body:before {
		font-size: 1em;
		content: "RUN";
	}
	body:after {
		margin-top: 2em;
		font-size: 1em;
		content: "READY.";
	}
	title {
		margin: 0;
		padding: 0;
	}
	title:before {content: 'LOAD "';}
	title:after {content: '",8\ALOADING';}
	#first {margin-top: 2em;}
}
@media print {
	* {
		font-size: 12pt;
		background: #fff;
		color: #000;
		padding:0 0.5em;
	}
}


Comment résoudre ce problème tout en conservant l'esthétique des anciennes fonts ?
Je ne connais pas de propriété CSS permettant de supprimer les accents ... et l'hébergeur ne supporte pas PHP ...
Je suis aware à toute idée !

Merci Smiley biggrin
Modifié par Gunner4902 (27 Mar 2007 - 14:11)
Bonjour,

C'est normal les double deux-points pour les pseudo-classes ?
body::after {...}

En tout cas, ça perturbe le validateur CSS du W3C (bien entendu, tu as passé ta feuille de style à la moulinette du validateur ?).

Pour ce qui est de l'esthétique des anciennes fontes (avec un E Smiley cligne ), ça risque d'être compromis vu que tu n'as pas la main sur la collection de fontes disponibles sur chaque poste...
Ok, donc pas moyen de contourner le problème ...
arf ...

Pour les :: , euh, j'ai du faire une erreur en remplaçant un caractère avec ctrl + H ... mais j'avais validé avant et c'était bon (donc avec seulement : Smiley cligne )

Ce que je ne comprends pas c'est que sur mon poste, IE, Opera et Firefox devrait utiliser la meme fonte, donc pourquoi le rendu n'est pas identique sur ce point ?
Gunner4902 a écrit :
Ce que je ne comprends pas c'est que sur mon poste, IE, Opera et Firefox devrait utiliser la meme fonte, donc pourquoi le rendu n'est pas identique sur ce point ?

C'est une fonte truetype installée sur le système dans un répertoire standard ?

Il y a effectivement parfois des disparités d'un navigateur à l'autre. Il peut être utile de donner le nom complet de la fonte et pas juste une abréviation. Par exemple si ta fonte "terminal" s'appelle en fait "Machin Chose Terminal Bold", mieux vaut indiquer le nom complet.
Sujet clos
Aller à