Button Text UI Trobuleshooting

vamsivutukuri · July 27, 2020, 7:34pm

Hi,
I have copy pasted the css code from the given resources in the project :

coding-blocks-archives/React-Online-TicTacToe/blob/master/src/App.css


.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 50px;
  font-weight: bold;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 80px;
  line-height: 80px;
  height: 80px;
  display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    background-color: #be5712;
    margin: 10px;

This file has been truncated. show original

But still i’m facing the issue with text inside the button

Inside Edge Browser :

Inside Mozilla FireFox :

But if all boxes are filled they are all aligned properly

Is something wrong with css ?
Please help me fix this issue.

Darsh-Pratap-325457197922299 · July 27, 2020, 7:38pm

@vamsivutukuri there might be some unavoidable/undesired effects in the styling when you open the app in different browsers and not all browsers support all the css properties. Filled button is out of alignment to give a sense of being pressed as far as i know. If there is any other query regarding this, ping in the same thread.

Darsh-Pratap-325457197922299 · August 2, 2020, 6:59am

I hope I’ve cleared your doubt. I ask you to please rate your experience here
Your feedback is very important. It helps us improve our platform and hence provide you
the learning experience you deserve.

On the off chance, you still have some questions or not find the answers satisfactory, you may reopen
the doubt.