Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 12 PS5 Orange Livebox ChatGPT Mini PC
Entraide Développement Développement Langage PHP différence entre Opera, Firefox et Chrome, Safari

différence entre Opera, Firefox et Chrome, Safari

15 réponses
Avatar
unbewusst.sein
J'ai un problème de présentation différente entre Opera, Firefox d'une
part et Chrome, Safari d'autre part :

Opera :
<http://cjoint.com/11oc/AJdpIBp6SqM_opera.JPG>
Firefox :
<http://cjoint.com/11oc/AJdpETfLFak_firefox-nightly.JPG>

Chrome :
<http://cjoint.com/11oc/AJdpEfEBvTI_chrome.JPG>
Safari :
<http://cjoint.com/11oc/AJdpFrXd2rQ_safari.JPG>

le tout sur Mac OS X Lion.

ça se situe, côté html entre le select (dans une <p />) et le label
suivant (lui aussi dans une <p />), le code html :
<div id="item">
<p class="row">
<label>Catégorie :</label>
<select id="cat" name="cat">
<option value="-1" selected="">Choisissez</option>
<option value="0">Formulaires</option>
<option value="1">Groupes de discussion</option>
<option value="2">Comptes EMail</option>
<option value="3">Clés de logiciels</option>
<option value="4">Banque en ligne</option>
<option value="5">Cartes de paiement</option>
<option value="7">Free Marie</option>
<option value="8">Free Yvon</option>
</select>
</p>
<p class="row">
<label>Titre :</label>
<input id="title" name="title" type="text" value="&lt; Titre
&gt;">
</p>
<p class="row">
<label>Lien :</label>
<input id="link" name="link" type="text" value="&lt; Lien
&gt;">
</p>
<p class="row">
<label>Login :</label>
<input id="login" name="login" type="text" value="&lt; Login
&gt;">
</p>
<p class="row">
<label>Mot de passe :</label>
<input id="pass" name="pass" type="text" value="&lt; Mot de
passe &gt;">
</p>
<p class="row">
<label>Notes :</label>
<textarea id="infos" name="infos" cols="40" rows="6"
tabindex="4" wrap="off">&lt; Notes &gt;</textarea>
</p>
</div>

la partie de css adequat :
#item p.row label,
#item p.row input[type="text"],
#item p.row select {
padding: 5px 0;
font: bold 11px/14px "Lucida Grande", "Trebuchet MS", Arial,
Helvetica, sans-serif;
background:lightblue;
}
#item p.row label {
float: left;
width: 20%;
padding-right: 9px;
text-align: right;
background: -webkit-gradient( linear, left top, right top,
from(rgb(173,216,230)), to(rgb(214,236,242)) );
background: -moz-linear-gradient(left, rgb(173,216,230),
rgb(214,236,242));
-webkit-border-radius: 0.75em 0 0 0.75em;
-moz-border-radius: 0.75em 0 0 0.75em;
border-radius: 0.75em 0 0 0.75em;
}
#item p.row input[type="text"], #item p.row select {
display: block;
width: 76%;
margin: 0 0 0 23%;
padding-left: 1%;
text-align: left;
background: -webkit-gradient( linear, right top, left top,
from(rgb(173,216,230)), to(rgb(214,236,242)) );
background: -moz-linear-gradient(right, rgb(173,216,230),
rgb(214,236,242));
-webkit-border-radius: 0 0.75em 0.75em 0;
-moz-border-radius: 0 0.75em 0.75em 0;
border-radius: 0 0.75em 0.75em 0;
border: 0;
}

#item p.row select {
width: 77%;
padding:0.75% 0 0.75% 1%;
}
/**/
#item p.row textarea {
display: block;
width: 76%;
margin: 0 0 0 23%;
padding-left: 1%;
text-align: left;
background: -webkit-gradient( linear, right top, left top,
from(rgb(173,216,230)), to(rgb(214,236,242)) );
background: -moz-linear-gradient(right, rgb(173,216,230),
rgb(214,236,242));
-webkit-border-radius: 0 0.75em 0.75em 0;
-moz-border-radius: 0 0.75em 0.75em 0;
border-radius: 0 0.75em 0.75em 0;
border: 0;
}

