CSS ne se charge pas sous IE..

Fermé
simonbarreau Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 26 juin 2013 - 25 juin 2013 à 11:08
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 - 26 juin 2013 à 15:21
Bonjour à toutes et à tous,

J'essaie en vain de faire fonctionner ma page HTML sur IE mais mon code CSS ne se charge pas..

 
<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="status.css" />
	<link rel="stylesheet" type="text/css" href="chargement.css" />
    <title>Commande Camera SICK 2D</title>
  </head>
 
  <body onLoad="refresh_image();" >
  <link rel="shortcut icon" href="cam_2D.png"/>
	<div id="bloc_page">
<header>
			<img src="logo.png" alt="logo" id="logo">
			<h1>Commande Camera<br/> <em> SICK 2D </em> </h1> 
			<img src="cam_2D.png" alt="logo" id="cam_2D" height="70px">
		</header>

		</section>
	
		<footer>
			<p class="adresse"> <br/> www.sg2c.com <br/> PA Estuaire Sud rue du<br/>Lt Commander LH Maxfield <br/>44320 Saint Viaud <br/>FRANCE </p>
			<p> <img src="logo.png" height="60px"/> <br/> <img src="SICK_logo.png" height="40px"/> </p>
		
		</footer>
	</div>
  </body>
</html>




quelqu'un a t'il une solution ?

12 réponses

ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
Modifié par ideal23 le 25/06/2013 à 12:06
@charset "utf-8";
/* CSS Document */
pour un document externe css, sinon faire une actualisation de ton navigateur.
vérifie aussi le chemin du fichier style
1
simonbarreau Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 26 juin 2013
25 juin 2013 à 14:16
ça fonctionne !! merci beacoup, ça a même résolut d'autre problème que j'avais sur IE ! Merci encore.
0
simonbarreau Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 26 juin 2013
26 juin 2013 à 10:32
en faite, je me suis trompé. ça ne fonctionne pas sur mon serveur (ma camera) mais en local ça fonctionne parfaitement. Je suis obligé de copier tout mon code CSS directement entre les crochets <style> </style>.

Une solution ?
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
26 juin 2013 à 11:57
donne-moi ton css sur le forum
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
simonbarreau Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 26 juin 2013
26 juin 2013 à 14:25
Merci beaucoup de ton aide ideal23


@charset "utf-8";

body{
	background-color :rgb(39, 46, 75);
}
#bloc_page{
    width: 900px;
    margin: auto;
	margin-top : -20px;
	background-color : white;
}
header{
margin : auto;
height: 60px;
text-align : left;
box-shadow : 0px 5px 10px black;
background-color : #3F3F3F;
padding : 30px;
}
header h1{
font-family : Arial;
color : rgb(75, 164, 212);
margin-top : 0px;
margin-left : 120px;
text-align : center;
}
#logo, header h1, #cam_2D{
	display: inline-block;
	float : left;
}
#cam_2D{
	float : right;
	margin-top :5px;
}
article, aside{
    display: inline-block;
    vertical-align: top;
    text-align: justify;
}
section{
	padding: 20px;

 }
aside{
    position: relative;
    width: 235px;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
	margin : 10px;
    color: white;
    font-size: 0.9em;
}
input[type="range"] {
    position: relative;
    margin-left: 1em;
}
input[type="range"]:after,
input[type="range"]:before {
    position: absolute;
    top: 1em;
    color: #aaa;
}
input[type="range"]:before {
    left:0em;
    content: attr(min);
}
input[type="range"]:after {
    right: 0em;
    content: attr(max);
}
#barre_rafraichissement2{
	display : none;
	
	transition: all 3s 1s;
}
#param_camera{
	box-shadow : 0px -1px 0px #999999;
}
#fleche_bulle{
    position: absolute;
    top: 15px;
    left: -62px;
}
footer{

height: 70px;
text-align : left;
box-shadow : 0px -0.5px 10px black;
background-color : #E0E0E0;
padding : 30px;
}
footer p, adresse{
	display: inline-block;
}
.adresse{
	color : #3F3F3F;
	position : relative;
	bottom : 40px;
	left : -80px;
	display : inline-block;
	vertical-align : top;
	height : 120px;
	padding-right : 30px;
	box-shadow : 1px 0px 0px #C0C0C0;
	font-size: 0.9em;
}
footer p{
	position : relative;
	bottom : 40px;
	right : -350px;
	display : inline-block;
	vertical-align : top;
	text-align : center;
	height : 120px;
	padding-left : 70px;
	box-shadow : -1px 0px 0px #C0C0C0;
}
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
Modifié par ideal23 le 26/06/2013 à 15:01
cette feuille de style est status.css ?
à quoi correspond chargement.css?
le site est-il sur le net?
résultat de ton programme avec feuille de style: http://creuselimousin.free.fr/simonbarreau/
height="60" c'est mieux que height="60px" pour les images.
0
simonbarreau Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 26 juin 2013
26 juin 2013 à 14:58
chargment est une autre page css, et je ne peux cependant pas héberger mon site sur internet et je n'arrive pas à mettre de lien mega sur ce site. voilà mon code chargement :

 @charset "utf-8";

