28172 sujets

CSS et mise en forme, CSS3

[Résolu] Commentaires conditionnels : pas pris en compte sous IE

Bonjour, ou rebonjour pour certains Smiley rolleyes ^^

j'ai un problème concernant des commentaires conditionnels.
En fait j'ai mis en place une animation javascript qui permet d'avoir un bandeau d'infos en défilement vertical.
Jusque là tout va bien ^^.

Après j'ai donc à l'aide d'une DIV et puis du CSS, placé tout cela dans le cadre prévu pour la news.

Génial tout fonctionne bien sous MFF, mais en regardant sous IE, biensûr celan n'est pas tout à fait placé comme il se doit.

J'ai en gros un décalage d'environ 25px vers la droite sous IE par rapport à MFF.

Donc je me dis que je vais mettre en place une feuille de style spéciale pour les problèmes sous IE et l'appeller grâce aux commentaires conditionnels, mais malheureusement la feuille de style appelé grâce à ces derniers ne veut pas s'appliquer.

Ais-je fait une faute lors de son appel ?
J'ai bien vérifié le lien vers le CSS qui est bon.

La news est intégrée par javascript dans la DIV actu_accueil

Voila donc le code en question :


index.php

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        
        <title>*******</title>
        
		<!--[if IE]>
			<link type="text/css" rel="stylesheet" href="styles/ie_style.css" />
		<![endif]-->
		
        <link rel="shortcut icon" href="images/favicon/favicon.ico" />
        <link href="styles/styles.css" type="text/css" rel="stylesheet" />
        <link href="styles/menu.css" type="text/css" rel="stylesheet" />
		
		
		

    </head>
    
    <script language="javascript">
		var bodycolor_list = new Array ( "#3F3F3F",  "#B1C800" );
		var bodycolor_index = Math.floor (Math.random() * bodycolor_list.length);
		var bodycolor = bodycolor_list[bodycolor_index];
		document.write ("<body bgcolor=" + bodycolor + " oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>");
	</script>
    
    	<div id="div_generale">
                
			<?php
				include 'header.php';
				include 'menu.php';
				include 'contenu_index.php';
				include 'footer.php';
				include 'validation.php';
			?>
                
		</div>
    </body>
</html>


contenu_index.php

<div id="div_contenu_index">
	
	<script language="javascript" type="text/javascript" src="scripts/add_load.js"></script>
	<script language="javascript" type="text/javascript" src="scripts/imageslide_accueil.js"></script>
	<script language="javascript" type="text/javascript" src="scripts/slide.js"></script>
	
	
	<div id="info_accueil">
		<div class="titre">
		</div>
		<div id="contenu_accueil">
		</div>
	</div>
	
	<div id="actu_accueil">
		<script language="javascript" type="text/javascript" src="scripts/news.js"></script>
	</div>
</div>


styles.css

@charset "iso-8859-1";
/* CSS Document */


#actu_accueil
{
	width:270px;
	height:145px;
	margin-top:141px;
	margin-left:505px;
}


ie_style.css

@charset "iso-8859-1";
/* CSS Document */


#actu_accueil
{
	width:270px;
	height:145px;
	margin-top:141px;
	margin-left:480px;
}



Merci d'avance.

Arnaud S.
Modifié par bibi-arnaud (25 Oct 2008 - 15:04)
rebonjour,

ton code est un peu dur à tester et une page en ligne n'aurait pas été du luxe Smiley smile . D'autant qu'avec un décallage de 25px, ce serait intéressant de voir tout le code CSS.

Quoi qu'il en soit ton commentaire conditionnel ne peut fonctionner que s'il est placé après les autres styles puisque IE ou non il sera écrasé Smiley langue .

D'autre part c'est une très mauvaise idée de générer la balise <body> en Javascript (que se passe-t-il si celui-ci est désactivé ?). D'ailleurs bgcolor est obsolète : tu pourrais garder le choix aléatoire et rajouter un style="background-color:xxxxxx".

A+


Edit: ça pourrait donner quelque chose comme
<?php
$bodycolor_list = array( "#3F3F3F",  "#B1C800" );
?>
<body style="background-color:<?php echo $bodycolor_list[rand(0, count($bodycolor_list)-1 )]; ?>">

Modifié par Heyoan (26 Jun 2008 - 18:42)
Heyoan a écrit :
rebonjour,

ton code est un peu dur à tester et une page en ligne n'aurait pas été du luxe Smiley smile . D'autant qu'avec un décallage de 25px, ce serait intéressant de voir tout le code CSS.

Quoi qu'il en soit ton commentaire conditionnel ne peut fonctionner que s'il est placé après les autres styles puisque IE ou non il sera écrasé Smiley langue .