comme jusqu'ici je n'avais testé que sur Firefox nightly (10.0a1
(2011-10-02), je n'ai pas vu ce problème...


--
« L'essence même du génie, c'est de mettre en pratique
les idées les plus simples. »
(Charles Peguy)
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
SAM
Le 03/10/11 15:49, Une Bévue a écrit :
J'ai un problème de présentation différente entre Opera, Firefox d'une
part et Chrome, Safari d'autre part :

Opera :
<http://cjoint.com/11oc/AJdpIBp6SqM_opera.JPG>
Firefox :
<http://cjoint.com/11oc/AJdpETfLFak_firefox-nightly.JPG>

Chrome :
<http://cjoint.com/11oc/AJdpEfEBvTI_chrome.JPG>
Safari :
<http://cjoint.com/11oc/AJdpFrXd2rQ_safari.JPG>

le tout sur Mac OS X Lion.



oui .. bon ... on préférerait les versions des brouteurs ...

ça se situe, côté html entre le select (dans une<p />) et le label
suivant (lui aussi dans une<p />), le code html :



à moins que ça n'aie changé pour le html.5 (c'est du html.5 ?),
je ne comprends pas que ces labels soient utilisés inutilement ... !

<label>
titre du label
<element de formulaire />
</label>

ou

<label for="truc_1">titre</lablel> <élément de form id="truc_1">

pour les ces css,
au hasard j'essaierais :

#item p.row { clear: left } /* 'Titre' dans Safari/Chrome */

pour la couleur des boutons ... on ne saura pas, vu qu'on en n'a pas le
code html

#item p.row input[type="text"], #item p.row select {
display: block;
max-width: 76%;

au lieu de :

#item p.row input[type="text"], #item p.row select {
display: block;
width: 76%;


paske entre les 20% du label, ses marges, les cadres de tt le monde, les
marges et padding du p du div, ceux des éléments ...
Y a plus que le navigateur pour arriver à tenter de s'en dépêtrer ! ;-)


--
Stéphane Moriaux avec/with iMac-intel
Avatar
unbewusst.sein
SAM wrote:

Le 03/10/11 15:49, Une Bévue a écrit :
> J'ai un problème de présentation différente entre Opera, Firefox d'une
> part et Chrome, Safari d'autre part :


> Opera :


Version
12.00 pre-alpha
Révision
1076
Plate-forme
Mac OS X
Système
10.7.1
> <http://cjoint.com/11oc/AJdpIBp6SqM_opera.JPG>


> Firefox :


10.0a1 (2011-10-03)
> <http://cjoint.com/11oc/AJdpETfLFak_firefox-nightly.JPG>


> Chrome :


10.0a1 (2011-10-03)
> <http://cjoint.com/11oc/AJdpEfEBvTI_chrome.JPG>


> Safari :


Version 5.1 (7534.48.3)
> <http://cjoint.com/11oc/AJdpFrXd2rQ_safari.JPG>
>
> le tout sur Mac OS X Lion.

oui .. bon ... on préférerait les versions des brouteurs ...

> ça se situe, côté html entre le select (dans une<p />) et le label
> suivant (lui aussi dans une<p />), le code html :

à moins que ça n'aie changé pour le html.5 (c'est du html.5 ?),
je ne comprends pas que ces labels soient utilisés inutilement ... !

<label>
titre du label
<element de formulaire />
</label>

ou

<label for="truc_1">titre</lablel> <élément de form id="truc_1">



euh, c'est toi qui m'a donné cette recette !!! ;-)


pour les ces css,
au hasard j'essaierais :

#item p.row { clear: left } /* 'Titre' dans Safari/Chrome */




oui, je pense que ça suffit...

pour la couleur des boutons ... on ne saura pas, vu qu'on en n'a pas le
code html

#item p.row input[type="text"], #item p.row select {
display: block;
max-width: 76%;

au lieu de :

#item p.row input[type="text"], #item p.row select {
display: block;
width: 76%;



NON, ça fou le bronx, je suis resté à width: 76%;
mais je peux diminuer s'il le faut.

paske entre les 20% du label, ses marges, les cadres de tt le monde, les
marges et padding du p du div, ceux des éléments ...
Y a plus que le navigateur pour arriver à tenter de s'en dépêtrer ! ;-)



