X-UA-Compatible meta tag changes image button position.

renderiza

If I use this on html for web dialog... <meta http-equiv="X-UA-Compatible" content="IE=10">

The image I am trying to use on button is not centered anymore...why?...How can I fix this problem?

Note: Button code: <button type="next" style="width:30px;height:30px;" id="click" value="next" onclick="next = '1'"><img src="images/next.png" alt="next"></button>

Thanks!

renderiza

Adding this helped...padding:0

Button code: <button type="next" style="width:30px;height:30px; padding:0" id="click" value="next" onclick="next = '1'"><img src="images/next.png" alt="next"></button>

Thanks!

Aerilius

Native buttons have a default padding (and margin etc.) that depends on the user interface theme. Once you override such a property (like padding: 0) the button can't be rendered anymore using the theme, and it won't look native anymore. Because of that it is not a good idea to use pixel dimensions when you design dynamic interfaces that are influenced for example by the user's default fonts/sizes/buttons.
Use only pixel dimensions if you have control over all dimensions (or specify all sizes and fonts).

<button type="next" id="click" value="next" onclick="next = '1'"><img src="images/next.png" alt="next"></button> without width/height works fine for me. If you needed the width to align it correctly, you can use container elements instead to align all child elements horizontally/vertically or whatever.

jolran

Can't one do a CSS reset at the begining of the css file to accomodate for that ?

If using Jquery it might be good idea to stick with pixel dimensioning, no ?
Since Jquery calculates most stuff based on pixels..

edit:

@unknownuser said:

the button can't be rendered anymore using the theme, and it won't look native anymore

Ah, oh yeah I see your Point. And you're only referring to font-size regarding em-size?

tt_su

@renderiza said:

The image I am trying to use on button is not centered anymore...why?...How can I fix this problem?

The META tag will kick IE into rendering in standard mode, meaning the box model and much more will work more reliable like the rest of the browsers. That means you need to adjust some of the positioning code you use.

Exactly what code to use depend on the scenario and layout you have. Got a small snippet?

renderiza

@aerilius said:

Once you override such a property (like padding: 0) the button can't be rendered anymore using the theme, and it won't look native anymore.

I noticed that before using paddin:0 the button had a gloss effect on the button.

@aerilius said:

without width/height works fine for me.

I tried this and it does center the button image but then the button is too big.

@tt_su said:

Exactly what code to use depend on the scenario and layout you have. Got a small snippet?

http://sketchucation.com/resources/pluginstore?pln=RND_KeyScene
The .html file is inside the "RND_Keyscene" folder...its called "rnd_keyscene.html"

Note: Using the paddin:0 worked ok even though that will mess the theme used for button but I can deal with that.

Thanks!