Home/ Questions/Q 7278269
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T22:51:06+00:00

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> <html> <head> <style type=text/css> input {

  • 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<style type="text/css">
input {
  border-width: 2px; /* causes button to change dramatically in IE and FireFox */
}

</style>

</head>
<body>
<input type="button" value="Print"/>
</body>
</html>

If I let each browser render the button without any styles, they all look similar to this:

Default Button in IE

As an example, with IE 8, the default border width is 2px. What I did was add a style for the button that sets the border width to 2px. So, I haven’t changed the border width at all. However, upon reloading the page, the button now looks like this:

Same Button in IE but with stylesheet

I don’t understand it at all. I looked at Developer Toolbar, Opera’s Dev tool, Firebug, Safari’s Dev tool, and analyzed each button. Why is it that FireFox and IE cause the button to change so dramatically, while Safari, Chrome, and Opera keep the look and feel exactly the same? I don’t understand why the button changes color and loses it’s ’rounding’ and becomes ‘square’.

I even added the YUI reset link that I’ve been seeing everywhere, researching this problem, and it didn’t help.

What am I doing wrong?

I just want to make the button’s border, padding, and margin even across all browsers so they look the same, while keeping it’s look and feel like the default button (Default Button in IE), but IE and FireFox are making that difficult at the moment.

Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is simply a difference in how browsers render buttons. You aren’t doing anything wrong; it’s just a cross browser rendering issue. In and of itself you can’t cause them to render their default button graphics identically.

    If you want to have the exact same look and feel for your buttons across all browsers, my advice is that you create them with CSS. It is more code but it gives you the precise control you’re looking for.

    There are some excellent CSS button makers out there. Here is one.

    http://css-tricks.com/examples/ButtonMaker/

    HTH!

    • 0