par contre j'ai ajouté :
height: 24px;

sur #item p.row select c'est plus zoli !!!

et c'est quasiment identique sur ---TOUS--- les butineurs précités !
tu as fait de moi un homme heureux )))

résumé : c'est surtout le "#item p.row { clear: left }" qui agit !!!

il n'y a que la couleur des <buttob /> qui n'est pas respectée sur Opera
Next, mais je m'en fiche.

see <http://82.226.217.239/landp_public/index.html> if u wich )))

--
« Le temps est un grand maitre, dit-on. Le malheur est
qu'il tue ses élèves. »
(Berlioz)
Avatar
unbewusst.sein
Une Bévue wrote:

> > Chrome :
10.0a1 (2011-10-03)



je me gouratte dans un copier/coller, il fallait lire :
16.0.899.0 dev


--
« Le temps est un grand maitre, dit-on. Le malheur est
qu'il tue ses élèves. »
(Berlioz)
Avatar
SAM
Le 04/10/11 15:50, Une Bévue a écrit :
SAM wrote:

Le 03/10/11 15:49, Une Bévue a écrit :
J'ai un problème de présentation différente entre Opera, Firefox d'une
part et Chrome, Safari d'autre part :





Firefox :




10.0a1 (2011-10-03)



boudiou ! j'en suis à la 7.0.1 (à jour du jour)

<http://cjoint.com/11oc/AJdpETfLFak_firefox-nightly.JPG>





je ne comprends pas que ces labels soient utilisés inutilement ... !

<label>
titre du label
<element de formulaire />
</label>

ou

<label for="truc_1">titre</lablel> <élément de form id="truc_1">



euh, c'est toi qui m'a donné cette recette !!! ;-)



Ça m'étonnerait que j'ai donné comme recette un label non renseigné ou
non englobant comme tu nous le donnes

[cite code]
<p class="row">
<label>Lien :</label>
<input id="link" blabla

Mébon j'ai eu pu faire court ?
C'eut dû t-être :

<p class="row">
<label for="link">Lien :</label>
<input id="link" blabla


pour les ces css,
au hasard j'essaierais :

#item p.row input[type="text"], #item p.row select {
display: block;
width: 76%;



NON, ça fou le bronx, je suis resté à width: 76%;



bon, j'avais dit "essayer" ;-)

tu as fait de moi un homme heureux )))



il était manifeste que le "Titre" n'était pas renvoyé où il fallait à
cause de la flottaison
que la solution la plus évidente dans ce cas est d'arrêter cette
flottaison au(x) bon(s) endroit(s) par un clear:right/left/both; approprié.
L'autre option est de mettre toutes ces boites flottantes avec la même
hauteur forcée (si elles l'acceptent) afin qu'elle n'essaient pas de se
glisser, apparemment, en intercalaire

résumé : c'est surtout le "#item p.row { clear: left }" qui agit !!!



toutafé


see<http://82.226.217.239/landp_public/index.html> if u wich )))



Safari 5, Firefox 7, Crhrome 14.0.835.186
je vois partout la mme chose :
<http://cjoint.com/?AJesKCdGOiN>
Pas de label mais des boutons verts

Vérifier sur le fichier dont images-captures si ces boutons rouges ont
bien la classe "normal" ?!


Je ne dois pas m'exprimer très clairement ... ?
/* conseil SM : height:auto*/
#header_left, #header_right {
height:auto;
}
peut être entièrement remplacé par du vide

Le truc, à l'origine, était pour contre-carrer une autre
instruction/règle. Si elle n'existe plus, le truc n'est pas à conserver.


--
Stéphane Moriaux avec/with iMac-intel
Avatar
unbewusst.sein
SAM wrote:

> euh, c'est toi qui m'a donné cette recette !!! ;-)

Ça m'étonnerait que j'ai donné comme recette un label non renseigné ou
non englobant comme tu nous le donnes



ça veut dire quoi là, "non englobant" ?

[cite code]
<p class="row">
<label>Lien :</label>
<input id="link" blabla

Mébon j'ai eu pu faire court ?
C'eut dû t-être :

