Problème de CSS sous Firefox et IE

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Problème de CSS sous Firefox et IE

limp15000

www.geneva-racing.ch

Bonjour,
Je suis en train de créer une application de gestion de client avec PHP/MySQL. J'ai un fichier CSS:

Code :

body {
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background: #f4f4f4 url(bg.gif) top center repeat-y;
}
#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 760px;
}
#header {
clear: both;
margin: 20px 0 0 0;
padding: 0;
height: 45px;
}
#header h1 {
width: 250px;
margin: 0 0 10px 0;
float: left;
}
#header p {
width: 500px;
float: right;
text-align: center;
color: #a0a0a0;
margin: 0 0 10px 0;
font-size: 0.8em;
line-height: 1.2em;
}
#frontphoto {
margin: 0 0 10px 0;
border: 0;
}
#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}
#avmenu ul {
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}
#avmenu li {
margin-bottom: 4px;
}
#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}
#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}
.menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
.menuhaut li {
display: inline;
}
.menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menuhaut a:hover {
text-decoration: none;
}
.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #505050;
background-color: #f4f4f4;
line-height: 1.3em;
}
.tableau1 {
height: 100px;
width:100%;
text-align:center;
}
#extras {
float: right;
width: 100px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
line-height: 1.5em;
}
#extras p {
margin: 0 0 1.5em 0;
}
#content {
margin: 0 110px 20px 160px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}
#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}
#content img {
padding: 1px;
display:inline;
background: #cccccc;
border: 4px solid #f0f0f0;
}
h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}
a {
text-decoration: none;
color: #286ea0;
}
z{
color:#e20032
}
a:hover {
text-decoration: underline;
color: #286ea0;
}
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 100px;
padding-right: 20px;
}
a img {
border: 0;
}
#footer {
clear: both;
margin: 0 auto;
padding: 10px 0 20px 0;
border-top: 4px solid #f0f0f0;
width: 760px;
text-align: center;
color: #808080;
font-size: 0.9em;
}
#footer a {
color: #808080;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
.left {
margin: 10px 10px 5px 0;
float: left;
}
.right {
margin: 10px 0 5px 10px;
float: right;
}
.textright {
text-align: right;
}
.center {
text-align: center;
}
.small {
font-size: 0.8em;
}
.bold {
font-weight: bold;
}
.hide {
display: none;
}

Par exemple sous Fx la présentation est ok:

Et sous IE il me mets un espace à la con!:

Si quelqu'un sait pourquoi ça fait ça...
Le code de la page:

Code :

