Styling HTML Submit Button (CSS, Different Browsers)

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;
}

alt text

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

Isn't em a browser/platform-depedant unit? What happens if you use pixels to size the text instead? — zneak
– zneak, Commented Jun 5, 2010 at 3:30
i am trying to position the text not change size ... oh ya the one in chrome looks smaller! thx ... i tried using px the sizes dont seem right too... i think theres some default browser padding? — Jiew Meng
– Jiew Meng, Commented Jun 5, 2010 at 3:42
Try one of the many CSS reset stylesheets to ensure that both browsers are starting from the same place. If the results are still different, then it's a browser rendering issue. — jdigital
– jdigital, Commented Jun 5, 2010 at 4:27

Gavrisimo · Accepted Answer · 2010-06-05 11:37:57Z

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.

Collectives™ on Stack Overflow

Styling HTML Submit Button (CSS, Different Browsers)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related