[résolu] Interpretation différente firefox3.0 / firefox 3.5?

Question

xephres

8 Oct 2009 à 17:25

Bonjour à tous,

Pour une barre de navigation, j'utilise un menu déroulant utilisant les balises dl/dt/dd/ul/li...

J'ai trouvé comment écrire la css pour l'adapter aux différentes navigateurs, seulement, je me heurte à un problème inattendu : l'affichage sous firefox 2/3 et firefox 3.5 est différent.

J'ai du repositionner des éléments pour avoir le même affichage. Est-ce que quelqu'un à déjà eu le même problème.

Le code css ajouté pour avoir le bon affichage sous firefox 2.0/3.0


#planisphere, dl  {
	margin-top : -49px ;
}

#planisphere {
	margin-right : 104px;
}

le code html impacté :


<div class="nav_centre">
<span id="accueil"><img src="xephres_v4_picto_home_dark.png" alt="Accueil" /></span><span class="nav">Accueil</span>
<span id="actualites"><img src="xephres_v4_picto_actus_dark.png" alt="actualités" /></span><span class="nav">Actualités</span>
<span id="blogs"><img src="xephres_v4_picto_blogs_dark.png" alt="blogs" /></span><span class="nav">Blogs</span>
<span id="membres"><img src="xephres_v4_picto_member_dark.png" alt="membres" /></span><span class="nav">Membres</span>
<span id="login"><img src="xephres_v4_picto_login_dark.png" alt="login" /></span><span class="nav">Connexion</span>

<dl onmouseover="javascript:makeVisible('menu1');" onmouseout="javascript:makeInvisible('menu1');">
	<dt>
		<a href="fr-graphisme">Graphisme</a>
	</dt>
	<dd id="menu1">
		<ul>
			<li>
				<a href="">Créations 2D</a>
				<a href="">Créations 3D</a>
				<a href="">W.I.P.</a>
				<a href="">Créations 2D</a>
				<a href="">Créations 3D</a>
				<a href="http://www.xephres.com">W.I.P.</a>
			</li>
		</ul>
	</dd>
</dl>

<span id="planisphere"><img src="Planisphere_picto_dark.png" alt="recherche" /></span>

Si quelqu'un connait la solution... Y-a-t-il une alternative équivalente aux commentaires conditionnels pour IE?
Modifié par xephres (09 Oct 2009 - 12:08)

Mikachu

8 Oct 2009 à 18:20

Salut,

Le congrès des boules de cristal se tient quasiment en même temps que Paris web, du coup je doute que quelqu'un puisse y lire d'où vient le problème, avec le peu d'informations que tu donnes. Idéalement une page en ligne, où au minimum l'intégralité du code html et css, et éventuellement des captures d'écrans aideraient grandement à pouvoir t'aider. Smiley cligne

xephres

8 Oct 2009 à 18:27

Au temps pour moi, en même temps, je cherchais plus une alternative aux commentaires conditonnels, d'où le peu de code et comme je n'ai rien en ligne....


/* css defaut firefox - 3.5 et IE 8*/

body {
	padding : 0;
	color : #ffffff ; /* couleur par defaut du texte*/
	background-color : #303030; /* couleur du fond si images désactivées */
	background-image : url('xephres_v5_fond_nebuleuse.jpg');
}

img  {
	display : block ;
}

#global_container {
	width : 1300px;
}

#full_body{
	width : 924px;
	margin : 0 auto; /* centrage du header */
}

#global_left {
	width : 188px;
	float : left;
}

#global_right {
	width : 188px;
	float : right;
}

#global_left_top {
	height : 640px;
	background-image : url('xephres_v5_gauche_nebuleuse.jpg');
}

#global_right_top {
	height : 640px;
	background-image : url('xephres_v5_droite_nebuleuse.jpg');
}

#global_left_middle {
	height : 128px;
	background-image : url('xephres_v5_gauche_nebuleuse_degrade.png');
}