D'autre part c'est une très mauvaise idée de générer la balise <body> en Javascript (que se passe-t-il si celui-ci est désactivé ?). D'ailleurs bgcolor est obsolète : tu pourrais garder le choix aléatoire et rajouter un style="background-color:xxxxxx".

A+


Edit: ça pourrait donner quelque chose comme
<?php
$bodycolor_list = array( "#3F3F3F",  "#B1C800" );
?>
<body style="background-color:<?php echo $bodycolor_list[rand(0, count($bodycolor_list)-1 )]; ?>">



Bonjour bonjour,

pour la page en ligne, on peut voir un exemple en se rendant à l'adresse suivante : ***** et ça se trouve directement sur la page d'accueil.

en ce qui concerne tout le code CSS le voici

styles.css

@charset "iso-8859-1";
/* CSS Document */


body
{
	/*background-image:url(../images/banniere_et_fond/rampe.jpg);
	background-attachment:fixed;*/
	/*background-color:#3E3E40;*/
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	margin:0;
}

#div_generale
{
	width:800px;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	position:relative;
}

img
{
	border-width:0px;
}

.texte
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px
}

.titre_partie
{
	font-size:18px;
}

.imageslide
{
	width:680px;
	margin-top:304px;
	margin-left:58px;
}

.titre
{
	font-size:16px;
	color:#3E3E40;
	text-align:left;
}

#mdp
{
	font-size:12px;
	color:#FF0000;
	font-style:italic;
}

#listing
{
	width:800px;
	background-color:#FFFFFF;
}
/**************************************************HEADER*********************************************************************/

#div_header
{
	width:800px;
	height:125px;
	background-color:#3E3E40;
	background-image:url(../images/banniere_et_fond/header/header.png);
	margin-top:-9px;
}

#promo2
{
	margin-top:15px;
	margin-left:265px;
}

a.header:visited
{
	color:#4D4D4D;
}

a.header:active
{
	color:#4D4D4D;
}

a.header:hover
{
	color:#4D4D4D;
}

a.header
{
	text-decoration:none;
}
/*****************************************************************************************************************************/



/*************************************************MENU************************************************************************/
#div_menu
{
	width:800px;
	height:42px;
	margin-top:0px;
	text-align:left;
}
/*****************************************************************************************************************************/


/********************************************************PARTIE INDEX********************************************************/
.ejs_scroll 
{
	font-size:12px;
	font-family:Verdana;
	color:#000000;
	text-decoration:none;
}

#div_contenu_index
{
	width:800px;
	height:585px;
	margin-top:-7px;
	text-align:center;
	padding-top:15px;
	background-image:url(../images/banniere_et_fond/index/index.jpg);
	background-color:#FFF;
	/*position:absolute;*/
}

#info_accueil
{
	width:425px;
	height:225px;
	margin-top:70px;
	margin-left:20px;
	float:left;
}

#actu_accueil
{
	width:270px;
	height:145px;
	margin-top:141px;
	margin-left:505px;
}

#contenu_accueil
{
	text-align:left;
	font-size:12px;
	color:#3E3E40;
	margin-top:10px;
}

#reference_accueil
{
	font-size:10px;
}

#promo
{
	width:750px;
	height:250px;
	margin-left:25px;
}

#encart_promo
{
	width:350px;
	height:250px;
	font-size:24px;
	background-color:#33FF00;
	float:left;
}

/*****************************************************************************************************************************/


/********************************************************PARTIE DESIGN***************************************************/

#div_contenu_design
{
	width:800px;
	height:585px;
	margin-top:-7px;
	text-align:center;
	padding-top:15px;
	background-image:url(../images/banniere_et_fond/design/design.jpg);
	background-color:#FFF;
}

/*****************************************************************************************************************************/


/********************************************************PARTIE MARQUAGE***************************************************/

#div_contenu_marquage
{
	width:800px;
	height:585px;
	margin-top:-7px;
	text-align:center;
	padding-top:15px;
	background-image:url(../images/banniere_et_fond/marquage/marquage.jpg);
	background-color:#FFF;
}

/*****************************************************************************************************************************/


/********************************************************PARTIE TEXTILE***************************************************/

#div_contenu_textile
{
	width:800px;
	height:585px;
	margin-top:-7px;
	text-align:center;
	padding-top:15px;
	background-image:url(../images/banniere_et_fond/textile/textile.jpg);
	background-color:#FFF;
}

/*****************************************************************************************************************************/


/********************************************************PARTIE PUB***************************************************/

#div_contenu_pub
{
	width:800px;
	height:585px;
	margin-top:-7px;
	text-align:center;
	padding-top:15px;
	background-image:url(../images/banniere_et_fond/pub/pub.jpg);
	background-color:#FFF;
}