<?
------------------------------------------------------
include('lib/connection.lib.php');
include('lib/erreur.lib.php');
$req = "SELECT * FROM representant ORDER BY repnom";
$result = Mysql_Query($req) or die ($errReq);
?>
<form method="post" action="?detailrep">
<select name="repchoisi">
<?
while ($ligne=mysql_fetch_array($result))
{
$repchoisi2 = $_POST['repchoisi'];
extract($ligne);
if($repchoisi2 == $repnum) {echo "<option value='$repnum' selected>$repnom";}
else {echo "<option value='$repnum'>$repnom";}
}
?>
</select>
<p><input type="submit" name="boutondetail" value="Detail"></p>
</form>
<?
if ($_POST['boutondetail'] == "Detail" )
{ $repchoisi = $_POST['repchoisi'];
$req2 = "SELECT * FROM representant WHERE repnum='$repchoisi'";
$result2 = Mysql_Query($req2) or die ($errReq);
$repdata = mysql_fetch_assoc($result2);
?>
</form>
<form METHOD="POST" ACTION="?modrep">
<input type="hidden" name="repchoisi" value="<?=$repchoisi?>">
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"><label for="num">Numéro:</label></td>
<td width="75%"><? echo(html_entity_decode($repdata['repnum'], ENT_QUOTES)); ?></td>
</tr>
<tr>
<td width="25%"><label for="nom">Nom:</label></td>
<td width="75%"><? echo(html_entity_decode($repdata['repnom'], ENT_QUOTES)); ?></td>
</tr>
<tr>
<td width="25%"><label for="prenom">Prénom:</label></td>
<td width="75%"><? echo(html_entity_decode($repdata['reppre'], ENT_QUOTES)); ?></td>
</tr>
<tr>
<td width="25%"><label for="adresse">Adresse:</label></td>
<td width="75%"><? echo(html_entity_decode($repdata['repadr'], ENT_QUOTES)); ?></td>
</tr>
<tr>
<td width="25%"><label for="npa">NPA:</label></td>
<td width="75%"><? echo(html_entity_decode($repdata['repnpa'], ENT_QUOTES)); ?></td>
</tr>
<tr>
<td width="25%"><label for="loc">Localité:</label></td>
<td width="75%"><? echo(html_entity_decode($repdata['reploc'], ENT_QUOTES)); ?></td>
</tr>
<tr>
<td width="25%"><label for="tel">Téléphone:</label></td>
<td width="75%"><? echo(html_entity_decode($repdata['reptelpri'], ENT_QUOTES)); ?></td>
</tr>
<tr>
<td width="25%"><label for="mob">Mobile:</label></td>
<td width="75%"><? echo(html_entity_decode($repdata['repmob'], ENT_QUOTES)); ?></td>
</tr>
<tr>
<td width="25%"><label for="ville">Ville d'action:</label></td>
<td width="75%"><? echo(html_entity_decode($repdata['repvilletrav'], ENT_QUOTES)); ?></td>
</tr>
</table>
<input name ="boutonmod" type="submit" value="Modifier">
</form>
<form METHOD="POST" ACTION="?suprep">
<input type="hidden" name="repchoisi" value="<?=$repchoisi?>">
<input name ="boutonsupp" type="submit" value="Supprimer">
</form>
<?
mysql_close();
}
?>

Publicité

xtof_83

Freeride Spirit

C'est encore une question de %

IE n'a pas mes même marges, etc...que FF
Donc sa merde toujours

Solution si tu 50% tu passes à 49%
mettre tous en fixe, ou mettre que les extremité en fixe et le centre en flotant...

J'ai pas chercheé ou changer cela dans le code...
Mais tu le sais sans doute mieux que moi

gatsusat

et super ton tableau à la con pour ton formulaire. Tu n'avais pas plus pourri alors que tu mets bien des labels et tout
mais faut que tu mettes un tableau !!!
bordel !! avec leS CSS c'est mieux

---------------
Les CSS c'est bon mangez-en

limp15000

www.geneva-racing.ch

Je sais pour les tableaux, je veux les bannir, mais je vais chercher la manière exacte de faire, d'ailleurs si t'as des pistes, je prends volontier!
Parce que j'ai fait un tableau avec la balise DIV...

Code :

*/
include('lib/connection.lib.php');
//On prend tout ce que la table paramètres contient et on le stock dans une variable
$query_string = "SELECT * FROM `parametres` WHERE entrnom = 'hellokeys'";
$variablesql = mysql_query($query_string);
$paramdata = mysql_fetch_assoc($variablesql);
?>
<div id="tableau1">
Nom : <? echo(html_entity_decode($paramdata['entrnom'], ENT_QUOTES)); ?><br />
Adresse :<? echo(html_entity_decode($paramdata['entradr'], ENT_QUOTES)); ?><br />
NPA :<? echo(html_entity_decode($paramdata['entrnpa'], ENT_QUOTES)); ?><br />
Localité :<? echo(html_entity_decode($paramdata['entrloc'], ENT_QUOTES)); ?><br />
Numéro de téléphone :<? echo(html_entity_decode($paramdata['entrtel'], ENT_QUOTES)); ?><br />
Numéro de fax :<? echo(html_entity_decode($paramdata['entrfax'], ENT_QUOTES)); ?><br />
Logo de l'entreprise :<img src="inc/param/logo/asgar.jpg" width="380" height="88"><br />
</div>
<?
mysql_close();
?>

Ce qui donne:

limp15000

www.geneva-racing.ch

Voilà j'ai transformer une de mes pages:

Le code:

Code :

