Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
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

5 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
unbewusst.sein
SAM wrote:

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>




OUAIS ! ça roule super ici :
<http://studio.quatorze.free.fr/css3/centrage_image/>

mais je ne suis pas parvenu à faire la même chose avec une modal box :
<http://studio.quatorze.free.fr/css3/modalbox/index.html>
(cliquer sur "SHOW" dans le footer)<<<<<<












bon, là dans ma construction, j'ai du rater qqc...

comme l'indique ce petit bout d'essai je veux remplacer mes alert() (un
seul bouton) et confirm() (deux boutons OUI/NON ou CONFIRM/CANCEL) par
une div qui se centre sur la page, grise la page et plus tard, avec une
animation qui l'a fait apparaître de height = 0 à sa height, comme sur
Mac OS X certaines sheet...



--
« C'est aujourd'hui que commence le reste de ta vie. »
(Dale Carnegie)
Avatar
SAM
Le 06/10/11 14:50, Une Bévue a écrit :
SAM wrote:

exemple : centrage d'une image :



OUAIS ! ça roule super
mais je ne suis pas parvenu à faire la même chose avec une modal box :
<http://studio.quatorze.free.fr/css3/modalbox/index.html>
(cliquer sur "SHOW" dans le footer)<<<<<<












bon, là dans ma construction, j'ai du rater qqc...

comme l'indique ce petit bout d'essai je veux remplacer mes alert() (un
seul bouton) et confirm() (deux boutons OUI/NON ou CONFIRM/CANCEL) par
une div qui se centre sur la page, grise la page



jusque là ça semble presque fonctionner
sauf que le truc couvrant semble ne pas être gris ?
et que je ne crois pas qu'il faille lui donner un z-index

la "modal" ensuite (et toujours sans z-index)

j'ai viré "xmaskframe" dont auquel je ne comprends pas l'usage,
ce qui fait que [CONFIRM] [CANCEL] ne fonctionnent plus !


<div id="xdivmasking" style="position: absolute; top: 0px; left: 0px;
width: 100%; height: 100%; opacity: 0.6; background-color: rgb(0,0,0);">
</div>
<div id="divContainer" style="position: absolute; top: 50%;
left: 50%; margin-left: -250px; margin-top: -128px">
<img src="bouton_rouge.jpg" height="257" width="500" alt="" />
<p id="p_button_normal" style="margin: 0pt; border: 0pt none;
text-align: center;">
<button onclick="confirm();" class="normal"
id="button_normal_confirm">
CONFIRM
</button>
<button onclick="cancel();" class="normal"
id="button_normal_cancel">
CANCEL
</button>
</p>
</div>

et plus tard, avec une animation qui l'a fait apparaître de height = 0
à sa height, comme sur Mac OS X certaines sheet...




Bon ... tout ça ... on en avait déjà parlé ... il y a ... 3 ans ?
Lors de l'ancien Mac, non ?
(celui que tu as trucidé à grands coups de code Ruby)


Tu dois avoir des jikérizes ttes faites esssprès pour ça et en mieux :
avec effet d'accélération/décélération

--
Stéphane Moriaux avec/with iMac-intel
Avatar
Une Bévue
On 06/10/2011 18:24, SAM wrote:
Le 06/10/11 14:50, Une Bévue a écrit :

jusque là ça semble presque fonctionner
sauf que le truc couvrant semble ne pas être gris ?
et que je ne crois pas qu'il faille lui donner un z-index

la "modal" ensuite (et toujours sans z-index)

j'ai viré "xmaskframe" dont auquel je ne comprends pas l'usage,
ce qui fait que [CONFIRM] [CANCEL] ne fonctionnent plus !



Ah bon ? sur quel navigateur.

