Problèmes css explorer

Résolu/Fermé

ickyknox Messages postés 1157 Date d'inscription jeudi 13 décembre 2007 Statut Membre Dernière intervention 17 mars 2024 - 8 oct. 2012 à 01:11
Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 - 15 oct. 2012 à 15:49

Bonjour,

j'ai créé une feuille de style pour internet explorer.

Seulement il y a quelques détail que je n'arrive pas à modifier.

Par exemple, je veux une div avec du texte verte et un fond de couleur blanche.
Or, tout ce que j'ai c'est un texte de couleur noir sur fond transparent.

Pouvez vous m'aider s'il vous plait .

Voici ce que j'ai pour l'instant ;

#cadretitre {
position:relative;
	clear: both;
	margin: 0 5%;
	padding: 1em 0 1em 1em;
	margin-top:10px;
  margin-left: auto;
		   z-index:2;
	}

#titre {
	background: #F9F9F9;
	display: table-row-group;
	padding: 1em;
	text-align: center;
	line-height:1em;
 	}

#titre h1 {
	font-family: BelleroseLight;
	font-weight: normal;
	font-size: 200%;
color: red;	}

Je vous remercie

A voir également:

Problèmes css explorer
Explorer patcher - Télécharger - Personnalisation
Internet explorer 8 - Télécharger - Navigateurs
Telecharger internet explorer - Télécharger - Navigateurs
Exe explorer - Télécharger - Divers Utilitaires
Ouvrir internet explorer - Guide

4 réponses

Réponse 1 / 4

lionel-DIL Messages postés 1222 Date d'inscription lundi 25 juin 2012 Statut Membre Dernière intervention 7 août 2014 1 768
8 oct. 2012 à 01:15

Bonsoir,

Pour mettre une couleur verte à un texte :

#titre {

color:#06DE38;
}

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
8 oct. 2012 à 01:35

ou color:green;
mais rien ne vaut le code couleur

ickyknox Messages postés 1157 Date d'inscription jeudi 13 décembre 2007 Statut Membre Dernière intervention 17 mars 2024 48
8 oct. 2012 à 02:55

bonjour
justement j'ai mis color: red;

mais ca ne fonctionne pas

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
8 oct. 2012 à 13:12

peux tu mettre le code complet, ou du moin la partie html css concernée?

ickyknox Messages postés 1157 Date d'inscription jeudi 13 décembre 2007 Statut Membre Dernière intervention 17 mars 2024 48
8 oct. 2012 à 15:18

ah oui exact.
Lord votre message m'a interpellé. Du coupo j'ai corrigé mon code.

Du coup, ma question va changer.

<div class="ligne"></div>

<div id="cadretitre">
                                   
	<center><div id="titre"><h1>CONTACT?</h1></div></center>
			
</div>

.ligne {
   width: 78%;
		   border-color	: #60ab0d;
		   border-width: 0 0 2px;
		   border-style: solid;
		   font-size: 0;
		   margin-top:33px;
		   margin-left:70px;
		   float:left;
		   position:absolute;
		   z-index:1;
}

 #cadretitre {
position:relative;
	clear: both;
	margin: 0 5%;
	padding: 1em 0 1em 1em;
	margin-top:10px;
  margin-left: auto;
		   z-index:2;
	}

#titre {
		   	   background: #F9F9F9;
	display: table-row-group;
	padding: 1em;
	text-align: center;
	line-height:1em;
 	}

#titre h1 {
	font-family: BelleroseLight;
	font-weight: normal;
	font-size: 200%;
color: #60ab0d;	}

#titre a {
	font-family: BelleroseLight;
	font-weight: normal;
	font-size: 130%;
color: #60ab0d;	}

déshormais, sur tous les navigateurs SAUF explorer, j'ai bien ce que je voulais, à savoir un titre : une ligne horizontale, et par dessus le titre (le tout de couleur verte)

Sur explorer, je n'ai que le titre, mais je n'ai pas la ligne.
Si je supprime le titre (cadretitre) du code html, je retrouve ma ligne.
Donc je suppose que le titre empiète sur la ligne.

Je tiens à préciser que ma ligne doit rester en arrière plan, car si elle est positionnée au 1er plan, mon titre sera barré.

merci encore pour votre aide

ickyknox Messages postés 1157 Date d'inscription jeudi 13 décembre 2007 Statut Membre Dernière intervention 17 mars 2024 48
Modifié par ickyknox le 8/10/2012 à 15:19

voici mon site pour voir l'apercu final que j'aimerais sur tous les navigateurs:
http://icreatorbeta.free.fr/contact.html

Réponse 2 / 4

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
Modifié par Lord Zero le 8/10/2012 à 16:45

Le problème vient du fait que ton cadretitre n'a pas de taille, pour Internet Explorer ton cadre fait toute la page, ta ligne est bien présente mais derrière cette énorme cadre., il faut donc faire un style pour Firefox et IE.

