CODEWITHSUNDEEP
htmlcssbutton
mathpun
mathpun

Reputation: 39

Button is not displaying completely

I am trying to make a button in some HTML code for a small web app I made, however my button should say "ok" but the button itself is too small and doesn't display the "ok" completely.

Am I missing something for the span?

How can I increase the size of the button to be a bit larger and display all of the "ok"?

<center>
  <br>
  <br>
  <span id="accept_button" style="display:none;"><button onclick="task.accept_choice();"><h3>ok</h3></button></span>
  <span id="next_button" style="display:none;"><button onclick="task.next_trial();"><h3>ok</h3></button></span>
</center>

Upvotes: 0

Views: 39

Answers (1)

dippas
dippas

Reputation: 60553

the problem is because you are using span which is an inline element, so you had to set display:block, but I advise you to:

  • use div to wrap the button

  • you don't need nothing as child of button to wrap the text, because you can style the button

  • don't use center tag because it is already deprecated, instead style an element using CSS

<div id="accept_button">
  <button onclick="task.accept_choice();">ok</button>
</div>
<div id="next_button">
  <button onclick="task.next_trial();">ok</button>
</div>

NOTE: In HTML5, you can have span as parent of h3(same goes for button) but not in HTML4

HTML5:

Permitted parent elements

any element that can contain flow elements, hgroup

7.1 Flow elements:

phrasing elements or a or p or hr or pre or ul or ol or dl or div or h1 or h2 or h3 or h4 or h5 or h6 or hgroup or address or blockquote or ins or del or object or map or noscript or section or nav or article or aside or header or footer or video or audio or figure or table or form or fieldset or menu or canvas or details

And span/button are one of the phrasing elements

Upvotes: 3

Related Questions