Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Webmastering

Syntaxe commentaire conditionnel firefox /IE

Dernière réponse le 8 déc 2008 à 10:58:59 didier6526, le 3 déc 2008 à 16:11:16

Signaler ce message aux modérateurs

Bonjour,
sur la page index de mon site
http://mycomenius.free.fr quand la souris survole les liens jaunes un texte apparait sur une petite ardoise.

survolez le 3è lien en haut à gauche avec l'alphabet et voyez la différence entre IE et firefox.
je n'ai pas les mêmes marges avec firefox et IE
Je souhaite utiliser les commentaires conditionnels pour changer le padding entre IE et firefox


blablabla


Le début de mon style est le suivant:

<style type="text/css" media="screen">

.body { margin: 0px }

a {text-decoration: none; /* définition du lien qui affichera le "calque" */}
a:hover {background: none; /* correction d'un bug IE */
position:relative;}
a span { /* définition de la balise inclue dans <a> */ display: none;}

a.lien_gauche_haut:hover span{ /* définition de la balise au survol */ display: block;
position: absolute;
/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:0px solid #000000;top:1cm; left:2cm;margin-left: 50px;width: 300px;height:201px;text-align: left;
padding-left: 22px;padding-right: 37px;padding-top: 35px;color: #FFFFFF;
font: 18px comic sans ms;font-weight: normal;
background-image: url('index/page index images/mini_ardoise.gif');background-repeat: no-repeat ;
}

Je l'appelle avec le code suivant en spécifiant la class "lien gauche haut":

<td class="cellule25"ALIGN="center" VALIGN="center">
<a class="lien_gauche_haut" href="">BienvenueBienvenue sur Mycomenius</a> 
<a class="lien_gauche_haut" href="">Plein écran F11Pour voir le site en plein écran appuyez sur la touche F11 de 
votre clavier. Pour revenir appuyez encore sur la touche F11.</a> 
<a class="lien_gauche_haut" href="">LienA B C D E F G H I J K L M N O P Q R S T U V W X Y Z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z it's a try of comment</a> 
<a class="lien_gauche_haut" href="">Lienceci est un essai de commentaire sur un lien it's a try of comment </a> 
<a class="lien_gauche_haut" href="">Lienceci est un essai de commentaire sur un lien it's a try of comment </a> 
</td>

Je souhaite créer une class "liengauche hautIE"spécifique à IE.
comment faire pour que firefox lise la class "lien gauche haut"
et que IE lise la class "lien gauche hautIE"

Quelle syntaxe?

merci d'avance de votre aide
salut à tous
didier

Configuration: Windows XP
Firefox 3.0.4

Meilleures réponses pour « syntaxe commentaire conditionnel firefox /IE » dans :

Synchronisation favoris en firefox et IE Voir

Les CSS !!! IE!=FireFox (Résolu) Voir

Pb de décalage de div entre IE et Firefox (Résolu) Voir

Faire un zoom rapide sous Firefox / IE VoirFaire un zoom sur une fenêtre de Mozilla Firefox ou Internet Explorer ? Sous Internet Explorer on peut aussi faire un zoom en bas a droite de la page : Mais il y a une autre façon que celle-ci pour Internet Explorer ET Mozilla Firefox,...

Favicon - L'icône de votre site dans la barre d'adresse VoirVous avez sûrement remarqué la présence d'une icône à gauche de l'URL dans la barre d'adresse de votre navigateur sur certains sites web ? Pour mettre en place ce type d'icône sur votre propre site web il n'y a rien de plus simple. Créer la...

Compatibilité IE / FireFox (Résolu) Voir

Simuler internet explorer sous firefox (Résolu) Voir

Problème affichage avec firefox Voir

Télécharger Toutes les extensions (petits modules complémentaires) de Firefox Voir

Télécharger IETab VoirIE Tab est une extension pour Mozilla Firefox, et uniquement pour les systèmes d'exploitation Windows. Elle permet à une page Web ou à un lien d'être ouvert dans un onglet de Firefox avec le moteur d'Internet Explorer. Cette extension est...

Posez votre question Répondre

arthezius, le 3 déc 2008 à 17:14:09

Met déjà tes feuilles de style en externe plutôt que directement dans la page.

Dans la condition, pour IE attribue lui un deuxième fichier CSS qui sera adapté. Webmaster indépendant.

Répondre à arthezius

didier6526, le 3 déc 2008 à 21:16:51

Bonjour,
j'ai tout mis dans le code html parceque ça ne sert que pour la page de garde
et aussi parceque je ne sais pas faire

qui peut me traduire le contenu de mon style dans une page indexs.css je n'arrive pas à trouver la bonne syntaxe?

<style type="text/css" media="screen">

.body { margin: 0px }

a {text-decoration: none; /* définition du lien qui affichera le "calque" */}
a:hover {background: none; /* correction d'un bug IE */
position:relative;}
a span { /* définition de la balise inclue dans <a> */ display: none;}

a.lien_gauche_haut:hover span{ /* définition de la balise au survol */ display: block;
position: absolute;
/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:0px solid #000000;top:1cm; left:2cm;margin-left: 50px;width: 300px;height:201px;text-align: left;
padding-left: 22px;padding-right: 37px;padding-top: 35px;color: #FFFFFF;
font: 18px comic sans ms;font-weight: normal;
background-image: url('index/page index images/mini_ardoise.gif');background-repeat: no-repeat ;
}

si vous voulez bien ensuite je vous demanderai comment modifier mes instructions pour appeler les feuilles de style index.css quand on n'est pas sous IE et indexIE.css quand on travaille sous IE

merci de vos aides

didier

Répondre à didier6526

arthezius, le 4 déc 2008 à 05:12:53

Tu met ça entre les <head>

<link href="style.css" rel="stylesheet" type="text/css" />

