rendering problem with custom buttons on firefox =(

[andresmb]

hello, i am facing a really nasty firefox bug and cant find the problem in google.
Firefox basically refuses to middle align the text of a button with a background image, it works fine on any other browser.

- the buttons have small height.
- the problem diminishes in ff if you increase the height. (dont want to )

the culprit: http://img155.imageshack.us/img155/7136/picture4gm3.png
the css: http://pastie.textmate.org/338918

[jscheuer1]

To really help with this, it would be useful to have a link to your page that shows the problem. That would make it relatively easy to experiment using FF's developer extension as to what style(s) might work out best in that browser.

I have had some experience with this sort of thing though the accommodations to get it to work cross browser can be quite complex, depending upon how everything is supposed to line up.

Please post a link to the page on your site that contains the problematic code so we can check it out.

[andresmb]

To really help with this, it would be useful to have a link to your page that shows the problem. That would make it relatively easy to experiment using FF's developer extension as to what style(s) might work out best in that browser.

I have had some experience with this sort of thing though the accommodations to get it to work cross browser can be quite complex, depending upon how everything is supposed to line up.

Please post a link to the page on your site that contains the problematic code so we can check it out.

Thanks for the help, my site isnt online yet but i could perfectly replicate the problem in this small css fragment:

<style type="text/css" media="screen">
.mybutton {
color:green;
border: 1px solid red;
height: 17px;
line-height: 10px;
font-family: Comic Sans MS;
}
</style>

<a href="#">asdf</a> <button class="mybutton">Push Me</button> <a href="#">sdfg</a>

The buttons have the text vertically centered while on firefox the text appears at the bottom of the button.

I have played tweaking the values, and changing the font, increasing the height decreases the problem in firefox =(

[BLiZZaRD]

it's a value of adjustments. margins, padding, what ever. You can "fake" it by making line-height exactly half of height. (change height to 20px to see what I mean.)

[andresmb]

changing the padding/margin/line-height does nothing in ff in this case.

[jscheuer1]

I suggest completely rethinking this, as it doesn't line up right in Opera either, and though it looks OK in Safari, there is no button effect (it will not depress when clicked). Even in IE, it looks a bit cramped on the top.

Custom buttons are best designed using regular (not form) elements. Form elements like inputs, buttons, etc. just do not behave consistently as regards style across browsers.

Is this part of a form? If so, just use a standard input element of the type button and let the browser decide how to display it. With forms there is no real way to control the precise look of things across browsers. Forms are for gathering data, not artistic presentation. If it isn't part of a form, use a link and and possibly a container for that link. To get the exact effect you want in all browsers may still be tricky or impossible, but you will have much better luck getting it at least acceptable across browsers. I did something like that here:

http://www.mediajazzbynight.com/

[jlizarraga]

I just had the same problem, and found this through Google. I got around the problem by putting a SPAN inside the BUTTON and styling that instead (while removing any styles for the BUTTON element).

I would have gone a different route if I could, but this had to be able to submit a form for users without Javascript enabled, so I was stuck with the BUTTON element.

[simcomedia]

Basically your CSS is styling the button or container but not the content.

<style type="text/css">
.mybutton {
border: 1px solid red;
height: 30px;
width: 200px;
text-align: center;
vertical-align: middle;

}

.mybutton a:link {
font-family: "Comic Sans MS";
font-size: 14pt;
text-decoration: none;
color: green;
}

.mybutton a:hover {
color: red;
text-decoration: none;
}

</style>

Then place the links in a div class="mybutton" like so:

<body>
<div class="mybutton"><a href="#">This is a Test</a></div>
</body>

Notice I raised the height to 30px. Your container height needs to be approx. twice the height of your font size.