CSS3 PIE Forums
http://css3pie.com/forum/

box drawn on top of content
http://css3pie.com/forum/viewtopic.php?f=3&t=26
Page 1 of 1

Author:  RoadRunnr [ Mon Jul 19, 2010 6:56 am ]
Post subject:  box drawn on top of content

I use a CSS class to dynamically show/hide a box around some input fields. With PIE attached, it only works the first time the box is shown, after that the box is always drawn on top of the content, completely hiding it.

Sample:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

body {
   font-family: Verdana,Geneva,sans-serif
}

input[type="text"] {
   border: 1px solid #d5cdb2;
   padding: 3px 2px 2px;
   height: 14px;
   font-size: 11px;
   text-align: left;
}

.formentry {
   padding: 6px;
}

.formentry.active {
   padding: 5px;
   border: 1px solid #f3e793;
   background-color: #fff3c6;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
   behavior: url(css/PIE.htc);
}

.formentry p {
   font-size: 10px;
   line-height: 14px;
   height: 2em;
   margin: 0px;
   padding: 0px;
   vertical-align: baseline;
    visibility: hidden;
}

.formentry.active p {
    visibility: visible;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
   $('.formentry input, .formentry select').focus(function() {
      $body = $(this).closest('.formentry').addClass('active');
   });
   
   $('.formentry input, .formentry select').blur(function() {
      $body = $(this).closest('.formentry').removeClass('active');
   });
});
</script>
</head>
<body>
<form id="register" action="?action=register" method="post">         
   <div class="formentry">
      <p class="message">first name</p>
      <input type="text" name="firstname" id="firstname" alt="first name" />
   </div>
   <div class="formentry">
      <p class="message">last name</p>
      <input type="text" name="lastname" id="lastname" alt="last name" />
   </div>
   <div class="formentry">
      <p class="message">Street</p>
      <input type="text" name="street" id="street" alt="street" />
   </div>
</form>
</body>
</html>

Author:  jason [ Mon Jul 19, 2010 7:18 am ]
Post subject:  Re: box drawn on top of content

Interesting issue, thanks for reporting it (and for providing the testcase, that's very helpful). I'm not sure why it would be working right the first time and not the second, but hey, it's IE, so thing don't always make sense! ;)

I tried adding position:relative to .formentry.active in your testcase and that seems to make it behave.

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/