-1

This is my jsfiddle:

http://jsfiddle.net/73rqv02t/3/

<div class="jqx-splitter-collapse-button-horizontal jqx-fill-state-pressed jqx-splitter-collapse-button-hover jqx-fill-state-hover" style="height: 13px; width: 32px; position: relative; z-index: 10; left: 50%; top: 11px; margin-top: -1px; margin-left: -16px; line-height: 0px; color: rgb(169, 167, 167); border-width: 0px 1px 1px; border-color: rgb(153, 153, 153); border-style: solid; border-radius: 0px 0px 4px 4px; font-size: 40px; text-align: center;">⌄</div> <br/><br/><br/>

<div class="jqx-splitter-collapse-button-horizontal jqx-fill-state-pressed jqx-splitter-collapse-button-hover jqx-fill-state-hover" style="height: 11px; width: 32px; position: relative; z-index: 10; left: 50%; top: -11px; margin-top: -1px; margin-left: -16px; line-height: 0px; color: rgb(169, 167, 167); border-width: 1px 1px 0px; border-color: rgb(153, 153, 153); border-style: solid; border-radius: 4px 4px 0px 0px; font-size: 40px; text-align: center;">⌃</div>

Even though all styles are same yet if you view this in different browsers they look different in all.

Could anybody suggest what is the issue here?

This is how it looks in Firefox latest version: https://gyazo.com/e843e93d90e4410b093a57f4f4fa2cd8

This is how it looks in Chrome: https://gyazo.com/23d6fddb1ba7b3794f5cfa71588896f6

Jack
  • 7,433
  • 22
  • 63
  • 107
  • 4
    Some browsers render text differently. Take a look at this: http://stackoverflow.com/questions/5082632/same-font-yet-its-weight-seems-different-on-different-browsers – MortenMoulder Sep 19 '15 at 05:06
  • Please show how it should look like and how it looks different. Which Browser shows it wrong? And please do Not use inline stylesheets. – JavaForAndroid Sep 19 '15 at 05:06
  • @Snorlax This is not the problem with browsers, it's with the entities used to show arrows and some style adjustments. You can see the [Demo](http://jsfiddle.net/tusharj/73rqv02t/4/). Also see the previous question from Jack http://stackoverflow.com/questions/32664243/up-and-down-arrow-unicode-font-size-issue/32664266#32664266 – Tushar Sep 19 '15 at 05:19
  • 1
    I'll recommend using *Font-awesome* as you won't be getting any browser issues in this and it will render on all platform same. [**JSFiddle**](http://jsfiddle.net/vivekkupadhyay/73rqv02t/6) – vivekkupadhyay Sep 19 '15 at 05:23
  • @Tushar: Yours one looks fine in all browser. How is that? – Jack Sep 19 '15 at 05:31
  • @Jack As I said in the comments and also in the previous answer, you're not using correct entity for showing arrows. I've also made some changes in the CSS to properly adjust the arrows. – Tushar Sep 19 '15 at 05:33
  • @Tushar: I understand but I was already using correct entity this time. ⌃ and ⌄ but setting it using Jquery's html function and this is what I got. Both arrows this time look the same. However the issue is they look different as a set when viewed in different browser - chrome / firefox. Please check my how it looks in Firefox and in chrome. – Jack Sep 19 '15 at 05:36

1 Answers1

0

Change line-height:30px, and please do not use inline style.

.demo-top {
  height: 13px;
  width: 32px;
  position: relative;
  z-index: 10;
  left: 50%;
  top: 11px;
  margin-top: -1px;
  margin-left: -16px;
  line-height: 0px;
  color: rgb(169, 167, 167);
  border-width: 0px 1px 1px;
  border-color: rgb(153, 153, 153);
  border-style: solid;
  border-radius: 0px 0px 4px 4px;
  font-size: 40px;
  text-align: center;
}
.demo-bottom {
  height: 11px;
  width: 32px;
  position: relative;
  z-index: 10;
  left: 50%;
  top: -11px;
  margin-top: -1px;
  margin-left: -16px;
  line-height: 30px;
  color: rgb(169, 167, 167);
  border-width: 1px 1px 0px;
  border-color: rgb(153, 153, 153);
  border-style: solid;
  border-radius: 4px 4px 0px 0px;
  font-size: 40px;
  text-align: center;
}
<div class="demo-top">⌄</div><br /><br />
<div class="demo-bottom">⌃</div>
Ajeeb Kalathingalthodi
  • 168
  • 8