#global_right_middle {
	height : 128px;
	background-image : url('xephres_v5_droite_nebuleuse_degrade.png');
}

#header {
	width : 924px;
	height : 240px;
	background-image : url('xephres_v5_centre_nebuleuse.jpg');
	background-repeat : no-repeat;
	background-position : top;
}

#nav_haute {
	width : 924px;
	height : 36px;
}

#title {
	width : 924px;
	height : 62px;
	margin : 50px 0; /*  positionnement verticale de l'image, marges d'espacement */
	background-image : url('titre.png');
	background-repeat : no-repeat;
}

#nav_basse {
	width : 924px;
	height : 36px;
}

.nav_gauche {
	float : left;
	width : 10px;
	height : 36px;
	background-image : url('nav_left.png');
	background-repeat : no-repeat;
}

.nav_centre {
	width : 904px;
	height : 36px;
	line-height : 36px;
	margin-left: 10px; /* repoussage à cause du float left dela nav gauche, sinon elles se superposent*/
	background-image : url('nav_main.png');
	background-repeat : repeat-x;
}

.nav_droite {
	float : right;
	width : 10px;
	height : 36px;
	background-image : url('nav_right.png');
	background-repeat : no-repeat;
}

span img {
	margin : 0 3px 0 0;
	display : inline; /* compense le display : block par defaut des images */
}

.nav {
	margin : 0 7px 0 0;
	vertical-align: 34%; /* positionnement vertical du texte */
}

#planisphere {
	float : right;
	width : 36px;
	height : 36px;
}

dl {
	float : right;
	margin-left : -36px;
	width : 140px;
	height : 36px;
	line-height : 36px;
	text-align: center;
}

ul, li {
	list-style-type : none;
}

li {
	position : relative;
}

dl a:hover {
	font-weight : bold;
	background-image : url('fond_block_content.png');
}

a {
	display : block ;
	color : #ffffff;
	text-decoration : none;
}

dd {
	display : none;
	background-image : url('fond_block_content.png');
}



.bloc_2_3 {
	width : 612px;
	float : left;
	background-image : url('fond_block_content.png');
}

.bloc_1_3 {
	width : 300px;
	float : right;
	background-image : url('fond_block_content.png');
}

#footer {
	clear: both; /* repousse le footer en bas du dernier contenu */
	width : 924px;
	height : 160px;
	margin : 0 auto; /* centre le footer */
	background-image : url('fond_block_content.png');
}

/* hacks - ajustements*/

/* hack firefox 2.0 et 3.0 */

#planisphere, dl  {
	margin-top : -49px ;
}

#planisphere {
	margin-right : 104px;
}

