Absolute positioned elements within button element are wrong - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button layout

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button layout

Description

Absolute positioned elements within button element are wrong

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>IE8 button problem</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.parent{<!--   w w  w .j  a  va2  s  . c  o m-->
   position: relative;
   width: 200px;
   height: 200px;
   border: 0;
   background: gray;
   text-align : left;
   overflow:visible;
}
.parent span{
   position: absolute;
   top: 5px;
   left: 0px;
   display: inline-block;
   width: 100px;
   height: 100px;
   background: red;
}


      </style> 
 </head> 
 <body> 
  <br> 
  <button class="parent"> <span>wrong in IE8</span> </button> 
  <br> 
  <div class="parent"> 
   <span></span> 
  </div>  
 </body>
</html>

Related Tutorials