Question

i want to style a submit button which seems to be rendered abit differently in different browsers.

<p id="lineInput">
    <label for="task">Add a Task</label>
    <input type="text" name="task" id="task" />
    <input type="submit" id="btnSubmit" value="Add" />
</p>

#lineInput {
    ...

position: relative;
margin: 0px;
}

#btnSubmit {
    ...
    padding: 6px 8px;
    margin: 0;
    font: 1em/1em Hetilica;
    position: absolute;
    right: 2px;
    top: 3px;
}

notice the add button is too low on chrome when #btnSubmit has bottom: 3px. the issue if fixed in chrome with bottom: 5px but in Firefox will be too high

Answer 1

Try addin this to the top of your css file:

*{
margin:0;
padding:0;
}

That way you can test if there is some default browser padding/margin issue without using some large css reset thingy…

What i can tell you is that i think the problem is that you are wrapping that in <p></p> which have default 10px bottom and top padding so maybe try reseting that to 0 in your css.

#lineInput{
padding:0;
}

Or just change that paragraph to div.

Maybe that is the solution, but maybe it aint, because you are using absolut positioning…

I have counted the px’s and letters in both part of the picture are 15px. In firefox below the letters to the end of the orange part is 11px and in chrom there is 8px. In firefox from top of the letters to the start of the orange part there is 12px and in chrom there is 10px. So that is 5px of difference.

Try this:

#btnSubmit{
height:38px;
padding:0;
}

That will make the button be 38px high and letters will be in top left of the button. Then you could add maybe this:

text-align:center;
padding-top:10px; // or how much is needed to be verticaly centered.