28173 sujets

CSS et mise en forme, CSS3

Différence entre IE et mozilla de 1 pixel

Bonjour, je crée une fiche membre, j'ai d'abord crée un graphisme de fond, auquel je mets les données dessus, mais mon problème est qu'il y a une différence de 1 pixel entre mozilla et internet explorer, il m'est impossible de faire correspondre les 2.

Regarder plutot : http://img74.imageshack.us/img74/5285/probfiche1sb.jpg

En haut sur firefox, tout est impécable, en bas sous IE, il ya un décalage de 1px que je peux rattraper en mettant un margin-bottom:1px; mais dans ce cas celà ne va plus du tout sous mozilla.

J'ai dabord testé tout dans un div, puis pour essayer j'ai mis chaque infos dans un div, j'ai essayé les padding et margin rien n'y fait!!

voici le code : 

<div id="fiche2">
<?php // on vérifie que la variable existe et contient quelque chose [smile]
if (isset($pseudo) && !empty($pseudo))
{?>
<p><?php echo $pseudo;?></p><?php
}
else
{?>
<p>None</p>
<?php
}
?>
</div>
<div id="fiche3">
<?php // on vérifie que la variable existe et contient quelque chose [smile]
if (isset($pays) && !empty($pays))
{?>
<p><?php echo $pays;?></p><?php
}
else
{?>
<p>None</p>
<?php
}
?>
</div>
<div id="fiche4">
<?php // on vérifie que la variable existe et contient quelque chose [smile]
if (isset($ville) && !empty($ville))
{?>
<p><?php echo $ville;?></p><?php
}
else
{?>
<p>None</p>
<?php
}
?>
</div>
<div id="fiche5">
<?php // on vérifie que la variable existe et contient quelque chose [smile]
if (isset($date_naissance) && !empty($date_naissance))
{?>
<p><?php echo $date_naissance;?></p><?php
}
else
{?>
<p>None</p>
<?php
}
?>
</div>
<div id="fiche6">
<?php // on vérifie que la variable existe et contient quelque chose [smile]
if (isset($email) && !empty($email))
{?>
<p><?php echo $email;?></p> <?php
}
else
{?>
<p>None</p>


Et plus intéressant le CSS :


#fiche2 
{
        padding-left:160px;
        padding-top:3px;
        margin-bottom:1px;
}

#fiche3 
{
        padding-left:160px;
        margin-top:3px;
        margin-bottom:1px;
}

#fiche4 
{
        padding-left:160px;
        margin-top:3px;
        margin-bottom:1px;
}

#fiche5 
{
        padding-left:160px;
        margin-top:3px;
        marging-bottom:1px;
}

#fiche6 
{
        padding-left:160px;
        margin-top:3px;
        margin-bottom:1px;
}



Le plus simple serait peut etre, selon le navigateur internet, indiquer quel fichier CSS utilisait mais comment faire celà?? en javascript??
Modifié par eMeRiKa (13 May 2006 - 16:20)
Bonjour eMeRiKa,

Je répond à ta question concernant ta "solution" JavaScript.

A placer dans la balise <head> :


<script type="text/javascript">
if (navigator.appName == "Microsoft Internet Explorer")
{
document.write('<style type="text/css">@import "fichier_ie.css";</style>');
}
else
{
document.write('<style type="text/css">@import "fichier_fx.css";</style>');
}
</script>


En attendant une autre solution plus "classieuse".

Bonne journée. Romain
pas besoin de js uniquement css dans le head toujours

<!--[if IE]>
<style type="text/css">
#bloc{
margin: 0 0 1px 0;
}
</style>
<![endif]-->

tu remplaces #bloc par le nom de ton conteneur
Modifié par jp94 (13 May 2006 - 16:36)
Bonjour jp94,

En effet, il n'est pas plus mal de se passer du JavaScript (toujours le problème de l'utilisateur qui n'active pas cela sur son navigateur) ... D'où mon propos : "En attendant une solution plus "classieuse" !".

Romain
Sujet clos
Aller à