Le code suivant est testé sous IE7.
j'ai juste modifié cadretitre et ligne.

<div class="ligne"></div>

<div id="cadretitre">
                                   
	<center><div id="titre"><h1>CONTACT?</h1></div></center>
			
</div>   

<style>

.ligne {
   width: 78%;
		   border-color	: #60ab0d;
		   border-width: 0 0 2px;
		   border-style: solid;
		   font-size: 0;
		   margin-top:33px;
		   margin-left:70px;
		   float:left;
		   position:absolute;
		   z-index:1;
}

 #cadretitre {
 width:100px;
position:relative;
	clear: both;
	margin: 0 5%;
	padding: 1em 0 1em 1em;
	margin-top:10px;
  margin-left: 500px;
		   z-index:2;
	}

#titre {
		   	   background: #F9F9F9;
	display: table-row-group;
	padding: 1em;
	text-align: center;
	line-height:1em;
 	}

#titre h1 {
	font-family: BelleroseLight;
	font-weight: normal;
	font-size: 200%;
color: #60ab0d;	}

#titre a {
	font-family: BelleroseLight;
	font-weight: normal;
	font-size: 130%;
color: #60ab0d;	}
</style>
<!--[if IE]>
<style>
.ligne {
   width: 78%;
		   border-color	: #60ab0d;
		   border-width: 0 0 2px;
		   border-style: solid;
		   font-size: 0;
		   margin-top:45px;
		   margin-left:-410px;
		   float:left;
		   position:absolute;
		   z-index:1;
}

 #cadretitre {
 width:100px;
position:relative;
	clear: both;
	margin: 0 5%;
	padding: 1em 0 1em 1em;
	margin-top:10px;
  margin-left: 500px;
		   z-index:2;
	}


</style>
<![endif]-->

Développeur VB6, VBS, VBA, VB.NET, C#, HTML, PHP, JAVASCRIPT, SQL.

Réponse 3 / 4

ickyknox Messages postés 1157 Date d'inscription jeudi 13 décembre 2007 Statut Membre Dernière intervention 17 mars 2024 48
9 oct. 2012 à 17:25

1000 merci lord zero !
En plus grace à ce conseil, j'ai compris pas mal de choses.
Merci !!

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
9 oct. 2012 à 18:39

De rien, bonne continuation !

Réponse 4 / 4

alymira Messages postés 7 Date d'inscription lundi 15 octobre 2012 Statut Membre Dernière intervention 16 octobre 2012
15 oct. 2012 à 15:21

Bonjour à tous,
Pouvez-vous m'aider svp?

Je débute en CSS et je rencontre quelques problèmes au niveau de l'alignement de mes blocs J'ai un menu à gauche en "float:left", et un bloc à sa droite, le corps, contenant tout mon texte.
Sous firefox et chrome, tout fonctionne bien, mais sous IE (euh je crois que c'est une veille version), mon corps se positionne en dessous du menu (diagonalement car je lui ai appliqué une marge).

J'ai lu qu'il fallait faire par exemple ceci en CSS:

************************ Début exemple code ************************
#div_menu{
float:left:
}

#div_contenu_page{
margin-left: 220px !mportant; /*Marge interprétée par firefox et chrome*/
margin-left: 110px; /*marge interprétée par IE, et vallant la moité de la marge
sous Firefox et chrome*/
}
************************ Fin exemple code ************************

Je l'ai fait... ça n'a rien changé :(.

Pourriez-vous m'aider svp, je sais plus quoi faire, j'ai tenté diverses choses sans succès :(

Merci

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
Modifié par Lord Zero le 15/10/2012 à 15:47

peux tu mettre le code entier ( html et css) de la partie concerné?
Pour t'aider, voici ma façon de faire :
1-Je code pour Firefox en premier (ex: style.css)
2-Je modifie pour IE (ex: style_ie.css)
3-J'utilise un "hack css" pour chrome et safari que je place dans mon style.css de firefox
ex :

#ma_div { 
 height: 340px; 
 width: 1000px; 
 position: relative; 
 margin-left: 200px; 
} 
  
/* hack Chrome / Safari */ 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
 #ma_div { 
  width: 600px; 
 } 
}

Source : http://glob.bargeo.fr/fr/web/css/hack-css-pour-google-chrome-et-safari/

lionel-DIL Messages postés 1222 Date d'inscription lundi 25 juin 2012 Statut Membre Dernière intervention 7 août 2014 1 768
15 oct. 2012 à 15:47

Bonjour,

!mportant;
C'est !important qu'il faut mettre.

Lord Zero Messages postés 459 Date d'inscription lundi 18 octobre 2010 Statut Membre Dernière intervention 15 juin 2018 115
15 oct. 2012 à 15:49

oh oui autant pour moi, pas vu la faute...

Discussions similaires

App explorer Sa sert a quoi ?