<z>Les champs avec * doivent être renseignés</z>
<form METHOD="post" ACTION="?ajoutrep">
<div id="tableau1">
<label for="nom"><?if ($repnom == "" ){echo "<strong><z>Nom*:</z></strong>";}else{echo "Nom:";}?></label><br />
<input value="<? echo $_POST['repnom']; ?>" id="nom" name="repnom" type="text" maxlength="40"><br />
<label for="prenom"><?if ($reppre == "" ){echo "<strong><z>Prénom*:</z></strong>";}else{echo "Prénom:";}?></label><br />
<input value="<? echo $_POST['reppre']; ?>" id="prenom" name="reppre" type="text" maxlength="40"><br />
<label for="adresse"><?if ($repadr == "" ){echo "<strong><z>Adresse*:</z></strong>";}else{echo "Adresse:";}?></label><br />
<input value="<? echo $_POST['repadr']; ?>" id="adresse" name="repadr" type="text" maxlength="60"><br />
<label for="npa"><?if ($repnpa == "" ){echo "<strong><z>NPA*:</z></strong>";}else{echo "NPA:";}?></label><br />
<input value="<? echo $_POST['repnpa']; ?>" id="npa" name="repnpa" type="int" maxlength="4"><br />
<label for="loc"><?if ($reploc == "" ){echo "<strong><z>Localité*:</z></strong>";}else{echo "Localité:";}?></label><br />
<input value="<? echo $_POST['reploc']; ?>" id="loc" name="reploc" type="text" maxlength="40"><br />
<label for="tel">Téléphone:</label><br />
<input value="<? echo $_POST['reptelpri']; ?>" id="mail" name="reptelpri" type="text" maxlength="15"><br />
<label for="mob">Mobile:</label><br />
<input value="<? echo $_POST['repmob']; ?>" id="mob" name="repmob" type="text" maxlength="15"><br />
<label for="ville"><?if ($repville == "" ){echo "<strong><z>Ville d'action*:</z></strong>";}else{echo "Ville d'action:";}?></label><br />
<input value="<? echo $_POST['repvilletrav']; ?>" id="ville" name="repvilletrav" type="text" maxlength="40"><br />
<input type="submit" id="boutonaj" name="boutonaj" value="Ajouter">
<input type="reset" name="vider" value="Vider les champs"><br />
</form>
<?

Et le bout de CSS qui est appelé:

Code :

# .tableau1 {
# height: 100px;
# width:100%;
# text-align:center;
# }

Personne pourrait me dire comment faire pour que ça joue?!

Message édité par limp15000 le 10-10-2005 à 13:47:23

gatsusat

le code HTML généré c'est mieux que ton PHP. sinon on prendra pas la peine de te repondre

les DIV ca sert à rien, ou ca sert que si tu peux pas faire autrement.
Là ton div, il sert à rien !
ton formulaire tu le style directement, pas besoin de foutre un DIV

ensuite un formulaire c'est des labels, fieldset, input et textarea

pour les label c'est tout con :
float:left;
clear:left;
display:block;
width:150px;
font-weight : bold;
et voila des fieldset à droite et hoplaboum

---------------
Les CSS c'est bon mangez-en

gatsusat

heu et les jpg de 600 ko non merci, un petit effort pour les recomrpesser en plus

---------------
Les CSS c'est bon mangez-en

omega2

Gatsusat > Ici, ses images font entre 68 et 75 ko. T'as du mal compter le nombre de chifre a moins qu'il ai refait ses images depuis.

limp15000

www.geneva-racing.ch

Bon premièrement, j'ai réduit la taille de l'image qui suit elle fait 38 ko!
Pourquoi y a cette espace??? Entre mon titre et le tableau???
Je sens que j'approche du but...

Code :