#main {
	overflow : hidden;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>nom de ma page</title>
		<meta name="description" content="Brève description de la page ici" />
		<meta name="keywords" content="mot clé; 1, autre mot clé;, blabla" />
		<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
		<script type="text/JavaScript" src="script_mises_en_page.js"></script>
	</head>
	<body>
		<div id="global_container">
			<div id="global_container_in">
				<div id="global_left">
					<div id="global_left_top">
					</div>
					<div id="global_left_middle">
					</div>
				</div>
				<div id="global_right">
					<div id="global_right_top">
					</div>
					<div id="global_right_middle">
					</div>
				</div>
				<div id="full_body">
					<div id="header">
						<div id="nav_haute">
							<div class="nav_gauche">
							</div>
							<div class="nav_droite">
							</div>
							<div class="nav_centre">
							<span id="rss"><img src="xephres_v4_picto_RSS_dark.png" alt="RSS" /></span><span class="nav">RSS</span>
							<span id="facebook"><img src="xephres_v4_picto_facebook_dark.png" alt="facebook" /></span><span class="nav">Facebook</span>
							<span id="twitter"><img src="xephres_v4_picto_twitter_dark.png" alt="twitter" /></span><span class="nav">Twitter</span>
							<span id="forum"><img src="xephres_v4_picto_forum_dark.png" alt="forum" /></span><span class="nav">Forum</span>
							<span id="chat"><img src="xephres_v4_picto_chat_dark.png" alt="chat" /></span><span class="nav">Chat</span>
							<span id="concours"><img src="xephres_v4_picto_concours_dark.png" alt="concours" /></span><span class="nav">Concours</span>
							<span id="rencontres"><img src="xephres_v4_picto_rencontres_dark.png" alt="rencontres" /></span><span class="nav">Rencontres</span>
							<span id="recherche"><img src="xephres_v4_picto_recherche_dark.png" alt="recherche" /></span><span class="nav"></span>
							</div>
						</div>
						<div id="title">
						</div>
						<div id="nav_basse">
							<div class="nav_gauche">
							</div>
							<div class="nav_droite">
							</div>
							<div class="nav_centre">
							<span id="accueil"><img src="xephres_v4_picto_home_dark.png" alt="Accueil" /></span><span class="nav">Accueil</span>
							<span id="actualites"><img src="xephres_v4_picto_actus_dark.png" alt="actualités" /></span><span class="nav">Actualités</span>
							<span id="blogs"><img src="xephres_v4_picto_blogs_dark.png" alt="blogs" /></span><span class="nav">Blogs</span>
							<span id="membres"><img src="xephres_v4_picto_member_dark.png" alt="membres" /></span><span class="nav">Membres</span>
							<span id="login"><img src="xephres_v4_picto_login_dark.png" alt="login" /></span><span class="nav">Connexion</span>

							<dl onmouseover="javascript:makeVisible('menu1');" onmouseout="javascript:makeInvisible('menu1');">
								<dt>
									<a href="fr-graphisme">Graphisme</a>
								</dt>
								<dd id="menu1">
									<ul>
										<li>
											<a href="">Créations 2D</a>
											<a href="">Créations 3D</a>
											<a href="">W.I.P.</a>
											<a href="">Créations 2D</a>
											<a href="">Créations 3D</a>
											<a href="http://www.xephres.com">W.I.P.</a>
										</li>
									</ul>
								</dd>
							</dl>
							
							<span id="planisphere"><img src="Planisphere_picto_dark.png" alt="recherche" /></span>
							
							</div>
						</div>
					</div>
					<div id="main">
						<div class="bloc_2_3">
						</div>
						<div class="bloc_1_3">
							bla blafgqswdfb gxwdsbngrb hsrthtrhstrhr sdfhbsrntrnh
							<br />
							<br />
						</div>
						<div class="bloc_2_3">
							bla bla
							<br />
							<br />
						</div>
					</div>
				</div>
				<div id="footer">
				</div>
			</div>
		</div>
	</body>
</html>

xephres

9 Oct 2009 à 10:00

Bonjour, bonjour,

Même si ça ne me plaît qu'à moitié, le problème est résolu/contourné avec une petite modification utilisant javascript (fonction à base de userAgent) et adaptant la CSS à firefox 3.0 (et versions antérieures). Pour IE, ça reste des commentaires conditionnels.

PS: Pour ceux qui vont demander si j'ai pensé à l'accessibilité, la réponse est oui ^_^, le site fonctionne sans js (sans gros souci esthétique Smiley smile

) et sans css (même si c'est moche :-p). Pour ce qui est d'une version en ligne, il suffira de suivre mon site (blog.xephres.com), un tutoriel devrait arriver d'ici quelques temps.

PS(2) : Le javascript (basic)


if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
 var ffversion=new Number(RegExp.$1) // capture x.x portion and store as a number
 if(ffversion != '3.5') {blabla...}else{bla...bla}

Modifié par xephres (09 Oct 2009 - 10:02)

Laurie-Anne

9 Oct 2009 à 10:48

Bonjour,

SI tu considère le problème comme étant [résolu], merci de l'indiquer dans le titre de ton sujet.

xephres

9 Oct 2009 à 12:08

ayé ^ ^

Sujet clos

CSS et mise en forme, CSS3

[résolu] Interpretation différente firefox3.0 / firefox 3.5?