/*****************************************************************************************************************************/


/********************************************************PARTIE CLIENT********************************************************/


#div_contenu_client
{
	width:800px;
	background-color:#FFF;
	margin-top:-7px;
	font-size:14px;
	text-align:center;
	padding-top:15px;
	padding-bottom:15px;
}

#table_login_client
{
	text-align:center;
}

.ligne_espace
{
	height:10px;
}

.kit_connexion
{
	width: 300px;
	margin-right:auto;
	margin-left:auto;
}

.oublie_pass
{
	width: 500px;
	margin-right:auto;
	margin-left:auto;
}

.legend
{
	font-style:italic;
	font-size:14px;
}
/*****************************************************************************************************************************/


/********************************************************PARTIE CONTACT*****************************************************/

#div_contenu_contact
{
	width:800px;
	background-color:#FFF;
	margin-top:-7px;
	font-size:14px;
	text-align:center;
	padding-top:25px;
	padding-bottom:25px;
}

.legal_contact
{
	width:550px;
	font-size:11px;
	font-style:italic;
}

/*****************************************************************************************************************************/


/********************************************************PARTIE ADMIN********************************************************/


#div_contenu_admin2
{
	width:800px;
	background-color:#FFF;
	margin-top:-7px;
	font-size:14px;
	text-align:center;
	padding-top:15px;
	padding-bottom:25px;
}

#table_login_client
{
	text-align:center;
}

#div_liste_client
{
	font-size:10px;
	background-color:#FFF;
	margin-top:-7px;
	padding-top:15px;
	padding-bottom:15px;
}

#tableau_liste_client
{
	width:800px;
}

#creer_client
{
	margin-right:auto;
	margin-left:auto;
	height:300px;
	width:400px;
}

#contenu_admin_client
{
	width:800px;
	background-color:#FFF;
	margin-top:-7px;
	padding-top:15px;
	padding-bottom:15px;
}

.upload_bat
{
	background-color:#FFF;
	text-align:center;
	margin-top:-7px;
	padding-top:25px;
	padding-bottom:25px;
}

.menu_client_admin
{
	text-align:center;
	text-decoration:none;
	color:#00F;
}

.titre_tableau
{
	font-weight:bold;
	background-color:#B1C800;
	text-align:center;
}

.ligne_espace
{
	height:10px;
}

.commentaire
{
	font-size:14px;
}

.refus
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

.creer_client
{
	margin-top:250px;
	background-color:#FFF;
	text-align:center;
	margin-top:-7px;
	padding-top:50px;
	padding-bottom:50px;
	font-weight:bold;
}

a.lien_admin
{
	text-decoration:none;
}

a.lien_admin:hover
{
	color:#FF0000;
}

a.lien_admin:active
{
	color:#0000FF;
}

a.lien_admin:visited
{
	color:#0000FF;
}
/*****************************************************************************************************************************/


/**************************************************FOOTER*********************************************************************/
#div_footer
{
	width:800px;
	text-align:center;
	background-color:#3E3E40;
	height:20px;
	font-size:12px;
	color:#FFF;
}

.lien_footer
{
	color:#FFF;
	text-decoration:none;
}
/*****************************************************************************************************************************/


/**************************************************VALIDATION*****************************************************************/
#div_validation
{
	width:800px;
	text-align:center;
	margin-top:15px;
}
/*****************************************************************************************************************************/


/**************************************************CGV************************************************************************/
#div_contenu_cgv
{
	width:760px;
	text-align:justify;
	margin-top:-7px;
	padding-top:15px;
	padding-bottom:15px;
	background-color:#FFF;
	padding-left:20px;
	padding-right:20px;
}
/*****************************************************************************************************************************/



ie_style.css

@charset "iso-8859-1";
/* CSS Document */


#actu_accueil
{
	width:270px;
	height:145px;
	margin-top:141px;
	margin-left:480px;
}



menu.css

@charset "utf-8";
/* CSS Document */

#menu{
	width:800px;
	margin-left:0px;
	position:absolute;
	z-index:1;
	height:35px;
} 
.menu2 {
	padding:0 0 0 24px; 
	margin:0; 
	list-style:none; 
	height:35px; 
	background:#fff url(../images/menu/bouton1v4.png) repeat-x; 
	position:relative; 
	z-index:500; 
	font-family:arial, verdana, sans-serif;
}

.menu2 li.top {
	display:block; 
	float:left; 
	position:relative;
}

