Input buttons different on mac and windows

Question

Here is my button in code:

<!-- CSS Code -->
input {
    height: 100px;
    width: 150px;
    font-size: 55px;
    text-align: center;
}

button {
    width: 87px;
    height: 38px;
    font-size: 12px;
}

<!--  HTML Code -->
<input type="submit" class="button" value="Student">

When I view this button on macbook and my windows laptop, they both look different.

Mac OS:

enter image description here

Windows 7:

enter image description here

As you can see the button in the Windows 7 version is much bigger with bigger font. I initially developed this on my Macbook. Do I need to change something in my code? Why is it doing this?

Does OS X even let you style the buttons? Also, your button is an `input` element, not a `button`, so it has a font size of `55px`. — Blender, Apr 20 '13 at 21:16
@Blender: The `input. button` selector matches an `input` element with `class="button"`, not a `button` element. — Guffa, Apr 20 '13 at 21:22
@Guffa: The original question had `button` as the second selector. — Blender, Apr 20 '13 at 21:25
@Blender I only changed because it may have confusing for some people after hearing these few comment. Whether `input.button` or `button` in the css part, it still is considered the same. — Rob Avery IV, Apr 20 '13 at 21:27

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

It would look like on the Mac OS the font-size is being ignored, probably by design or override by some browser / OS settings.

If you remove font-size do the buttons now look the same in both browsers? If you need to specify the font size you might find some helpful advice over here.

edited May 23 '17 at 10:25

Community

1
1

answered Apr 20 '13 at 21:25

m.edmondson

29,632
26
117
199

Yeah 55 font looks like it's applying only on the Windows screenshot. – NoBugs Apr 20 '13 at 21:28

score 0 · Answer 2 · answered Apr 20 '13 at 23:28

0

Ttry this css code
.button {
width: 87px;
height: 38px;
font-size: 12px;
}

Your button css code is a tag, and not a class, so your class="Button" is not work, because no exist this css class

answered Apr 20 '13 at 23:28

Lai32290

7,390
18
61
89

Input buttons different on mac and windows

2 Answers2