18043 sujets

Questions générales et questions de débutants

Différence taille hauteur "input type" entre Safari et Firef

Salut à tous,

Voila mon petit problème est comme vous pouvez le voir sur l'image, avec le code ci-dessous, je n'obtiens malheureusement pas la même taille de hauteur avec safari est Firefox.

Existe-il une astuce afin de contourner ce problème?

http://data.imagup.com/10/1126006573.png

Merci d'avance pour vos info.
Modifié par qwertz1 (22 Jul 2011 - 15:25)
Bonjour,

Safari n'aime pas trop voir ses champs de formulaire modifiés avec CSS, c'est bien connu Smiley lol

On ne connait pas grand chose de ton problème, il va être difficile de t'aider sans plus de détail, comme par exemple la base : le CSS utilisé.

Merci, bonne fin de journée.
Modifié par Riku Asakura (22 Jul 2011 - 17:32)
Bin j'ai simplement placé le code ci-dessous dans ma page et rien d'autre:

<input type="text" style="width:164px;">
Bonjour à toutes et à tous,

je me pose la question de l'intérêt d'avoir rigoureusement la même présentation entre les différents navigateurs ?

A moins d'avoir un gros bug de présentation, disons quelque chose d'horrible, je ne vois pas trop l'intérêt de pousser le conformisme de ta page à une stricte identité.

@+
bonjour,

as-tu essayé de fixer une hauteur? Comme ci-dessous?


input {
width:164px;
height:30px;
}


Si tu fixes également la hauteur du texte, les margin et les padding, tu devrais obtenir ce que tu cherches.
Bonjour à toutes et à tous,

le rendu dépend du navigateur que tu utilises.

Si j'ai bien compris, tu as utilisé dans la balise input uniquement la largeur et tu n'as pas définie la hauteur. En respectant ton choix pour l'ajout des styles, place simplement la hauteur comme suite : 
<input type="text" style="width:164px; height=30px;">
Mais habituellement, on sépare le code HTML du code CSS. La bonne écriture est celle donnée par FloydinBremen !

@+
Meme en fixant la hauteur le problème reste. Sinon j'ai fais un essai en fixant la hauteur du texte, les margin et les padding, mais le problème demeure toujours!

upload/38492-test1.jpg


voici le code css qui va avec : 


* {margin: 0; padding:0 ;}
input {
width:164px;
height:50px;
padding-top:10px;
padding-bottom:10px;
font-size:20px;
margin: 0 auto;
background-color:pink;
}


merci de pas taper pour la 1ère declaration * {margin: 0; padding:0 ;}.... Smiley eek
d´ailleurs pas sûr que ce soit utile ici.
le rose, c´est pour une meilleure visualisation, c´est pas par gout, hein?! Smiley ohwell

comme on peut le voir, les 2 éléments input on bien la même taille. Par contre, les 2 navigateurs ne prennent pas la même place au niveau de leur menu respectif.
Bonjour à toutes et à tous,

je me suis mal fait comprendre. Je pense que tu ne pourras pas avoir rigoureusement le même rendu car chaque navigateur fait ce qu'il veut. Il existe une certaine liberté dans la définition des balises et autres fonctionnalités proposées par chaque navigateur.

Et tu ne pourras jamais avoir rigoureusement la même chose, avec le même code HTML+CSS. Et tu ne peux rien y faire !

@+
humm.....j´ai joint une image dans mon message précédent. Ce sont des captures d´écrans Safari et Firefox, mis l´un à côté de l´autre. Les 2 INPUT ont la même taille. Ou j´ai mal vu? Smiley cligne
La première déclaration * {margin:0; padding:0;} sert à annuler les paramètres par défaut des navigateurs.
Sujet clos
Aller à