<p class="row">
<label for="link">Lien :</label>
<input id="link" blabla



mon code tel que copier de firebug :
<p class="row">
<label>Titre :</label>
<input id="title" name="title" type="text" value="Farfelu">
</p>

sur <http://www.w3schools.com/tags/tag_label.asp>, ils disent :
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />

donc le seul truc que je ne mets pas c'est le for="machin", c'est
vraiment utile ?
bon, pas difficile à ajouter dans mon php et/ou js...

>> pour les ces css,
>> au hasard j'essaierais :
>>
>> #item p.row input[type="text"], #item p.row select {
>> display: block;
>> width: 76%;
>
> NON, ça fou le bronx, je suis resté à width: 76%;

bon, j'avais dit "essayer" ;-)



ben c'est ce que j'ai fait )))

> tu as fait de moi un homme heureux )))

il était manifeste que le "Titre" n'était pas renvoyé où il fallait à
cause de la flottaison
que la solution la plus évidente dans ce cas est d'arrêter cette
flottaison au(x) bon(s) endroit(s) par un clear:right/left/both; approprié.
L'autre option est de mettre toutes ces boites flottantes avec la même
hauteur forcée (si elles l'acceptent) afin qu'elle n'essaient pas de se
glisser, apparemment, en intercalaire



ouais, il faudrait que je re-re-relise un bon tuto sur le sujet...
t'en connais un ?
et aussi sur l'imbrication des DIVs, l'autre jour j'ai été surpris
qu'une div contenue puisse être plus grande qu'une div contenante...

> résumé : c'est surtout le "#item p.row { clear: left }" qui agit !!!

toutafé


> see<http://82.226.217.239/landp_public/index.html> if u wich )))

Safari 5, Firefox 7, Crhrome 14.0.835.186
je vois partout la mme chose :
<http://cjoint.com/?AJesKCdGOiN>
Pas de label mais des boutons verts



les labels ils n'apparaissent que lorsque tu édites une entrée (bouton
"Modifier")...

sinon c'est :
<p class="row">
<span class="legend">Login :</span>
<span class="content" id="login">Farfelu</span>
</p>

j'ai d'ailleurs hésité, récemment, à changer ça en utilisant la
propriété #contentEditable, mais j'aurais de tout manière eu à
redessiner car pour Catégories, je dois mettre un select.

Vérifier sur le fichier dont images-captures si ces boutons rouges ont
bien la classe "normal" ?!




ben je ne vois pas de bouton rouge (mis à part avec Opera Next) :

<http://cjoint.com/11oc/AJeurwzp1fy_bouton_rouge.JPG>

à part ce petit bouton pour la pagination quand il y a trop de
résultats.

Je ne dois pas m'exprimer très clairement ... ?



pas tjs... ;-)

/* conseil SM : height:auto*/
#header_left, #header_right {
height:auto;
}
peut être entièrement remplacé par du vide



effectivement, je l'ai commenté, ça ne change rien...

Le truc, à l'origine, était pour contre-carrer une autre
instruction/règle. Si elle n'existe plus, le truc n'est pas à conserver.



voila !
--
« Le temps est un grand maitre, dit-on. Le malheur est
qu'il tue ses élèves. »
(Berlioz)
Avatar
SAM
Le 04/10/11 20:23, Une Bévue a écrit :
SAM wrote:

Ça m'étonnerait que j'ai donné comme recette un label non renseigné ou
non englobant comme tu nous le donnes



ça veut dire quoi là, "non englobant" ?



eh bien : le label n'est pas la boite contenant l'input
(il peut fonctionner comme ça mais je ne suis pas certain que l'on ait
le droit de l'employer ainsi)(cf. tt en bas)

mon code tel que copier de firebug :
<p class="row">
<label>Titre :</label>
<input id="title" name="title" type="text" value="Farfelu">
</p>



oui.

sur<http://www.w3schools.com/tags/tag_label.asp>, ils disent :
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />



OK d'ac

donc le seul truc que je ne mets pas c'est le for="machin", c'est
vraiment utile ?



c'est comme ça que c'est censé fonctionner

... d'ordinaire

... quand c'est dans un form

Le label sert alors de bouton pour l'input auquel il se réfère
(label pour/for truc-bidule)

bon, pas difficile à ajouter dans mon php et/ou js...



Ha! Ça ! ... tout l'monde s'en fout ;-)



