user3290443 user3290443 - 1 year ago 37
CSS Question

Button is not displaying completely

I am trying to make a

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

Am I missing something for the

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

<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>


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 id="next_button">
  <button onclick="task.next_trial();">ok</button>

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


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