PHPfrance

la communauté d'entraide francophone dédiée au PHP

Problème CSS sous Chrome

3 messages   •   Page 1 sur 1
   Outils de sujet
Jrm
Petit nouveau ! | 9 Messages

20 juin 2013, 02:38

Bonjour à tous,

Je travaille en ce moment sur un thème, en local, où je bloque sur un petit problème.

En effet, pas de bugs sous Firefox, par contre, en faisant un test, je viens de m'apercevoir qu'une partie de mon CSS ne s'affichait pas sous Chrome, Safari etc. Je précise, uniquement en local.

Voici ci-dessous un exemple illustrant mon problème :

Sous Firefox :
Image

Sous Chrome :
Image

Mon code source sous Chrome : 
<!DOCTYPE html>
<html lang="fr-FR" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8" />
<title>Nomdemonsite | Un site utilisant WordPress</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://localhost/wordpress/Nomdemonsite/wp-content/themes/nomdutheme/style.css" />
<link rel="pingback" href="http://localhost/wordpress/Nomdemonsite/xmlrpc.php" />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/>
 
<!--[if lt IE 9]>
<script src="http://localhost/wordpress/Nomdemonsite/wp-content/themes/nomdutheme/js/html5.js"></script>
<script src="http://localhost/wordpress/Nomdemonsite/wp-content/themes/nomdutheme/js/selectivizr-min.js"></script>
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="http://localhost/wordpress/Nomdemonsite/wp-content/themes/nomdutheme/css/ie9.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" media="all" href="http://localhost/wordpress/Nomdemonsite/wp-content/themes/nomdutheme/css/ie8.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="http://localhost/wordpress/Nomdemonsite/wp-content/themes/nomdutheme/css/ie7.css" />
<![endif]-->
<script type='text/javascript'>
	/* <![CDATA[ */
	var tievar = {'go_to' : 'Aller vers…'};
	/* ]]> */
</script>

