Forums
View unanswered posts | View active topics It is currently Thu Apr 17, 2014 12:26 pm



Reply to topic  [ 2 posts ] 
 box drawn on top of content 
Author Message

Joined: Mon Jul 19, 2010 6:52 am
Posts: 1
Post 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>


Mon Jul 19, 2010 6:56 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post 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.


Mon Jul 19, 2010 7:18 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 2 posts ] 

Who is online

Users browsing this forum: Google [Bot] and 5 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.