.menu2 li a.top_link {
	display:block; 
	float:left; 
	height:40px; 
	line-height:37px; 
	color:#3E3E40; 
	text-decoration:none; 
	font-size:11px; 
	font-weight:bold; 
	padding:0 0 0 17px; 
	cursor:pointer;
}

.menu2 li a.top_link span {
	float:left; 
	display:block; 
	padding:0 24px 0 12px; 
	height:40px;
}

.menu2 li a.top_link span.down {
	float:left; 
	display:block; 
	padding:0 24px 0 12px; 
	height:40px; 
	background:url(../images/menu/down.gif) no-repeat right top;
}

.menu2 li a.top_link:hover {
	color:#fff; 
	background: url(../images/menu/button5.gif) no-repeat;
}

.menu2 li a.top_link:hover span {
	background:url(../images/menu/button5.gif) no-repeat right top;
}

.menu2 li a.top_link:hover span.down {
	background:url(../images/menu/button5a.gif) no-repeat right top;
}

.menu2 li:hover > a.top_link {
	color:#fff; 
	background: url(../images/menu/button5.gif) no-repeat;
}

.menu2 li:hover > a.top_link span {
	background:url(../images/menu/button5.gif) no-repeat right top;
}

.menu2 li:hover > a.top_link span.down {
	background:url(../images/menu/button5a.gif) no-repeat right top;
}


.menu2 table {
	border-collapse:collapse; 
	width:0; 
	height:0; 
	position:absolute; 
	top:0; 
	left:0;
}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {
	visibility:visible;
}

.menu2 li:hover {
	position:relative; 
	z-index:200;
}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul, 
.menu2 :hover ul ul, 
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {
	position:absolute; 
	left:-9999px; 
	top:-9999px; 
	width:0; 
	height:0; 
	margin:0; 
	padding:0; 
	list-style:none;
}

.menu2 :hover ul.sub {
	left:2px; 
	top:40px; 
	background: #fff; 
	padding:3px 0; 
	border:1px solid #9CF70E; 
	white-space:nowrap; 
	width:130px; 
	height:auto;
}

.menu2 :hover ul.sub li {
	display:block; 
	height:20px; 
	position:relative; 

	float:left; 
	width:90px;
}

.menu2 :hover ul.sub li a {
	display:block; 
	font-size:11px; 
	height:20px; 
	width:124px; 
	line-height:20px; 
	text-indent:5px; 
	color:#000;
	text-decoration:none; 
	border:3px solid #fff; 
	border-width:0 0 0 3px;
}

.menu2 :hover ul.sub li a.fly {
	background:#fff url(../images/menu/arrow.gif) 120px 7px no-repeat;
}

.menu2 :hover ul.sub li a:hover {
	background:#BEBEBD; 
	color:#fff;
}
.menu2 :hover ul.sub li a.fly:hover {
	background:#BEBEBD 80px 7px no-repeat; 
	color:#fff;
}
.menu2 :hover ul li:hover > a.fly {
	background:#BEBEBD 80px 7px no-repeat; 
	color:#fff;
} 

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul{
	left:100px; 
	top:-4px; 
	background: #fff; 
	padding:3px 0; 
	border:1px solid #9CF70E;
	width:130px; 
	z-index:200; 
	height:auto;
}



Pour ce qui est du commentaire conditionnel, j'avais d'abord essayé de le mettre après mais comme ça marchait pas je l'ai mis avant mais je prend note de ta remarque et le remet donc après la déclaration des autres CSS.

Pour le body, c'est vrai que je n'avais pas pensé à cette théorie du 'qu'est ce qui se passerai si le javascript était désactivé?' et pourtant j'aurais dù, ça devrait être un reflexe. En tout cas ta remarque va m'aider a acquérir ces réflexes là Smiley smile .
Donc si j'ai bien compris je déclare mon body normalement et en fait je fais un javascript qui va influer et donc changer dynamiquement le style="background-color:xxxxxx" directement dans la balise body, comme ça si le javascript est désactivé, c'est juste le style qui ne fonctionnera pas.


J'espère t'avoir donné tous les éléments dont tu avais besoin. Si il en faut d'autre il suffit juste de me le dire.

En tout cas déjà merci pour ta réponse. Smiley cligne Smiley smile
Modifié par bibi-arnaud (25 Oct 2008 - 15:05)
Finalement il a quand même pris en compte les commentaires conditionnels.
Ce matin en regardant de nouveau tout était nickel.

Je pense à une histoire de cache, mais pourtant hier je ne faisais que de le vider et d'actualiser et ça ne fonctionnait pas.

Enfin, le plus important c'est que cela fonctionne, et au bout du compte mieux vaut ne pas chercher à trop comprendre par moment.

En tout cas merci Heyoan.
Sujet clos
Aller à