[Galaxy_Stranger]

I've been working on a site, viewing it in Firefox as I go. But I checked it on IE 9 and noticed a discrepancy. Each browser interprets buttons differently.

I've replaced the default button with a graphic background image. Firefox appears to appropriately center the text of the button, or it sets the text on the bottom. It's almost unnoticeable. IE 9 shoves the text over to the right.

I've added this to my .css file:

input, button
{
     padding : 0px ;
     text-align: center ;
}

This helps, but with IE 9 the text is clearly shoved up to the top and with Firefox, the text is moved slightly to the right.

Is there a way I can just set the text to be centered horizontally and vertically?

-=[EDIT]=-
@tlhIn`toq - You're RIGHT! That fixed EVERYTHING!...

This post has been edited by Galaxy_Stranger: 30 May 2012 - 08:18 AM

[tlhIn`toq]

[DarenR]

you will have to have the code look for the web browser it is in and change the css accordingly...

IE9 is horrible at best


you can also use %'s instead of px and that way it will always look for the % of the page and not the browser

This post has been edited by DarenR: 30 May 2012 - 09:12 AM

[Galaxy_Stranger]

Thanks for the reply, Daren.

I played around with the % on the padding and it helps to get things centered, but IE still interprets everything differently. I'll have to fork the .css.

[DarenR]

Yeah --I dont put much stock into developing for IE since no one I know uses IE except here at work.

[Sergio Tapia]

Just use Twitter bootstrap as a starting point to normalize every browser quirk out there. From there expand on your custom look and feel.

http://twitter.github.com/bootstrap/

[Galaxy_Stranger]

Quote

...except here at work.

Bingo. That's why we have to make our apps cross-platform compatible. You cannot demand your users use/not use specific browsers, especially not in a corporate environment. I had to make an entire site compatible with IE 7 last year because the president's sister worked for Shell and Shell's I.T. department refuses to upgrade IE for security reasons. As inane as all of these people are, they are making the rules and if you want the traffic and the business, you have to do your best. Because of the ubiquity of XP, there are still untold installations of IE 6 out there. IE 6 doesn't even support transparent .png images, but there are TONS of people who have not upgraded their browsers.

(As a side note, if you want to be a badass, test all of your work on all browsers on XP, Windows 7, Linux, MAC, Android and IOS. The reason being they are all separate code bases, which means you have to treat them as separate browsers completely.)

Personally, I draw the line at IE 7 because it was such a damn nightmare. But it's always important to get your client to sign-off on a supported browser list. And it will always include IE.

[DarenR]

We tell our clients that they have to upgrade to ie9 (horrible) and that we will not support any other browser.

[Galaxy_Stranger]

It's nice to have that luxury.

[teamfive]

Sergio Tapia, on 30 May 2012 - 04:40 PM, said:

Just use Twitter bootstrap as a starting point to normalize every browser quirk out there. From there expand on your custom look and feel.

http://twitter.github.com/bootstrap/

Good recommendation..
Im using this one too..
Are you using roots theme for wordpress..?