Hauteur différente sous FireFox

**avion** · 01/04/2019, 00h24

Bonjour,

Depuis maintes reprise, j'ai essaye de comprendre, pourquoi mon formulaire est différent sous Firefox ? Et raisonnable sous Chrome et Edge .
Merci de m'éclaircir !

Chrome
Nom : chrome.PNG
Affichages : 82
Taille : 291,0 Ko

Nom : chrome.PNG
Affichages : 82
Taille : 291,0 Ko

Edge

Et sous Firefox, la différence de hauteur :
Nom : firefox.PNG
Affichages : 80
Taille : 404,6 Ko

J'aimerais savoir, qu'est qui peut provoquer cette différence de l'hauteur ? Sans y mettre mon code !?

Merci

**CosmoKnacki** · 01/04/2019, 01h14

Envoyé par avion

j'ai essaye de comprendre, pourquoi mon formulaire est différent sous Firefox ? Et raisonnable sous Chrome et Edge .

Les navigateurs ont des paramètres par défaut, il n'y a rien de plus ou de moins raisonnable chez chacun d'eux. Le reset css est une solution pour parer à ces différences, mais sans montrer ton code personne ne peut rien faire pour toi.
Pour ma part, je commence toujours avec Firefox avant de voir le rendu pour les autres navigateurs.

**avion** · 07/04/2019, 22h23

Salut,

Mon code côté, formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/*********************************************************************************************
******                                  COTE FORMULAIRE                                *******
**********************************************************************************************/
 
 
section#main-contact div.formContact form#form{
    display: flex;
    flex-direction: column;
}
 
div#container h1.titleContact{
    font-family: "Bebe", Helvetica, Arial;
    font-size: 3.6em;
    color: #6c6159;
}
 
div#container div.nom input.inputName{
    border: #6c6159 solid .1em;
    padding: .6em;
    width: 19em;
 
    font-family: "Bebe", Helvetica, Arial;
    font-size: 1em;
    color: #6c6159;
    margin-bottom: 1em;
}
 
div#container div.email input.inputMail{
    border: #6c6159 solid .1em;
    padding: .6em;
    width: 19em;
 
    font-family: "Bebe", Helvetica, Arial;
    font-size: 1em;
    color: #6c6159;
    margin-bottom: 1em;
}
 
div#container div.formContact div.message textarea{
    border: #6c6159 solid .1em;
    padding: .6em;
    width: 19em;
 
    font-family: "Bebe", Helvetica, Arial;
    font-size: 1em;
    color: #6c6159;
    margin-bottom: 1em;
}
 
div#container div.formContact form button{
    padding: .6em;
    width: 16em;
 
    background: -webkit-gradient(linear, left top, left bottom, from(#dfdfdf), to(#453c3c));
 
    background: -webkit-linear-gradient(top, #dfdfdf, #453c3c);
 
    background: -o-linear-gradient(top, #dfdfdf, #453c3c);
 
    background: linear-gradient(to bottom, #dfdfdf, #453c3c);
    border: #FFFFFF solid .1em;
    cursor: pointer;
    font-family: "Bebe", Helvetica, Arial;
    font-size: 1.2em;
    color: #FFFFFF;
}
 
 
/****************************************
***         COTE RESEAUX             ***
****************************************/
div#container div.social{
    float: right;
    margin-top: -24em;
}
 
div#container div.social ul{
    padding-left: 22em;
}
 
div#container div.social ul li{
    float: right;
    list-style-type: none;
 
    position: relative;
    top: -3em;
}
 
div#container div.social ul li a img{
    height: 1.5em;
    width: 1.5em;
}
 
div#container div.social h4{
    color: #6c6159;
    border-top: #565656 solid .1em;
 
    font-family: "Bebe", Helvetica, Arial;
    font-size: 1.3em;
    font-style: italic;
    font-weight: 700;
}
 
/*********************************
***   COTE GOOGLE MAPS         ***
**********************************/
div#container div.maps{
/*    float: right;  TEST
    margin-top: -19rem;*/
    display: flex;
    flex-direction: column;
    align-items: flex-end;
 
    margin-top: -19rem
}

Invité · 08/04/2019, 09h54

Bonjour,

du code CSS n'a aucun intérêt SANS le code HTML associé.

**avion** · 11/04/2019, 19h40

Le code HTML comme demandé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
{% extends "::base.html.twig" %}
 