à toutasar je rappelle la hiérarchie du form

form
div (ou p) (une balise reconnue naturellement comme une boite)
fieldset
legend
label
input / select / textarea

Exemple :

<form action="foo.php">
<div>
<fieldset><legend>inscription</legend>
<p><label for="nom">Nom : </label>
<input id="nom" name="nom">
<p><label for="prenom">Prénom : </label>
<input id="prenom" name="prenom">
</fieldset>
<fieldset><legend>validations</legend>
<p><label for="annul">Cliquer pour tout effacer</label>
<input type="reset" id="annul">
<p><label>Cliquer pour valider: <input type="submit"></label>
</fieldset>
</div>
</form>


ouais, il faudrait que je re-re-relise un bon tuto sur le sujet...



déjà, mettre en bouton/bookMark :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
et
<http://www.w3.org/TR/CSS21/indexlist.html>

t'en connais un ?



non
il y a pompage je crois
<http://www.pompage.net/articles_par_theme#theme-CSS>
Alsacreations :
<http://www.alsacreations.com/tutoriels/>
machin 3school ou du genre qui parait-il ...
openweb (si ça fonctionne encore ?) :
<http://openweb.eu.org/>

mébon .... l'apprentissage des css est affaire d'un peu de jugeote (de
préférence compréhension géométrie) de pas mal de patience, de beaucoup
de lectures (surtout si on veut être compatible IE) d'essais et erreurs,

la prose de MinusculeMou :
<http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx>
anciennes joyeusetés pour IE (les hacks) :
<http://www.ultra-fluide.com/ressources/css/css-hacks.htm>

Lectures au coin du feu :
<http://www.la-grange.net/w3c/>

Interludes :
le site de Nichols Stu : <http://www.cssplay.co.uk/>
<http://www.cssplay.co.uk/menu/> <http://www.cssplay.co.uk/menus/>
<http://www.cssplay.co.uk/layouts/>

et aussi sur l'imbrication des DIVs, l'autre jour j'ai été surpris
qu'une div contenue puisse être plus grande qu'une div contenante...



Fastoche !
exemple : centrage d'une image :

<div style="position:absolute;top:50%;left:50%;width:1px;height:1px">
<img
style="width:200px;height:150px;margin-left:-100px;margin-height:-75px"
src="test.jpg" />
</div>


Pas de label mais des boutons verts



les labels ils n'apparaissent que lorsque tu édites une entrée (bouton
"Modifier")...



OK, vu.

Vérifier sur le fichier dont images-captures si ces boutons rouges ont
bien la classe "normal" ?!



ben je ne vois pas de bouton rouge (mis à part avec Opera Next) :



oui, ça a l'air d'être ça :
<http://cjoint.com/11oc/AJdpIBp6SqM_opera.JPG>
Bon, donc il a eu droit aux mêmes sources ?
et il n'aime pas tes background ? en tous cas en balises 'button' ?!

<http://cjoint.com/11oc/AJeurwzp1fy_bouton_rouge.JPG>



non celui-là j'avions point vu ni remarqué

Je ne dois pas m'exprimer très clairement ... ?



pas tjs... ;-)



bon comme ça on est au moins 3 (car tu comptes double) ;-)


Dans ton code

il manque pas mal de /> (meta, link, img, input ...)

ce n'est pas :
<option selected=""
mais
<option selected
ou et de préférence :
<option selected="selected"

l'attribut "language" n'existe plus, à supprimer
ici :
language="JavaScript"
de même que celui "wrap"
ici :
<textarea wrap="off"

Le label englobant ou non, avec ou sans attribut for, convient au
validator du W3C, il n'a pas râlé à ce sujet à propos de ta page
modifiée par JS.


--
Stéphane Moriaux avec/with iMac-intel
Avatar
unbewusst.sein
SAM wrote:

Le 04/10/11 20:23, Une Bévue a écrit :
> SAM wrote:
>>
>> Ça m'étonnerait que j'ai donné comme recette un label non renseigné ou
>> non englobant comme tu nous le donnes
>
> ça veut dire quoi là, "non englobant" ?

eh bien : le label n'est pas la boite contenant l'input
(il peut fonctionner comme ça mais je ne suis pas certain que l'on ait
le droit de l'employer ainsi)(cf. tt en bas)

> mon code tel que copier de firebug :
> <p class="row">
> <label>Titre :</label>
> <input id="title" name="title" type="text" value="Farfelu">
> </p>

oui.

> sur<http://www.w3schools.com/tags/tag_label.asp>, ils disent :
> <label for="male">Male</label>
> <input type="radio" name="sex" id="male" />

OK d'ac

> donc le seul truc que je ne mets pas c'est le for="machin", c'est
> vraiment utile ?

c'est comme ça que c'est censé fonctionner

... d'ordinaire

... quand c'est dans un form

Le label sert alors de bouton pour l'input auquel il se réfère
(label pour/for truc-bidule)

> bon, pas difficile à ajouter dans mon php et/ou js...

Ha! Ça ! ... tout l'monde s'en fout ;-)



à toutasar je rappelle la hiérarchie du form

form
div (ou p) (une balise reconnue naturellement comme une boite)
fieldset
legend
label
input / select / textarea

Exemple :

<form action="foo.php">
<div>
<fieldset><legend>inscription</legend>
<p><label for="nom">Nom : </label>
<input id="nom" name="nom">
<p><label for="prenom">Prénom : </label>
<input id="prenom" name="prenom">
</fieldset>
<fieldset><legend>validations</legend>
<p><label for="annul">Cliquer pour tout effacer</label>
<input type="reset" id="annul">
<p><label>Cliquer pour valider: <input type="submit"></label>
</fieldset>
</div>
</form>



OK, merci, mais bon, je ne suis pas dans une form en fait car je
construis mon POST par js...

> ouais, il faudrait que je re-re-relise un bon tuto sur le sujet...

déjà, mettre en bouton/bookMark :
<http://www.yoyodesign.org/doc/w3c/css2/indexlist.html>
et
<http://www.w3.org/TR/CSS21/indexlist.html>

> t'en connais un ?

non
il y a pompage je crois
<http://www.pompage.net/articles_par_theme#theme-CSS>
Alsacreations :
<http://www.alsacreations.com/tutoriels/>
machin 3school ou du genre qui parait-il ...
openweb (si ça fonctionne encore ?) :
<http://openweb.eu.org/>

mébon .... l'apprentissage des css est affaire d'un peu de jugeote (de
préférence compréhension géométrie) de pas mal de patience, de beaucoup
de lectures (surtout si on veut être compatible IE) d'essais et erreurs,

la prose de MinusculeMou :
<http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx>
anciennes joyeusetés pour IE (les hacks) :
<http://www.ultra-fluide.com/ressources/css/css-hacks.htm>

Lectures au coin du feu :
<http://www.la-grange.net/w3c/>

Interludes :
le site de Nichols Stu : <http://www.cssplay.co.uk/>
<http://www.cssplay.co.uk/menu/> <http://www.cssplay.co.uk/menus/>
<http://www.cssplay.co.uk/layouts/>




euh, c'est quand l'interro ?
)))

> et aussi sur l'imbrication des DIVs, l'autre jour j'ai été surpris
> qu'une div contenue puisse être plus grande qu'une div contenante...

Fastoche !
exemple : centrage d'une image :

<div style="position:absolute;top:50%;left:50%;width:1px;height:1px">
<img
style="width:200px;height:150px;margin-left:-100px;margin-height:-75px"
src="test.jpg" />
</div>



tiens, super intéressant, ça marche aussi si je mets dans la div une
autre div avec des <p /> et des boutons ?

>> Pas de label mais des boutons verts
>
> les labels ils n'apparaissent que lorsque tu édites une entrée (bouton
> "Modifier")...

OK, vu.

>> Vérifier sur le fichier dont images-captures si ces boutons rouges ont
>> bien la classe "normal" ?!
>
> ben je ne vois pas de bouton rouge (mis à part avec Opera Next) :

oui, ça a l'air d'être ça :
<http://cjoint.com/11oc/AJdpIBp6SqM_opera.JPG>
Bon, donc il a eu droit aux mêmes sources ?
et il n'aime pas tes background ? en tous cas en balises 'button' ?!




ben ouais, mêmes sources...

> <http://cjoint.com/11oc/AJeurwzp1fy_bouton_rouge.JPG>

non celui-là j'avions point vu ni remarqué




il n'apparaît pas dans la version 'public' car il n'y a pas assez
d'entrées, attends un peu j'en ajoute pour voir, c'est fait.

J'ai ajouté tes bookmarks en "Formulaires" et tu vois apparaître les
tiny buttons :
<http://goo.gl/yNr8V>


>> Je ne dois pas m'exprimer très clairement ... ?
>
> pas tjs... ;-)

bon comme ça on est au moins 3 (car tu comptes double) ;-)




salopard, tu vas voir si je t'attrappe !!!


Dans ton code

il manque pas mal de /> (meta, link, img, input ...)



je reconnais pour meta et input mais pas pour img et link
ce n'est pas :
<option selected=""



ouais je sais, mais c'est pas moi qui fait ça car dans mon php j'ai :
$options.="<option value='$idx' selected>$name</option>";

mais
<option selected
ou et de préférence :
<option selected="selected"



ouais j'ai changé mon php pour ça :
$options.="<option value='$idx' selected='selected'>$name</option>";


l'attribut "language" n'existe plus, à supprimer
ici :
language="JavaScript"



C'EST FAIT, mais pas encore sur la version public qui n'est qu'une copie
de la version sur laquelle je travaille exceptée la bd "landp.db".

de même que celui "wrap"
ici :
<textarea wrap="off"



dommage j'ai trouvé ça utile pourtant, ça veut dire que ça n'a plus
d'effet ???

Le label englobant ou non, avec ou sans attribut for, convient au
validator du W3C, il n'a pas râlé à ce sujet à propos de ta page
modifiée par JS.



bon, je l'ai modifié ça, mais je dois dire que je trouve un peu vouillon
d'avoir à écrire for='machin' quand l'id machin est juste à côté...

en tk merci beaucoup pour tout !!!

pas mal de choses à digérer.



--
Je m'intéresse au futur, c'est là que je compte passer
le reste de ma vie.
(Woody Allen)
Avatar
SAM
Le 05/10/11 09:05, Une Bévue a écrit :
SAM wrote:

Exemple :



OK, merci, mais bon, je ne suis pas dans une form en fait car je
construis mon POST par js...



Heu ... là c'est du code html
dont les brouteurs ont le souci
pour en faire des trucs de présentation et d'accessibilité.

<http://cjoint.com/?AJflYjvqApE>

Que l'action du form soit remplacé par un JS n'a rien à y voir.

