28173 sujets

CSS et mise en forme, CSS3

Héritage font-size différent IE/Firefox

Bonjour à tous,

je pense avoir à peu près identifié le problème. Il est d'ailleurs traité ici :
[Résolu] Héritage entre id et class

Cependant, j'ai corrigé le problème sous firefox, mais en regardant sous IE, arg ! toujours le même problème.
Voilà la structure de ma page :
un header
une table (table#tablegen) comportant 2 cellules, respectivement td#colgauche qui est le menu de gauche et td#coldroite qui est le contenu de la page en cours (contient plein de table imbriquées)
un footer

voilà le bout de css en question :

body {
	margin: 0;
	padding: 0;
	color: #000;
	background-color: #F2F2F2;
	text-align: left;
	font-family: "Trebuchet MS", Tahoma, Verdana, Helvetica, Sans-Serif;
	font-size: 85%;
}
/* --------------------------------------------------- */
#tablegen {
	border-collapse: collapse; /* colle les 2 colonnes #colgauche et #coldroite */
	background: none;
	font-size: inherit; /* rajouté, car ne marchait plus sur le leftmenu */
    					/* la valeur héritée de body est 85% */
    					/* à lui seul, hérite les 85% pour #colgauche */
    					/* mais pas pour #coldroite !!! */
}
table {
	font-size: inherit;	/* toutes les tables héritent du font-size du parent */
						/* marche pour Firefox, mais pas pour IE */
}
/*
table {
	font-size: 85%;		Si je mets ça, 85% sont multipliés pour chaque table
						au final, j'ai donc des polices minuscules
}
#tablegen table  {
	font-size: inherit;
}*/


Le problème est que le font-size: 85%; du body ne s'applique plus dans tout #tablegen. J'ai vu que l'on pouvait rajouter la propriété inherit pour forcer l'héritage.

J'ai vu aussi qu'il y avait une notion d'augmenter la spécificité du sélecteur.
Est-ce que quelqu'un pourrait m'aider à faire hériter mon font-size: 85% sous IE et Firefox ?

merci
Peut-être que cela pourra préciser le problème :


<html>
<head>
</head>
<body marginwidth="0" marginheight="0" class="withleftmenu withrailroad" topmargin="0" leftmargin="0" onload="onload_Body()" onkeydown="onkeydown_Body()">
<script type="text/javascript"> asTabs[0] = "Espaces de travail"; ...</script>
<div id="header">
</div>
<div id="headmenu">
</div>
<div id="global">
<table id="tablegen">
<tbody>
<tr>
<td id="colgauche">
<div id="leftmenu">
</div>
</td>
<td id="coldroite">
<div id="railroad">
</div>
<div id="content">
</div>
</td>
</tr>
</tbody>
</table>
<div id="footer">
</div>
</div>
<form method="get" name="REDO_FORM">
</form>
</body>
</html>


C'est la structure de la page grâce à Firebug
J'ai trouvé une piste ici. Il semblerait qu'il s'agisse d'une caractéristique du mode de rendu Quircks dans Internet Explorer : les tableaux n'héritent pas de la taille de texte de l'élément body.

La solution : utiliser un doctype valide, pour passer en mode de rendu strict (ce qui, au passage, améliore grandement la compatibilité des rendus entre les navigateurs, même si ça ne la garantit pas).


Pour finir, je voudrais juste rappeler qu'il est tout à fait possible (et même préférable, aussi bien pour l'évolutivité d'un site que pour l'accessibilité des contenus) de réaliser une mise en page sans tableaux de mise en forme :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/
je n'ai qu'une chose à dire : O M G !

ça remet plein de choses en question ce que tu viens de m'appendre...
J'ai du pain sur la planche, je te tiens au courant...

ps : dans le template html du client, quand je retire le doctype, je m'apercoit que les font-size ne marchent plus, et que certains alignement IE non plus. Comme quoi, c'est vachement important...

merci
Sujet clos
Aller à