{% block body %}
    <section id="main-contact">
        <h1 class="titleContact">Me contacter</h1>
 
        <div class="formContact">
 
            {% for message in app.flashes('notice') %}
                <div class="flash-notice">
                    {{ message }}
                </div>
            {% endfor %}
 
 
            {{ form_start(form, {'attr': {'novalidate': 'novalidate', 'id': 'form'}}) }}
 
                <div class="nom">
                    <label for="{{ form.name.vars.id }}"></label>
                    <input type="text" name="{{ form.name.vars.full_name }}"
                           value="{{ form.name.vars.value }}" class="inputName"
                           id="{{ form.name.vars.id }}" placeholder="Votre nom" required>
                    <span class="errorName" aria-live="polite">{{ form_errors(form.name) }}</span>
                    {% do form.name.setRendered %}
                </div>
 
                <div class="email">
                    <label for="{{ form.email.vars.id }}"></label>
                    <input type="email" name="{{ form.email.vars.full_name }}"
                           value="{{ form.email.vars.value }}" class="inputMail"
                           id="{{ form.email.vars.id }}" placeholder="Votre email" required>
                    <span class="errorMail" aria-live="polite">{{ form_errors(form.email) }}</span>
                    {% do form.email.setRendered %}
                </div>
 
                <div class="message">
                    <label for="{{ form.message.vars.id }}"></label>
                    <textarea name="{{ form.message.vars.full_name }}" id="{{ form.message.vars.id }}"
                              value="{{ form.message.vars.value }}"
                              placeholder="Votre message ..." cols="30" rows="10" required></textarea>
                    <span class="errorMessage" aria-live="polite">{{ form_errors(form.message) }}</span>
                    {% do form.message.setRendered %}
                </div>
 
                <button type="submit" id="buttonInput">Envoyer</button>
            {{ form_end(form) }}
        </div>
 
        <div class="social">
            <h4>Réseaux sociaux</h4>
            <ul>
                <li><a href="{{ asset('https://www.linkedin.com/in/moussa-mourad-60a039b6/') }}" target="_blank"><img src="{{ asset('images/linkedin-icon.png') }}" alt="logo linkedin" title="linkedin"></a></li>
                <li><a href="{{ asset('https://www.viadeo.com/p/0021d07a4osxj7wu') }}" target="_blank"><img src="{{ asset('images/viadeo-icon.png') }}" alt="logo viadeo" title="viadeo"></a></li>
            </ul>
        </div>
 
        <div class="maps">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d21006.530076047686!2d2.5121793!3d48.84264335!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sfr!4v1527374125872"
                width="400" height="300" frameborder="0" style="border:0" allowfullscreen>
            </iframe>
        </div>
    </section>
{% endblock %}

OU :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
        <div class="formContact">
 
 
 
            <form name="appbundle_user" method="post" novalidate="novalidate" id="form">
 
                <div class="nom">
                    <label for="appbundle_user_name"></label>
                    <input type="text" name="appbundle_user[name]"
                           value="" class="inputName"
                           id="appbundle_user_name" placeholder="Votre nom" required>
                    <span class="errorName" aria-live="polite"></span>
                                    </div>
 
                <div class="email">
                    <label for="appbundle_user_email"></label>
                    <input type="email" name="appbundle_user[email]"
                           value="" class="inputMail"
                           id="appbundle_user_email" placeholder="Votre email" required>
                    <span class="errorMail" aria-live="polite"></span>
                                    </div>
 
                <div class="message">
                    <label for="appbundle_user_message"></label>
                    <textarea name="appbundle_user[message]" id="appbundle_user_message"
                              value=""
                              placeholder="Votre message ..." cols="30" rows="10" required></textarea>
                    <span class="errorMessage" aria-live="polite"></span>
                                    </div>
 
                <button type="submit" id="buttonInput">Envoyer</button>
            <input type="hidden" id="appbundle_user__token" name="appbundle_user[_token]" value="fPd1oXsxduroZfvnJUnpBEJCZBdLitMq-OLQ7lYleng" />
    </form>
        </div>
 
        <div class="social">
            <h4>Réseaux sociaux</h4>
            <ul>
                <li><a href="https://www.linkedin.com/in/moussa-mourad-60a039b6/" target="_blank"><img src="/images/linkedin-icon.png" alt="logo linkedin" title="linkedin"></a></li>
                <li><a href="https://www.viadeo.com/p/0021d07a4osxj7wu" target="_blank"><img src="/images/viadeo-icon.png" alt="logo viadeo" title="viadeo"></a></li>
            </ul>
        </div>
 
        <div class="maps">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d21006.530076047686!2d2.5121793!3d48.84264335!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sfr!4v1527374125872"
                width="400" height="300" frameborder="0" style="border:0" allowfullscreen>
            </iframe>
        </div>
    </section>

Merci !

**psychadelic** · 14/04/2019, 02h56

tu n'utilises aucun reset css ? à minima utiliser http://meyerweb.com/eric/tools/css/reset/

le plus simple pour voir les différences
ouvrir les debugger ( touche F12) sur chacun des navigateurs et regarder les valeurs css attribuées pour les éléments de ta page, puis les ajouter dans ton css pour les harmoniser entre les différents navigateurs.

Hauteur différente sous FireFox

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager