user3290443 user3290443 - 5 months ago 10
CSS Question

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>




Answer

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