<link rel="alternate" type="application/rss+xml" title="CinépouvanteV2 &raquo; Flux" href="http://localhost/wordpress/Nomdemonsite/?feed=rss2" />
<link rel="alternate" type="application/rss+xml" title="CinépouvanteV2 &raquo; Flux des commentaires" href="http://localhost/wordpress/Nomdemonsite/?feed=comments-rss2" />
<link rel='stylesheet' id='zilla-likes-css'  href='http://localhost/wordpress/Nomdemonsite/wp-content/plugins/nomdemonplugin/styles/nomdemonplugin.css?ver=3.5.1' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost/wordpress/Nomdemonsite/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var zilla = {"ajaxurl":"http:\/\/localhost\/wordpress\/Nomdemonsite\/wp-admin\/admin-ajax.php"};
var zilla_likes = {"ajaxurl":"http:\/\/localhost\/wordpress\/Nomdemonsite/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://localhost/wordpress/Nomdemonsite/wp-content/plugins/zilla-likes/scripts/nomdemonplugin.js?ver=3.5.1'></script>
<script type='text/javascript' src='http://localhost/wordpress/Nomdemonsite/wp-content/themes/nomdemontheme/js/tie-scripts.js?ver=3.5.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/Nomdemonsite/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/Nomdemonsite/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 3.5.1" />
<link rel="shortcut icon" href="http://localhost/wordpress/Nomdemonsite/wp-content/themes/nomdemontheme/favicon.ico" title="Favicon" />	
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

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


</style> 


</head>
<body id="top" class="home blog">
	<div class="background-cover"></div>
	<div class="wrapper">
		<header>
			
		<div class="header-content">
			
			<div class="logo">
			<h1>								<a title="Nomdemonsite" href="http://localhost/wordpress/Nomdemonsite/">
					<img src="http://localhost/wordpress/Nomdemonsite/wp-content/themes/nomdemontheme/images/logo.png" alt="Nomdemonsite" /><strong>Nomdemonsite Un site utilisant WordPress</strong>
				</a>
			</h1>			</div><!-- .logo /-->
			        <div class="search-block">
						<form method="get" id="searchform" action="http://localhost/wordpress/Nomdemonsite/">
							<input class="search-button" type="submit" value="Recherche" />	
							<input type="text" id="s" name="s" value="Recherchez un film ou autre chose" onfocus="if (this.value == 'Recherchez un film ou autre chose') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Recherchez un film ou autre chose';}"  />
						</form>
						<div class="search-current">
					        <p>	
					    	    Ex. :
					    	    <a href="#">Evil Dead</a>,
					    	    
					    	    <a href="#">The Walkind Dead</a>,
					    	    
					    	    <a href="#">Gaumont</a>...
					    	    
					        </p>
					    </div><!-- .search-current /-->
					</div><!-- .search-block /-->
						<div class="clear"></div>
		</div>
	
		</header><!-- #header /-->
	
						<nav id="main-nav">
				<div class="menu-alert">Vous pouvez utiliser WP menu builder pour créer les menus</div>							</nav><!-- .main-nav /-->

			
	<div class="breaking-news">
		<span>[ live ]</span>
				
					<ul>
							<li><a href="http://localhost/wordpress/Nomdemonsite/?p=1" title="Bonjour tout le monde&nbsp;!">Bonjour tout le monde&nbsp;!</a></li>
						</ul>
					
						<script type="text/javascript">
			jQuery(document).ready(function(){
								jQuery('.breaking-news ul').innerfade({animationtype: 'fade', speed: 2645 , timeout: 2645});
							});
		</script>
	</div> <!-- .breaking-news -->
	
		
	
	<div id="main-content" class="container sidebar-left">


	

	<div class="flexslider" id="flexslider">
		<ul class="slides">
			
			<li>
								<img src="http://localhost/wordpress/Nomdemonsite/wp-content/uploads/2013/06/Evil-Dead-Poster1-995x498.jpg" alt="" />
												<div class="slider-caption">
					<h2>Evil Dead</h2>					<p>Evil Dead</p>				</div>
							</li>
				
			<li>
								 <img src="http://localhost/wordpress/Nomdemonsite/wp-content/uploads/2013/06/Evil-Dead-Poster2-995x498.jpg" alt="" />
												<div class="slider-caption">
					<h2>Evil Dead</h2>					<p>Evil Dead</p>				</div>
							</li>
							</ul>
	</div>

<script>
jQuery(window).load(function() {
  jQuery('#flexslider').flexslider({
    animation: "fade",	slideshowSpeed: 1613,
	animationSpeed: 1613,
	randomize: false,
	pauseOnHover: true,
	start: function(slider) {
       		var slide_control_width = 100/2;
    		jQuery('.flex-control-nav li').css('width', slide_control_width+'%');
      	}
  });
});
</script>

	
<div class="content">
	
	
					<section class="cat-box column2 ">
			<div class="cat-box-title">
				<h2><a href="http://localhost/wordpress/Nomdemonsite/?cat=1">Non classé</a></h2>
				<div class="stripe-line"></div>
			</div><!-- post-thumbnail /-->
			<div class="cat-box-content">
			
								<ul>
													<li class="first-news">
						<div class="inner-content">
											
						<h2><a href="http://localhost/wordpress/Nomdemonsite/?p=1" title="Permaliens vers Bonjour tout le monde&nbsp;!" rel="bookmark">Bonjour tout le monde&nbsp;!</a></h2>
					
							<div class="entry">
								Bienvenue dans WordPress. Ceci est votre premier article. Modifiez-le ou supprimez-le, puis lancez-vous&nbsp;!								<a class="more-link" href="http://localhost/wordpress/Nomdemonsite/?p=1">Lire la suite &raquo;</a>
							</div>
						<p class="post-meta">
														<span>18 juin 2013</span>							<a href="#" class="nomdemonplugin active" id="nomdemonplugin-1" title="Je l'ai vu"><span class="nomdemonplugin-count">0</span> <span class="nomdemonplugin-postfix"></span></a>							<a href="http://localhost/wordpress/Nomdemonsite/?p=1#comments" title="Commentaire sur Bonjour tout le monde&nbsp;!">1 commentaire</a>						</p>
						</div>
					</li><!-- .first-news -->
													</ul>

							</div><!-- .cat-box-content /-->
		</section> <!-- Two Columns -->
		
		
		
	

					<section class="cat-box column2 last-column">
			<div class="cat-box-title">
				<h2><a href="http://localhost/wordpress/Nomdemonsite/?cat=1">Non classé</a></h2>
				<div class="stripe-line"></div>
			</div><!-- post-thumbnail /-->
			<div class="cat-box-content">
			
								<ul>
													<li class="first-news">
						<div class="inner-content">
											
						<h2><a href="http://localhost/wordpress/Nomdemonsite/?p=1" title="Permaliens vers Bonjour tout le monde&nbsp;!" rel="bookmark">Bonjour tout le monde&nbsp;!</a></h2>
					
							<div class="entry">
								Bienvenue dans WordPress. Ceci est votre premier article. Modifiez-le ou supprimez-le, puis lancez-vous&nbsp;!								<a class="more-link" href="http://localhost/wordpress/Nomdemonsite/?p=1">Lire la suite &raquo;</a>
							</div>
						<p class="post-meta">
														<span>18 juin 2013</span>							<a href="#" class="nomdemonplugin active" id="nomdemonplugin-1" title="Je l'ai vu"><span class="nomdemonplugin-count">0</span> <span class="nomdemonplugin-postfix"></span></a>							<a href="http://localhost/wordpress/Nomdemonsite/?p=1#comments" title="Commentaire sur Bonjour tout le monde&nbsp;!">1 commentaire</a>						</p>
						</div>
					</li><!-- .first-news -->
													</ul>

							</div><!-- .cat-box-content /-->
		</section> <!-- Two Columns -->
		
		
		
	
</div><!-- .content /-->

<aside id="sidebar">
</aside>		<div class="clear"></div>
	</div><!-- .container /-->
	
	
	<footer>
	<div id="footer-widget-area" class="footer-3c">

	
	

	
		
	</div><!-- #footer-widget-area -->
	<div class="clear"></div>
</footer><!-- .Footer /-->
				
	<div class="clear"></div>
	<div class="footer-bottom">
		<div class="container">
			<div class="alignright">
							</div>
						
			<div class="alignleft">
							</div>
		</div><!-- .Container -->
	</div><!-- .Footer bottom -->
	
</div><!-- .Wrapper -->
</body>
</html>
Sachant qu'il y a avait un léger problème du côté de l'URL sous Chrome, j'ai réparé cette erreur, mais finalement, toujours le même problème qui persiste.

Du côté de jQuery, c'est à dire du côté des fonctions, pas de problème, ça fonctionne bien.

Si une personne pouvait donc m'expliquer qu'est-ce qui bloque.

NB : j'utilise Wordpress, et XAMPP comme serveur local.

Merci à vous.
Mammouth du PHP | 1967 Messages

20 juin 2013, 10:51

vérifie que tu n'utilise pas de propriété propre à firefox (commençant par --moz d'habitude)

