CODEWITHSUNDEEP
htmlcssinternet-explorer
ajb
ajb

Reputation: 31689

Button text gets cut off in IE

The following HTML displays correctly in Chrome but not in IE. The button text gets cut off.

<HTML>
   <HEAD>
      <TITLE>Button test</TITLE>
      <STYLE type="text/css">
      p { padding-left: 2em; text-indent: -2em }
      </STYLE>
   </HEAD>
   <BODY>
   <DIV style="margin-left: 0.5in; margin-right: 0.5in">First line<P>Second line<BUTTON>Button will be clicked</BUTTON>
   </DIV>
   </BODY>
</HTML>

The idea behind the p style entry is that I want paragraphs to appear with the first line to the left of the remaining lines. I've reduced this to a minimal example, but normally there would be an onclick event set up for the BUTTON.

Upvotes: 1

Views: 1218

Answers (1)

ajb
ajb

Reputation: 31689

I've found that in IE, if the BUTTON occurs inside a P, the text-indent property of the paragraph element is inherited by the BUTTON, causing it to move the text to the left so that some of it drops off the button. This can be solved by adding style="text-indent: 0" to the BUTTON, or adding this to the style sheet:

  button { text-indent: 0 }

Upvotes: 1

Related Questions