CODEWITHSUNDEEP
javascripthtmlcssgoogle-chromefirefox
user1535814
user1535814

Reputation: 66

defective alignment in mozilla firefox while everything is fine in chrome

I want a form with all elements aligned to the left. Everything is fine with google-chrome but with firefox the layout is defective, i.e. one input element (the range) is a little bit right. Is this a bug or did I miss something?

Fiddle

Chrome

Chrome

Firefox

Firefox

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <script>
            function changeEvas(evasValue) {
                canvas = document.getElementById('smiley');
                context = canvas.getContext('2d');

                // face
                context.beginPath();
                context.arc(100, 100, 75, 0, 2 * Math.PI);
                gradient = context.createRadialGradient(100, 100, 50, 75, 75, 100);
                gradient.addColorStop(0, "yellow");
                gradient.addColorStop(1, "orange");
                context.fillStyle = gradient;
                context.fill();

                // left eye
                context.beginPath();
                context.arc(100 - 25, 75, 7, 0, 2 * Math.PI);
                context.fillStyle = 'black';
                context.fill();

                // right eye
                context.beginPath();
                context.arc(100 + 25, 75, 7, 0, 2 * Math.PI);
                context.fillStyle = 'black';
                context.fill();

                // mouth
                context.beginPath();
                context.moveTo(60, 125);
                context.quadraticCurveTo(100, 162 - evasValue * 7.5, 140, 125);
                context.lineCap = "round";
                context.strokeStyle = 'black';
                context.lineWidth = 4;
                context.stroke();
            }
        </script>
    </head>
    <body>
        <article>
            <canvas id="smiley" width="200" height="200"></canvas>
            <script>changeEvas(0);</script>

            <form action="#" method="post" style="width: 200px;">
                <label for="evas">Schmerzniveau</label>
                <input name="evas" id="evas" type="range" 
                       min="0" max="10" step="0.1" value="0"  
                       style="width: 200px;"
                       onchange="changeEvas(this.value)"
                       onkeypress="changeEvas(this.value)"
                       onmousemove="changeEvas(this.value)"><br>
                <img src="wedge.png" alt=""><br>
                <input id="submit" name="submit" type="submit" value="Ok" style="width: 200px;">
            </form>
        </article>    
    </body>
</html>

Upvotes: 0

Views: 86

Answers (1)

Mikhail Timofeev
Mikhail Timofeev

Reputation: 2169

set margin-left: 0; by your input:

 <input name="evas" id="evas" type="range" 
    min="0" max="10" step="0.1" value="0"  
    style="width: 200px; margin-left: 0;"
    onchange="changeEvas(this.value)"
    onkeypress="changeEvas(this.value)"
    onmousemove="changeEvas(this.value)"><br>

Upvotes: 1

Related Questions