Bien entendu, fieldsets et leur legends sont facultatifs
(comme les groupes d'options par exemple)

euh, c'est quand l'interro ?



3 mois après que j'ai refilé tous mes bookmarks sur le sujet.
Rattrapage : 3 mois plus tard.
Contrôle de validation 6 mois après.
Autorisations de perdurer : tous les 2 ans.

exemple : centrage d'une image :

<div style="position:absolute;top:50%;left:50%;width:1px;height:1px">
<img
style="width:200px;height:150px;margin-left:-100px;margin-height:-75px"
src="test.jpg" />
</div>



tiens, super intéressant, ça marche aussi si je mets dans la div une
autre div avec des<p /> et des boutons ?



Ce div sera de préférence positionné lui aussi.

Attention !
Ça devient rigolo quand on réduit fort la taille de la fenêtre.

<http://cjoint.com/11oc/AJdpIBp6SqM_opera.JPG>
Bon, donc il a eu droit aux mêmes sources ?
et il n'aime pas tes background ? en tous cas en balises 'button' ?!



ben ouais, mêmes sources...



bon ... avec la console d'Opera 11.xxx
( Outils/Avancé/Dragonfly )
je vois que, comme moi, il ne voit pas de background pour les boutons :

landp.css:242
button.normal {

Tes circonvolutions de dégradé ne l'émeuvent pas.
Il faut découper dans cet ordre le background du button.normal :

button.normal {
background: repeat scroll 0 0 green;
background: -moz-linear-gradient(center top , #AEBB0D, #4A954A)
transparent;
/* et le reste du tremblement */
}

pas certain que : repeat scroll 0 0
serve à qque chose ...

pas testé sur Safari


de même que celui "wrap"
ici :
<textarea wrap="off"



dommage j'ai trouvé ça utile pourtant,



faut en causer au W3C ou changer de doctype

ça veut dire que ça n'a plus d'effet ???



les brouteurs sont très accommodants, ça a certainement encore l'effet
attendu, même avec un doctype contradictoire.

Le label englobant ou non, avec ou sans attribut for, convient au
validator du W3C, il n'a pas râlé à ce sujet à propos de ta page
modifiée par JS.



bon, je l'ai modifié ça, mais je dois dire que je trouve un peu vouillon
d'avoir à écrire for='machin' quand l'id machin est juste à côté...



certes et d'ailleurs, comme dit + haut, le Validator ne s'offusque pas
de ne pas l'avoir, c'est donc facultatif bien qu'à mon idée l'usage de
cette balise y perde de son intérêt.

De toutes façons dans ton organisation ça n'aura qu'une vague utilité et
que si on a titillé le bouton [modifier]

en tk merci beaucoup pour tout !!!

pas mal de choses à digérer.



pas impossible ;-)

--
Stéphane Moriaux avec/with iMac-intel
Avatar
unbewusst.sein
SAM wrote:

Le 05/10/11 09:05, Une Bévue a écrit :
> SAM wrote:
>>
>> Exemple :

> OK, merci, mais bon, je ne suis pas dans une form en fait car je
> construis mon POST par js...

Heu ... là c'est du code html
dont les brouteurs ont le souci
pour en faire des trucs de présentation et d'accessibilité.

<http://cjoint.com/?AJflYjvqApE>

Que l'action du form soit remplacé par un JS n'a rien à y voir.



ouais, mais je ne suis pas "obligé" de mettre form autour ?

3 mois après que j'ai refilé tous mes bookmarks sur le sujet.
Rattrapage : 3 mois plus tard.
Contrôle de validation 6 mois après.
Autorisations de perdurer : tous les 2 ans.

>> exemple : centrage d'une image :
>>
>> <div style="position:absolute;top:50%;left:50%;width:1px;height:1px">
>> <img
>> style="width:200px;height:150px;margin-left:-100px;margin-height:-75px"
>> src="test.jpg" />
>> </div>



Ah, super ça !!!


bon ... avec la console d'Opera 11.xxx
( Outils/Avancé/Dragonfly )
je vois que, comme moi, il ne voit pas de background pour les boutons :

landp.css:242
button.normal {

Tes circonvolutions de dégradé ne l'émeuvent pas.
Il faut découper dans cet ordre le background du button.normal :

button.normal {
background: repeat scroll 0 0 green;
background: -moz-linear-gradient(center top , #AEBB0D, #4A954A)
transparent;
/* et le reste du tremblement */
}



je teste ça en début d'aprems'

pas certain que : repeat scroll 0 0
serve à qque chose ...



ok, je vérifierai par un essai.


--
« C'est aujourd'hui que commence le reste de ta vie. »
(Dale Carnegie)
Avatar
unbewusst.sein
SAM wrote:

bon ... avec la console d'Opera 11.xxx
( Outils/Avancé/Dragonfly )
je vois que, comme moi, il ne voit pas de background pour les boutons :

landp.css:242
button.normal {

Tes circonvolutions de dégradé ne l'émeuvent pas.
Il faut découper dans cet ordre le background du button.normal :

button.normal {
background: repeat scroll 0 0 green;
background: -moz-linear-gradient(center top , #AEBB0D, #4A954A)
transparent;
/* et le reste du tremblement */
}



ben oui, suis-je bête quand c'est no -moz ni -webkit il faut mettre
autre chose, maintenant c'est vert avec Opera.

pas certain que : repeat scroll 0 0
serve à qque chose ...



ne change rien pour Opera...

bon excuses moi, j'ai mon interro à réviser !!!
--
« C'est aujourd'hui que commence le reste de ta vie. »
(Dale Carnegie)
1 2