Problème h1 et CSS avec IE
monkey_monk
Messages postés
681
Statut
Membre
-
Dalida Messages postés 7114 Statut Contributeur -
Dalida Messages postés 7114 Statut Contributeur -
Bonjour à tous,
voici mon problème:
j'ai définis un titre <h1> dans ma Css... sous Firefox nos tress ùais sous IE il est (bcp) plus grand.
Voici mon css:
Bon, la réponse se trouve peut-être dans l'attribut "block" ...mais j'aimerais avoir une confirmation de ça.
Merci !
Monkey Monk
voici mon problème:
j'ai définis un titre <h1> dans ma Css... sous Firefox nos tress ùais sous IE il est (bcp) plus grand.
Voici mon css:
ul#onglet { height:28px; margin:0 20px 0 20px; list-style-type:none; }
ul#onglet li { float:left; height:28px; text-align:center; margin:0 10px; color:#3287C8; }
ul#onglet li a.societe { display:block; width:80px; height:28px; font:normal 18px Arial, Helvetica, sans-serif; color:#3287C8; text-decoration:none; padding-top:2px; }
ul#onglet li a.societe:hover { display:block; width:80px; height:28px; background:url(../images/menu_petit.gif) no-repeat 0 0; color:white; }
ul#onglet li h1 { width:80px; height:28px; background:url(../images/menu_petit.gif) no-repeat 0 0; color:white; }
Bon, la réponse se trouve peut-être dans l'attribut "block" ...mais j'aimerais avoir une confirmation de ça.
Merci !
Monkey Monk
A voir également:
- Problème h1 et CSS avec IE
- Ie tab - Télécharger - Outils pour navigateurs
- Ie 11 - Télécharger - Navigateurs
- Ie 9 - Télécharger - Navigateurs
- Ie 8 - Télécharger - Navigateurs
- Google payment ie ltd dublin c'est quoi - Forum Consommation & Internet
8 réponses
salut,
une version plus lisible :
un <h1> dans une liste ça fait bizarre.
c'est quoi le code HTML ?
une version plus lisible :
ul#onglet {
height:28px;
list-style-type:none;
margin:0 20px;
}
ul#onglet li {
color:#3287C8;
float:left;
height:28px;
margin:0 10px;
text-align:center;
}
ul#onglet li a.societe {
color:#3287C8;
display:block;
font:normal 18px Arial, Helvetica, sans-serif;
height:28px;
padding-top:2px;
text-decoration:none;
width:80px;
}
ul#onglet li a.societe:hover {
background:url(../images/menu_petit.gif) no-repeat 0 0;
color:#FFF;
display:block;
height:28px;
width:80px;
}
ul#onglet li h1 {
background:url(../images/menu_petit.gif) no-repeat 0 0;
color:#FFF;
height:28px;
width:80px;
}
un <h1> dans une liste ça fait bizarre.
c'est quoi le code HTML ?
Merci pour le code... je ferais plus attention la prochaine fois !
Voici l'html :
Oui, effectivement ce n'est pas "juste" d'utiliser un h1 pour un menu... d'ailleurs j'ai changé ça !
Ce qui m'intéresse surtout est de comprendre pourquoi le comportement de mon titre est différent entre FF et IE alors que j'utilise un css "classique".
Des idées ?
Merci.
Voici l'html :
<div id="menu">
<div class="box">
<ul>
<li>Société</li>
<li> </li>
<li><a href="societe.html#qui">Qui sommes-nous ?</a></li>
<li><a href="societe.html#pourquoi">Pourquoi nous choisir ?</a></li>
<li><a href="societe.html#garanties">Nos garanties</a></li>
<li><a href="societe.html#cerga">La certification CERGA</a></li>
<li> </li>
<li> </li>
<li class="spacer"> </li>
<li><span class="savoir_societe"><a class="savoir" href="#">en savoir plus</a></span></li>
</ul>
</div>
</div>
Oui, effectivement ce n'est pas "juste" d'utiliser un h1 pour un menu... d'ailleurs j'ai changé ça !
Ce qui m'intéresse surtout est de comprendre pourquoi le comportement de mon titre est différent entre FF et IE alors que j'utilise un css "classique".
Des idées ?
Merci.
Ce qui m'intéresse surtout est de comprendre pourquoi le comportement de mon titre est différent entre FF et IE alors que j'utilise un css "classique".
peut y avoir plein de raisons, surtout si la taille du texte intervient.
avec ça tu veux faire quoi :
remplacer le texte par une image ?
si oui, le code n'est pas suffisant et le {color} ne sert à rien.
peut y avoir plein de raisons, surtout si la taille du texte intervient.
avec ça tu veux faire quoi :
ul#onglet li h1 {
background:url(../images/menu_petit.gif) no-repeat 0 0;
color:#FFF;
height:28px;
width:80px;
}
remplacer le texte par une image ?
si oui, le code n'est pas suffisant et le {color} ne sert à rien.
ul#onglet li h1 {
background:url(../images/menu_petit.gif) no-repeat 0 0;
text-indent:-1000em;
overflow:hidden;
height:28px;
width:80px;
}
Non, il ne s'agit pas de remplacer le texte par une image mais de placer une image en background du texte (d'ou le changement de couleur). En fait il s'agit d'un menu type "onglet" possédant un effet roll-over et lorsqu'on est sur la page en question le style de l'onglet est comme son style roll-over. (compris ? ^^)
Bon, ceci dit je vois bien qu'il y a pas mal de redondance dans mon css... en général je clean quand tout est "comme il faut".
Pour tenter de clarifier un peu la chose, sous IE mon titre est comme il devrait être sans la redéfinition du style via mon css. Il est comme le h1 bien gras "de base".
C'est bien ça que j'ai du mal à comprendre... sous FF il suit, en toute logique, les recommandations de mon style... sous IE il n'en tient pas rigueur.
Sinon, je ne comprend pas à quoi sert ton text-indent ?
Merci !
ul#onglet li h1 // style du bouton lorsque l'on se trouve sur la page désignée ul#onglet li a.societe // style "normal" inactif ul#onglet li a.societe:hover // style au survol (roll-over)
Bon, ceci dit je vois bien qu'il y a pas mal de redondance dans mon css... en général je clean quand tout est "comme il faut".
Pour tenter de clarifier un peu la chose, sous IE mon titre est comme il devrait être sans la redéfinition du style via mon css. Il est comme le h1 bien gras "de base".
C'est bien ça que j'ai du mal à comprendre... sous FF il suit, en toute logique, les recommandations de mon style... sous IE il n'en tient pas rigueur.
Sinon, je ne comprend pas à quoi sert ton text-indent ?
Merci !
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
mieux vaut garder le <h1> pour ce à quoi il est censé servir.
pour la navigation tu peux utiliser un <span> pour la page en cours et un lien pour les autres pages.
le <span> sera présenté comme les liens au survol (au passage tu peux définir les autres états du lien) :
C'est bien ça que j'ai du mal à comprendre... sous FF il suit, en toute logique, les recommandations de mon style... sous IE il n'en tient pas rigueur.
le problème peut venir de nombreuses choses, en premier desquelles la présence d'un DocType valide en haut de ton document et de la validité du code HTML.
il faudrait pouvoir diagnostiquer la bête en live pour de donner une réponse précise.
mais si tu reprends une architecture HTML valide et sémantique et que tu as des CSS rigoureux tu devrais corriger ça.
pour la navigation tu peux utiliser un <span> pour la page en cours et un lien pour les autres pages.
le <span> sera présenté comme les liens au survol (au passage tu peux définir les autres états du lien) :
ul#onglet li a:link, ul#onglet li a:visited{}
ul#onglet li span, ul#onglet li a:hover, ul#onglet li a:active{}
C'est bien ça que j'ai du mal à comprendre... sous FF il suit, en toute logique, les recommandations de mon style... sous IE il n'en tient pas rigueur.
le problème peut venir de nombreuses choses, en premier desquelles la présence d'un DocType valide en haut de ton document et de la validité du code HTML.
il faudrait pouvoir diagnostiquer la bête en live pour de donner une réponse précise.
mais si tu reprends une architecture HTML valide et sémantique et que tu as des CSS rigoureux tu devrais corriger ça.
#2 "Oui, effectivement ce n'est pas "juste" d'utiliser un h1 pour un menu... d'ailleurs j'ai changé ça !"
;)
Je n'ai pas mit de <span> mais stylé le comportement sur <li>... ^^
Ma page et son doctype son bon et valides selon le W3C... même lorsque j'avais utilisé le h1 ^^'
Pour ce qui est de la sémantique, c'est justement ce que j'essaye de "bien intégrer" dans ma façon de faire mais j'ai encore pas mal de lacunes quand à la préférence d'une balise plutôt qu'une autre... j'ai beau dévoré une quantité incroyable de tuto et textes en tous genre sur le sujet... je n'ai jamais trouvé un document explicatif "concret".
Par exemple, pour le cas du <span> que j'ai délaissé pour styler le <li>... je l'ai fait dans un soucis de légerté mais je ne sais pas si sémantiquement c'est un bon choix ou non.
Si tu as de bonnes pages à se sujet, je suis preneur !
Merci pour tes réponses !
le plus fiable c'est d'aller chercher l'info à la source : les spécifications du W3C.
c'est un peu indigeste au départ mais une fois que tu connais un peu c'est clair, net et précis !
+ http://www.la-grange.net/w3c/html4.01/
+ https://www.la-grange.net/w3c/xhtml1/
+ http://www.yoyodesign.org/doc/w3c/css2/cover.html
c'est un peu indigeste au départ mais une fois que tu connais un peu c'est clair, net et précis !
+ http://www.la-grange.net/w3c/html4.01/
+ https://www.la-grange.net/w3c/xhtml1/
+ http://www.yoyodesign.org/doc/w3c/css2/cover.html
Merci beaucoup !
J'ai déjà ces liens dans mes bookmarks... mais j'avoue ne pas tellement les avoir "dévoré" !
Effectivement plutôt indigeste et même passant outre, pas "terriblement intéressant".
Ce n'est pas tant les standards qui me posent problème (car simple de rester dedans surtout en xhtml1 strict) mais surtout ces quelques questions : ergonomie/nomenclature, sémantique/légerté du code... que choisir/privilégier ? ^^"
Je perds souvent un temps dingue à me demander "si j'enlève ça, c'est plus efficace... mais est-ce que c'est mieux ?"
J'ai tendance à ne pas aimer les "sur-emplois" de classe et sous-classe pour tout et n'importe quoi... mais la plupart du temps, ces codes là fonctionnent directement, bien qu'étant plus lourd.
Soit, je suis persuadé que c'est à force de faire que je passerais par dessus !
Merci, merci !
J'ai déjà ces liens dans mes bookmarks... mais j'avoue ne pas tellement les avoir "dévoré" !
Effectivement plutôt indigeste et même passant outre, pas "terriblement intéressant".
Ce n'est pas tant les standards qui me posent problème (car simple de rester dedans surtout en xhtml1 strict) mais surtout ces quelques questions : ergonomie/nomenclature, sémantique/légerté du code... que choisir/privilégier ? ^^"
Je perds souvent un temps dingue à me demander "si j'enlève ça, c'est plus efficace... mais est-ce que c'est mieux ?"
J'ai tendance à ne pas aimer les "sur-emplois" de classe et sous-classe pour tout et n'importe quoi... mais la plupart du temps, ces codes là fonctionnent directement, bien qu'étant plus lourd.
Soit, je suis persuadé que c'est à force de faire que je passerais par dessus !
Merci, merci !
oui effectivement.
c'est à force d'expérience.
pour les tags, je pense qu'on peut sans se priver ajouter des <div> et des <span> qui ne sont là que pour la présentation, bien sûr sans tomber dans l'excès et la soupe de tags.
pour le reste (du genre les menus de navigation en <ul> ou en <dl>, le remplacement du texte avec {background-image} ou <img/>) à chacun son avis, et il y en a beaucoup !
chacun ses arguments, son point de vue. là encore c'est l'expérience qui fait choisir un chemin plus qu'un autre mais il n'y a pas une vérité absolue ou définitive.
pour ma part je crois fermement qu'il faut rester au plus près des standards et toujours faire au plus léger, c'est le plus viable.
mais certains cas ne permettent pas de rester dans les clous des specs ou de réduire la quantité de code, donc il faut bien composer…
bonne continuation pour la suite et au plaisir de te lire à nouveau !
c'est à force d'expérience.
pour les tags, je pense qu'on peut sans se priver ajouter des <div> et des <span> qui ne sont là que pour la présentation, bien sûr sans tomber dans l'excès et la soupe de tags.
pour le reste (du genre les menus de navigation en <ul> ou en <dl>, le remplacement du texte avec {background-image} ou <img/>) à chacun son avis, et il y en a beaucoup !
chacun ses arguments, son point de vue. là encore c'est l'expérience qui fait choisir un chemin plus qu'un autre mais il n'y a pas une vérité absolue ou définitive.
pour ma part je crois fermement qu'il faut rester au plus près des standards et toujours faire au plus léger, c'est le plus viable.
mais certains cas ne permettent pas de rester dans les clous des specs ou de réduire la quantité de code, donc il faut bien composer…
bonne continuation pour la suite et au plaisir de te lire à nouveau !