<form METHOD="post" ACTION="?ajoutrep">
<label for="nom"><?if ($repnom == "" ){echo "<strong><z>Nom*:</z></strong>";}else{echo "Nom:";}?></label>
<input value="<? echo $_POST['repnom']; ?>" id="nom" name="repnom" type="text" maxlength="40">
<label for="prenom"><?if ($reppre == "" ){echo "<strong><z>Prénom*:</z></strong>";}else{echo "Prénom:";}?></label>
<input value="<? echo $_POST['reppre']; ?>" id="prenom" name="reppre" type="text" maxlength="40"><br />
<label for="adresse"><?if ($repadr == "" ){echo "<strong><z>Adresse*:</z></strong>";}else{echo "Adresse:";}?></label>
<input value="<? echo $_POST['repadr']; ?>" id="adresse" name="repadr" type="text" maxlength="60">
<label for="npa"><?if ($repnpa == "" ){echo "<strong><z>NPA*:</z></strong>";}else{echo "NPA:";}?></label>
<input value="<? echo $_POST['repnpa']; ?>" id="npa" name="repnpa" type="int" maxlength="4">
<label for="loc"><?if ($reploc == "" ){echo "<strong><z>Localité*:</z></strong>";}else{echo "Localité:";}?></label>
<input value="<? echo $_POST['reploc']; ?>" id="loc" name="reploc" type="text" maxlength="40">
<label for="tel">Téléphone:</label>
<input value="<? echo $_POST['reptelpri']; ?>" id="mail" name="reptelpri" type="text" maxlength="15">
<label for="mob">Mobile:</label>
<input value="<? echo $_POST['repmob']; ?>" id="mob" name="repmob" type="text" maxlength="15">
<label for="ville"><?if ($repville == "" ){echo "<strong><z>Ville d'action*:</z></strong>";}else{echo "Ville d'action:";}?></label>
<input value="<? echo $_POST['repvilletrav']; ?>" id="ville" name="repvilletrav" type="text" maxlength="40">
<input type="submit" id="boutonaj" name="boutonaj" value="Ajouter">
<input type="reset" name="vider" value="Vider les champs"><br />
</form>

Et ton CSS pour le label:

Code :

label {
float:left;
clear:left;
display:block;
width:150px;
font-weight : bold;
}
input {
float:right;
clear:right;
display:block;
width:150px;
}

Message édité par limp15000 le 10-10-2005 à 14:45:18

limp15000

www.geneva-racing.ch

Non je ne les ai pas retoucher, justement je comprenais pas trop car 60 ko c'est rien!!???

Publicité

omega2

Pour un 56 Ko, ca fait 10 secondes par images. Arrivé à 4 ou 5 images, ca fait plus de 40 à 50 secondes pour avoir les images en entié.

Et pour une société dont la liaison internet est sous dimensioné par rapport au nombre d'employé qui l'utilisent, ca peut faire encore plus.

limp15000

www.geneva-racing.ch

Ouais j'avoue que je suis habitué à la connection de mon école en fibre optique... Donc les temps de chargement j'oublie un peu...

gatsusat

pas de float:right pour le input, puisque un float:left sur le left, fout autpmatiquement le input sur la gauche du label.
Pas besoin de display:block; puisque le input n'en a pas besoin ici.

et faut mettre des <br> après chaque input pour bien montrer que tu fais un retour à la ligne: la tu as le droit

en gros ton input doit reseembler à ceci :
input {
width:150px; /*ou ce que tu veux histoire que ce ressemble à quelque chose*/
}

---------------
Les CSS c'est bon mangez-en

gatsusat

je t'ai aussi dit 50x que le code HTML généré c'est mieux pour nous que du code HTML mélangé avec du PHP, c'est pratiquement illisible (même si on comprend)

---------------
Les CSS c'est bon mangez-en

limp15000

www.geneva-racing.ch

Si j'ai bien compris c'êst ça que tu veux:

Code :