De mémoire (je ne suis pas sur ma bécanne mais sur Ubuntu 11.10 tout
frais d'hier soir) :
- une première div pour griser la page et rendre (zIndex) ses boutons
NON-fonctionnels ;
- au dessus une div de 1px X 1px pour le centrage horizontal de la
suivante ;
- enfin la div commandable par js qui comportera un peu de texte
éventuellement une image un ou deux boutons.


<div id="xdivmasking" style="position: absolute; top: 0px; left: 0px;
width: 100%; height: 100%; opacity: 0.6; background-color: rgb(0,0,0);">
</div>
<div id="divContainer" style="position: absolute; top: 50%;
left: 50%; margin-left: -250px; margin-top: -128px">
<img src="bouton_rouge.jpg" height="257" width="500" alt="" />
<p id="p_button_normal" style="margin: 0pt; border: 0pt none;
text-align: center;">
<button onclick="confirm();" class="normal"
id="button_normal_confirm">
CONFIRM
</button>
<button onclick="cancel();" class="normal"
id="button_normal_cancel">
CANCEL
</button>
</p>
</div>



je regarde ça dès que j'ai Apache2 sous Ubuntu...

et plus tard, avec une animation qui l'a fait apparaître de height = 0
à sa height, comme sur Mac OS X certaines sheet...




Bon ... tout ça ... on en avait déjà parlé ... il y a ... 3 ans ?



ben oui, c'est ça la récurence, je ne fais du html que tous les trois ans.

Lors de l'ancien Mac, non ?
(celui que tu as trucidé à grands coups de code Ruby)



c'est la vidéo qui est morte toute seule, cet iMac-là.

Tu dois avoir des jikérizes ttes faites esssprès pour ça et en mieux :
avec effet d'accélération/décélération




rien gardé.
Avatar
Une Bévue
On 06/10/2011 18:24, SAM wrote:

j'ai viré "xmaskframe" dont auquel je ne comprends pas l'usage,
ce qui fait que [CONFIRM] [CANCEL] ne fonctionnent plus !




a partir de ton code de DIVs j'ai ré-écrit :
<!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" xml:lang="fr-FR">
<head>
<title>Modal Box</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=utf-8">
<link rel="shortcut icon" href="../../landp_public/img/favicon.png"
type="image/png" />
<link rel="shortcut icon" href="../../landp_public/img/favicon.ico"
type="image/x-icon" />
<link rel="stylesheet" type="text/css"
href="../../landp_public/landp.css" media="screen" />
<!-- script language="JavaScript" type="text/javascript"
src="modalbox.js" ></script -->
<script language="JavaScript" type="text/javascript">
window.onload=doit;
var xm;
var dc;
//var mb;
function doit(){
//mb=document.getElementById("divContainer").style;
xm=document.getElementById("xdivmasking").style;
dc=document.getElementById("divContainer").style;
//mb=new maskpanel();
//mb.load();
xm.display="none";
dc.display="none";
}
function show(){
xm.display="block";
dc.display="block";
//mb.display="block";
//mb.show();
}
function hide(){
xm.display="none";
dc.display="none";
//mb.display="none";
}
function cancel(){
hide();
//mb.hide();
//mb.responsúlse;
dc.responsúlse;
result();
return false;
}
function confirm(){
hide();
//mb.hide();
//mb.respons=true;
dc.respons=true;
result();
return true;
}
function result(){
//console.log("result() : "+mb.respons);
//return mb.respons;
console.log("result() : "+dc.respons);
return dc.respons;
}
</script>
</head>
<body>
<div id="xdivmasking" style="position: absolute; top: 0px; left: 0px;
width: 100%; height: 100%; opacity: 0.6; background-color: rgb(0,0,0);">
</div>
<div id="divContainer" style="position: absolute; top: 0px;
left: 50%; margin-left: -250px; margin-top: 0px">
<img src="bouton_rouge.jpg" height="257" width="500" alt="" />
<p id="p_button_normal" style="margin: 0pt; border: 0pt none;
text-align: center;">
<button onclick="confirm();" class="normal"
id="button_normal_confirm">
CONFIRM
</button>
<button onclick="cancel();" class="normal"
id="button_normal_cancel">
CANCEL
</button>
</p>
</div>
<div id="header">
<div id="header_left"><h1><img
src="../../landp_public/img/icon.png" alt="" width="32" height="32"
/>Identifiants & mots de passe</h1></div>
<div id="header_right"><button class='normal'
onclick="search_items();return false">Rechercher</button><input type="text"
onfocus="javascript:this.value=''" id="search_item"
onblur="search_items();return false;" name="search_item"
value="<-- Entrez un nom à rechercher -->" /></div>
</div>
<div id="main">
<div id="categories"></div>
<div id="items"></div>
<div id="item"></div>
</div>
<div id="footer">
<div id="footer_left">
<button class='normal' onclick="Javascript: new
Request('php/category_add.php', 'item');">+</button><button
class='normal' onclick="Javascript:
deleteCategory();return false;">-</button>
</div>
<div id="footer_center">
<button class='normal' onclick="Javascript: new
Request('php/item_add.php', 'item');">+</button>
</div>
<div id="footer_right">
<button class='normal' onclick="show();">SHOW</button>
<!--
<button class='normal' onclick="hide();">HIDE</button>
-->
</div>
</div>
<div id='log'></div>
</body>
</html>

et là ça roule,

essentiellement j'ai désactivé le modalbox.js et changé le js dans la
pade accordingly...

reste + qu'à faire la tempo.
aussi il faut que je prévoie de pouvoir cgarger/redéfinir le contenu de
"divContainer", un simple #innerHTML=... fera l'affaire.

MAIS, tu as raison c'est une très bonne idée, plutôt que construire les
DIVs par js, il suffit de les mettre une fois pour toute dans le HTML et
changer à volonté l'état et le contenu...
Avatar
SAM
Le 07/10/11 07:15, Une Bévue a écrit :

a partir de ton code de DIVs j'ai ré-écrit :


(...)
<script language="JavaScript" type="text/javascript">



<script type="text/javascript">

(...)
function show(){
xm.display="block";
dc.display="block";



// pour éviter toute erreur (block, inline, table ?)
xm.display="";
dc.display="";
// hop! retour à mode par défaut : celui naturel ou défini par css

//mb.display="block";
//mb.show();
}



(...)

MAIS, tu as raison c'est une très bonne idée, plutôt que construire les
DIVs par js, il suffit de les mettre une fois pour toute dans le HTML et
changer à volonté l'état et le contenu...



<http://stephane.moriaux.pagesperso-orange.fr/truc/echange_divs>
<http://stephane.moriaux.pagesperso-orange.fr/truc/div_eparts>
Un autre vieux truc de démo dont je crois que seule la 1ière ligne de
boutons fonctionne +/-
<http://stephane.moriaux.pagesperso-orange.fr/truc/jouer_avec_divs>
<http://stephane.moriaux.pagesperso-orange.fr/truc/div_eparts>

--
Stéphane Moriaux avec/with iMac-intel
1 2