sinon, si le problème vient du css, il va nous falloir le voir
Spols
pour les fan de rubik's cube ou pour les curieux ==> le portail francophone du rubik's cube
Jrm
Petit nouveau ! | 9 Messages

20 juin 2013, 18:38

Salut,

D'abord, merci pour ta réponse.
En fait, je me rends compte qu'il y a dans mon CSS une ligne nommée "*::-moz-selection" qui domine toutes les autres. (Seulement sous Firefox) Sauf quand retirant celle-ci, aucune conséquence sur mes éléments. Donc, ça ne vient certainement pas de cette ligne.
Ensuite, j'ai regardé les lignes concernées (ma ligne concernant le "scroll" ainsi que d'autres lignes comme "slides-cation" etc.), j'ai bien une propriété du genre "-moz", "-webkit" "-ms", mais rien d'anormal dans le code.

Pour le CSS, je te mets uniquement la ligne concernée (celle concernant mon scroll), car mon code est bien trop long. Et le forum ne supporte pas autant de lignes. ;-)

Voici le CSS :
#topcontrol{
	z-index:2;
	background: #FF8500 url(images/separate.png) no-repeat center -410px;
	width: 30px;
	height: 30px;
	text-indent: -99999px;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	position:fixed;
	bottom:-100px;
	right:10px;
	cursor:pointer;
	-webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
    overflow:auto;
}
	#topcontrol:hover{ background-color:#fb9826 ;}
   Répondre
3 messages   •   Page 1 sur 1
   Outils de sujet