dans le fichier .css tu met:

.body { margin: 0px }

a {text-decoration: none; /* définition du lien qui affichera le "calque" */}
a:hover {background: none; /* correction d'un bug IE */
position:relative;}
a span { /* définition de la balise <span> inclue dans <a> */ display: none;}

a.lien_gauche_haut:hover span{ /* définition de la balise <span> au survol */ display: block;
position: absolute;
/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:0px solid #000000;top:1cm; left:2cm;margin-left: 50px;width: 300px;height:201px;text-align: left;
padding-left: 22px;padding-right: 37px;padding-top: 35px;color: #FFFFFF;
font: 18px comic sans ms;font-weight: normal;
background-image: url('index/page index images/mini_ardoise.gif');background-repeat: no-repeat ;
}

Webmaster indépendant.

Répondre à arthezius

didier6526, le 6 déc 2008 à 18:28:14

Salut

ça y est j'y suis arrivé en spécifiant IF !IE

j'ai une différence entre IE et firefox

merci beaucoup pour ton aide

didier

Répondre à didier6526

didier6526, le 4 déc 2008 à 21:18:28

Salut

peux tu me corriger si je me suis fait des noeuds?
j'ai maintenant ceci au début de ma page index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>My comenius</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</script>
</head>

Voilà ci-dessous le contenu complet de mon fichier index.css

.body { margin: 0px }

a {text-decoration: none; /* définition du lien qui affichera le "calque" */}
a:hover {background: none; /* correction d'un bug IE */
position:relative;}
a span { /* définition de la balise inclue dans <a> */ display: none;}

a.lien_gauche_haut:hover span{ /* définition de la balise au survol */ display: block;
position: absolute;
/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:0px solid #000000;top:1cm; left:2cm;margin-left: 50px;width: 300px;height:201px;text-align: left;
padding-left: 22px;padding-right: 37px;padding-top: 35px;color: #FFFFFF;
font: 18px comic sans ms;font-weight: normal;
background-image: url('index/page index images/mini_ardoise.gif');background-repeat: no-repeat ;
}

a.lien_gauche_bas:hover span{ /* définition de la balise au survol */ display: block;
position: absolute;
/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:0px solid #000000;top:-6cm; left:2cm;margin-left: 50px;width: 300px;height:201px;text-align: left;
padding-left: 22px;padding-right: 37px;padding-top: 35px;color: #FFFFFF;
font: 18px comic sans ms;font-weight: normal;
background-image: url('index/page index images/mini_ardoise.gif');background-repeat: no-repeat ;
}

a.lien_droit_haut:hover span{ /* définition de la balise au survol */ display: block;
position: absolute;
/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:0px solid #000000;top:1cm; left:-1cm;margin-left: -350px;width: 300px;height:201px;text-align: left;
padding-left: 22px;padding-right: 37px;padding-top: 35px;color: #FFFFFF;
font: 18px comic sans ms;font-weight: normal;
background-image: url('index/page index images/mini_ardoise.gif'); background-repeat: no-repeat ;
}
a.lien_droit_bas:hover span{ /* définition de la balise au survol */ display: block;
position: absolute;
/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:0px solid #000000;top:-6cm; left:-1cm;margin-left: -350px;width: 300px;height:201px;text-align: left;
padding-left:22px;padding-right: 37px;padding-top: 35px;color: #FFFFFF;
font: 18px comic sans ms;font-weight: normal;
background-image: url('index/page index images/mini_ardoise.gif'); background-repeat: no-repeat ;
}

/* dimensions fond derrière noir =000000*/
.fond { position: absolute; top: 0px; left: 0px; background-color: #000000;
width: 100%; height: 100% ; background-repeat: no-repeat ;
font: 15px Verdana; font-weight: bold;color: #00FF00;}

/* dimensions du tableau devant */
.table_au_dessus { position: absolute; top:0px; left: 0px; width: 100%; height: 100%; }
/* dimensions des cases couleur transparente avec ""*/
.cellule7 { height: 7% ;
font:18px Verdana; font-weight: bold;color: #FF0000; }
.cellule8 { height: 8% ;
font: 15px Verdana; font-weight: bold;color: #FF0000; }
.cellule10 { height: 10% ;
font: 15px Verdana; font-weight: bold;color: #00FF00;}
.cellule25 { width:12.5%; height: 25%;color:yellow;
font:15px Verdana; font-weight: bold;color: #00FF00;}

merci

didier

Répondre à didier6526

didier6526, le 4 déc 2008 à 21:23:38

Resalut

suite de ma requête

voilà le code qui faisait appel à la classe "lien gauche haut"

<td class="cellule25"ALIGN="center" VALIGN="center">
<a class="lien_gauche_haut" href="">BienvenueBienvenue sur Mycomenius</a> 
<a class="lien_gauche_haut" href="">Plein écran F11Pour voir le site en plein écran appuyez sur la touche F11 de 
votre clavier. Pour revenir appuyez encore sur la touche F11.</a> 
<a class="lien_gauche_haut" href="">Lienceci est un essai de commentaire sur un lien it's a try of comment</a> 

<a class="lien_gauche_haut" href="">Lienceci est un essai de commentaire sur un lien it's a try of comment </a> 
<a class="lien_gauche_haut" href="">Lienceci est un essai de commentaire sur un lien it's a try of comment </a> 
</td>

Comment puis je modifier ce code pour faire appel à mon fichier index.css ?

merci et à bientôt

Didier

Répondre à didier6526

arthezius, le 8 déc 2008 à 10:58:59

Si tu met <link href="style.css" rel="stylesheet" type="text/css" /> et que ton fichier s'appel index.css, ça vas pas le faire. Webmaster indépendant.

Répondre à arthezius

Posez votre question Répondre