#spinner {

    width: 16px;
    height: 16px;
	position: relative;
	left: 276px;
	top: -250px;
}
.piece {
    background: #CCCCCC;
    width: 50%;
    height: 14%;
    position: relative;
}
.spinner div {
    opacity: 0.2;
}
@-webkit-keyframes fade { 
 
    5% { opacity: 0.8; } 
    30% { opacity: 0.5; }
 
}
@-ms-keyframes fade { 
 
    5% { opacity: 0.8; } 
    30% { opacity: 0.5; }
 
}
@-moz-keyframes fade { 
 
    5% { opacity: 0.8; } 
    30% { opacity: 0.5; }
 
}
.a, .p {
    height: 50%;
    width: 14%;
    left: 99%;
}
.a {
    top: 5%;
    -webkit-animation: fade 1.6s ease-in infinite;
    -moz-animation: fade 1.6s ease-in infinite;
    -ms-animation: fade 1.6s ease-in infinite;
}
.b {
    bottom: 21%;
    left: 50%;
    -webkit-animation: fade 1.6s ease-in-out 1.5s infinite;
    -moz-animation: fade 1.6s ease-in-out 1.5s infinite;
    -ms-animation: fade 1.6s ease-in-out 1.5s infinite;
}
.c {
    bottom: 34%;
    left: 110%;
    -webkit-animation: fade 1.6s ease-in-out 0.1s infinite;
    -moz-animation: fade 1.6s ease-in-out 0.1s infinite;
    -ms-animation: fade 1.6s ease-in-out 0.1s infinite;
}
.d {
    bottom: 31%;
    left: 27%;
    -webkit-animation: fade 1.6s ease-in-out 1.4s infinite;
    -moz-animation: fade 1.6s ease-in-out 1.4s infinite;
    -ms-animation: fade 1.6s ease-in-out 1.4s infinite;
}
.e {
    bottom: 43%;
    left: 134%;
    -webkit-animation: fade 1.6s ease-in-out 0.2s infinite;
    -moz-animation: fade 1.6s ease-in-out 0.2s infinite;
    -ms-animation: fade 1.6s ease-in-out 0.2s infinite;
}
.f {
    bottom: 32%;
    left: 11%;
    -webkit-animation: fade 1.6s ease-in-out 1.3s infinite;
    -moz-animation: fade 1.6s ease-in-out 1.3s infinite;
    -ms-animation: fade 1.6s ease-in-out 1.3s infinite;
} 
.g {
    bottom: 45%;
    left: 149%;
    -webkit-animation: fade 1.6s ease-in-out 0.3s infinite;
    -moz-animation: fade 1.6s ease-in-out 0.3s infinite;
    -ms-animation: fade 1.6s ease-in-out 0.3s infinite;
}
.h {
    bottom: 30%;
    left: 6%;
    -webkit-animation: fade 1.6s ease-in-out 1.2s infinite;
    -moz-animation: fade 1.6s ease-in-out 1.2s infinite;
    -ms-animation: fade 1.6s ease-in-out 1.2s infinite;
}
.i {
    bottom: 43%;
    left: 155%;
    -webkit-animation: fade 1.6s ease-in-out 0.4s infinite;
    -moz-animation: fade 1.6s ease-in-out 0.4s infinite;
    -ms-animation: fade 1.6s ease-in-out 0.4s infinite;
}
.j {
    bottom: 29%;
    left: 12%;
    -webkit-animation: fade 1.6s ease-in-out 1.1s infinite;
    -moz-animation: fade 1.6s ease-in-out 1.1s infinite;
    -ms-animation: fade 1.6s ease-in-out 1.1s infinite;
}
.k {
    left: 149%;
    bottom: 41%;
    -webkit-animation: fade 1.6s ease-in-out 0.5s infinite;
    -moz-animation: fade 1.6s ease-in-out 0.5s infinite;
    -ms-animation: fade 1.6s ease-in-out 0.5s infinite;
}  
.l {
    bottom: 30%;
    left: 28%;
    -webkit-animation: fade 1.6s ease-in-out 1s infinite;
    -moz-animation: fade 1.6s ease-in-out 1s infinite;
    -ms-animation: fade 1.6s ease-in-out 1s infinite;
} 
.m {
    bottom: 43%;
    left: 134%;
    -webkit-animation: fade 1.6s ease-in-out 0.6s infinite;
    -moz-animation: fade 1.6s ease-in-out 0.6s infinite;
    -ms-animation: fade 1.6s ease-in-out 0.6s infinite;
} 
.n {
    bottom: 40%;
    left: 50%;
    -webkit-animation: fade 1.6s ease-in-out 0.9s infinite;
    -moz-animation: fade 1.6s ease-in-out 0.9s infinite;
    -ms-animation: fade 1.6s ease-in-out 0.9s infinite;
}
.o {
    left: 110%;
    bottom: 52%;
    -webkit-animation: fade 1.6s ease-in-out 0.7s infinite;
    -moz-animation: fade 1.6s ease-in-out 0.7s infinite;
    -ms-animation: fade 1.6s ease-in-out 0.7s infinite;
}
.p {
    bottom: 78%;
    -webkit-animation: fade 1.6s ease-in-out 0.8s infinite;
    -moz-animation: fade 1.6s ease-in-out 0.8s infinite;
    -ms-animation: fade 1.6s ease-in-out 0.8s infinite;
} 
.b, .o {
    -webkit-transform: rotate(67.5deg);
    -moz-transform: rotate(67.5deg);
    -ms-transform: rotate(67.5deg);
    -o-transform: rotate(67.5deg);
}
.d, .m {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.f, .k {
    -webkit-transform: rotate(22.5deg);
    -moz-transform: rotate(22.5deg);
    -ms-transform: rotate(22.5deg);
    -o-transform: rotate(22.5deg);
 
}
.n, .c {
    -webkit-transform: rotate(-67.5deg);
    -moz-transform: rotate(-67.5deg);
    -ms-transform: rotate(-67.5deg);
    -o-transform: rotate(-67.5deg);} 
.l, .e {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
} 
.j, .g {
    -webkit-transform: rotate(-22.5deg);
    -moz-transform: rotate(-22.5deg);
    -ms-transform: rotate(-22.5deg);
    -o-transform: rotate(-22.5deg);
}

0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
26 juin 2013 à 15:07
je n'arrive pas à mettre de lien mega sur ce site
cà veut dire quoi?
la feuille de style chargement sert à quoi?
0
simonbarreau Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 26 juin 2013
26 juin 2013 à 15:14
Je voulais héberger ma source sur le site mega et te le donner. Mais on m'interdit de mettre des liens mega :)
La feuille de style chargement permet une animation de chargement du style "vidéo youtube", avec le rond qui tourne. Je ne voulais pas mettre de gif animé. Je essayé mon projet sans chargement.css mais cela ne fonctionne pas non plus, c'est la raison pour laquelle je ne te l'avais pas directement donnée.
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
26 juin 2013 à 15:16
j'ai mis ton site ici http://creuselimousin.free.fr/simonbarreau/
les feuilles de style fonctionnent
0
simonbarreau Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 26 juin 2013
26 juin 2013 à 15:18
Haa super !! Cela voudrait dire que ça vient du serveur html de ma caméra qui fait défaut. Merci beaucoup !! C'est vraiment super sympa :)
0
ideal23 Messages postés 456 Date d'inscription mercredi 30 avril 2008 Statut Membre Dernière intervention 16 mai 2014 28
26 juin 2013 à 15:21
pas de quoi, bonne réussite pour ton site.
0