<form METHOD="post" ACTION="?ajoutrep">
<label for="nom">Nom<z>*</z>:</label>
<td width="75%"><input id="nom" name="repnom" type="text" maxlength="40">
<label for="prenom">Prénom<z>*</z>:</label>
<input id="prenom" name="reppre" type="text" maxlength="40">
<label for="adresse">Adresse<z>*</z>:</label>
<input id="adresse" name="repadr" type="text" maxlength="60">
<label for="npa">NPA<z>*</z>:</label>
<input id="npa" name="repnpa" type="int" maxlength="4">
<label for="loc">Localité<z>*</z>:</label>
<input id="loc" name="reploc" type="text" maxlength="40">
<label for="tel">Téléphone:</label><br />
<input id="tel" name="reptelpri" type="text" maxlength="15">
<label for="mob">Mobile:</label>
<input id="mob" name="repmob" type="text" maxlength="15">
<label for="ville">Ville d'action<z>*</z>:</label>
<input id="ville" name="repvilletrav" type="text" maxlength="40">
<input type="submit" id="boutonaj" name="boutonaj" value="Ajouter">
<input type="reset" name="vider" value="Vider les champs"><br />

limp15000

www.geneva-racing.ch

J'ai suivi tes recommendations et j'arrive à ça:

Code :

label {
float:left;
clear:left;
width:150px;
font-weight : bold;
font-size:
}
input {
width:150px;
}

Code :

<form METHOD="post" ACTION="?ajoutrep">
<label for="nom">Nom<z>*</z>:</label>
<input id="nom" name="repnom" type="text" maxlength="40"><br>
<label for="prenom">Prénom<z>*</z>:</label>
<input id="prenom" name="reppre" type="text" maxlength="40"><br>
<label for="adresse">Adresse<z>*</z>:</label>
<input id="adresse" name="repadr" type="text" maxlength="60"><br>
<label for="npa">NPA<z>*</z>:</label>
<input id="npa" name="repnpa" type="int" maxlength="4"><br>
<label for="loc">Localité<z>*</z>:</label>
<input id="loc" name="reploc" type="text" maxlength="40"><br>
<label for="tel">Téléphone:</label>
<input id="tel" name="reptelpri" type="text" maxlength="15"><br>
<label for="mob">Mobile:</label>
<input id="mob" name="repmob" type="text" maxlength="15"><br>
<label for="ville">Ville d'action<z>*</z>:</label>
<input id="ville" name="repvilletrav" type="text" maxlength="40"><br>
<input type="submit" id="boutonaj" name="boutonaj" value="Ajouter">
<input type="reset" name="vider" value="Vider les champs">
</form>

Je sens qu'on approche du but... Merci de m'aider

Message édité par limp15000 le 11-10-2005 à 09:30:43

gatsusat

heu <z></z> ca exite po

---------------
Les CSS c'est bon mangez-en

gatsusat

tes boutons valider et vider les champs
tu me les fous dans un fieldset
afin de bien les differencier du reste de tes elements
et tes les autres éléments tu les fous aussi dans un fieldset
les éléments d'un formulaire sont toujours dans un fieldset

Message édité par gatsusat le 11-10-2005 à 10:36:37

---------------
Les CSS c'est bon mangez-en

limp15000

www.geneva-racing.ch

FANTASTIQUE!!! Merci, ça fonctionne pour le <z></z> c'est moi qui ai défini dans mon CSS c'est juste pour mettre le text en rouge... J'ai pas le droit dans faire comme ça??
En tout cas, merci, je vais adapter toutes mes pages et virer les tableaux qu'il me restait...
Milles merci

omega2

en html, non t'as pas le droit
en xhtml, t'as théoriquement le droit, mais n'oublis pas que ca sera une balise totalement invisible pour les navigateurs sans css vu que ce n'est pas une balise ayant un comportement par défaut.

Mieux vaut utiliser une balise ayant une signification sémantique et utiliser une classe pour la styler.

limp15000

www.geneva-racing.ch

Merci pour la précision, je vais modifier ça

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

Problème de CSS sous Firefox et IE

Sujets relatifs
probleme de popup IE Ffox	Problème Public
Problème avec NewText.replace	Problème avec JCreator
Problème de connexion à ma base de données	CSS généré par PHP reconnu par IE mais pas par Firefox??
comment configurer dreamweaver pour firefox et opera en local?	probleme pour lancer la fenetre cygwin
Problème envoi mail avec fonction mail() [Résolu]
Plus de sujets relatifs à : Problème de CSS sous Firefox et IE

Page générée en 0.194 secondes