Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

HTML5 css et différence entre Chrome et Firefox

28 views
Skip to first unread message

Une Bévue

unread,
Oct 20, 2011, 3:13:31 AM10/20/11
to
j'ai un petit problème en HTML5 entre Chrome et Safari d'une part et
Firefox d'autre part, les versions :
Google Chrome 16.0.912.0 dev
Firefox Nightly 10.0a1 (2011-10-19) (même chose avec Firefox tout court)
Safari Version 5.1.1 (7534.51.22)

Une copie écran :
<http://cjoint.com/11oc/AJui45VwaON_All-10px.png>

Le HTML5 (dans le body) :

<footer>

[...]

<div id='footer_center_tiny'>
<!-- pour essai CSS -->
<button class="tiny selected" value='1'>1</button><button
class="tiny" value='2'>2</button><button
class="tiny" value='3'>3</button><button
class="tiny" value='4'>4</button><button
class="tiny" value='5'>5</button><button
class="tiny" value='6'>6</button><button
class="tiny" value='7'>7</button><button
class="tiny" value='8'>8</button><button
class="tiny" value='9'>9</button><button
class="tiny" value='10'>10</button><button
class="tiny" value='11'>11</button><button
class="tiny" value='12'>12</button><button
class="tiny" value='13'>13</button><button
class="tiny" value='14'>14</button><button
class="tiny" value='15'>15</button><button
class="tiny" value='16'>16</button><button
class="tiny" value='17'>17</button><!-- button
class="tiny" value='18'>18</button><button
class="tiny" value='19'>19</button><button
class="tiny" value='20'>20</button><button
class="tiny" value='21'>21</button -->
</div>

[...]

</footer>

Le css relatif :

footer {
height: 40px;
bottom: 0;
}

footer div#footer_center_tiny {
position: absolute;
right: 50%;
width: 17.5%;
height: 16px;
margin: 6px 5px 6px 5px;
padding: 5px 5px 5px 5px;
text-align: right;
/*
background: lightgrey;
*/
}

button.tiny {
vertical-align: middle;
font-family:Tahoma, Geneva, sans-serif;
font-size: 10px;
/*
font-size:0.5em;
*/
font-weight:900;
border-radius:1px;
-moz-border-radius:1px;
-webkit-border-radius:1px;
-moz-box-shadow:0px 0px 1px rgba(219,233,42,0.4);
-webkit-box-shadow:0px 0px 1px rgba(219,233,42,0.4);

color:rgba(0,0,0,0.9);
text-shadow:1px 1px 0px rgba(174,187,13,0.8);
border:1px solid rgba(0,0,0,0.5);

background:-webkit-gradient(linear,0% 0%,0%
100%,from(rgba(174,187,13,1)),to(rgba(74,149,74,1)));

background:-moz-linear-gradient(top,rgba(174,187,13,1),rgba(74,149,74,1)
);

padding: 2px 1px 2px 1px;
margin: 0px 0px 0px 0px;
}
button.tiny:hover {
background:rgba(219,233,42,1);
}
button.selected {
background:rgba(240,73,44,1);
}
button.tiny:active, button:focus {
background:-webkit-gradient(linear,0% 100%,0%
0%,from(rgba(174,187,13,1)),to(rgba(74,149,74,1)));

background:-moz-linear-gradient(bottom,rgba(174,187,13,1),rgba(74,149,74
,1));
}
button.tiny:disabled {
color:rgba(0,0,0,0.4);
text-shadow:1px 1px 0px rgba(174,187,13,0.5);
background:rgba(219,233,42,1);
}
button.tiny:first-child {
border-top-left-radius: 6px;
border-top-right-radius: 1px;
border-bottom-right-radius:1px;
border-bottom-left-radius: 6px;
-moz-border-top-left-radius: 6px;
-moz-border-top-right-radius: 1px;
-moz-border-bottom-right-radius:1px;
-moz-border-bottom-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 1px;
-webkit-border-bottom-right-radius:1px;
-webkit-border-bottom-left-radius: 6px;
padding: 2px 1px 2px 4px;
margin: 0px 0px 0px 0px;
}
button.tiny:last-child {
border-top-left-radius: 1px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 1px;
-moz-border-top-left-radius: 1px;
-moz-border-top-right-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-moz-border-bottom-left-radius: 1px;
-webkit-border-top-left-radius: 1px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 1px;
padding: 2px 4px 2px 1px;
margin: 0px 0px 0px 0px;
}

Ça me gène pas mal car il est important pour moi d'avoir le maximum de
tiny buttons et surtout que leur nombre ne varie pas d'un browser à
l'autre.
Là, je remarque que c'est le "padding" qui change autour des chiffres
d'un browser à l'autre.
C'est un problème "connu" ???
Ou, est-ce mon css qui n'est pas adequat ?
Ce que me dira sans doute "SM"...

--
« Si tous ceux qui n'ont rien n'en demandaient pas plus,
il serait bien facile de contenter tout le monde. »
(Coluche)
0 new messages