Forums
View unanswered posts | View active topics It is currently Fri Aug 01, 2014 3:49 am



Reply to topic  [ 5 posts ] 
 jqueryUI/Dialog & CSS3PIE - erratic positioning problem IE7 
Author Message

Joined: Wed Feb 16, 2011 9:15 am
Posts: 8
Post jqueryUI/Dialog & CSS3PIE - erratic positioning problem IE7
Hi

I'm having a positioning problem in the IE7 in Win XP that doesn't occur in IE8.

[update 1]
I did some testing and the problem seems to start when the content is loaded via ajax and placed in a jQueryUI Dialog Box. The ajax part is not important as it appears but the fact that the content part with the css3pie elements is displayed inside the dialog box that gets styled by the jQueryUI Dialog Function seems to be the cause of the problem.

Any ideas?
[update 2]
I could get a step closer to a solution.

After setting the parent to position:relative, the IE7 shows them in correct order one after the other but still out of place.
After doing some reading in this forum, I found out that it might have to do with the way the htc works. As the elements get drawn early (before the jQueryUI dialog styling etc) they would be in the right position if it wasn't for jQuery.

I could switch to the pie.js but as the IE Developers Toolbar appears to fix the problem there seems to be a way to redraw the elements and I'd like to know/understand how the IE Dev Toolbar does it (and why the IE8 does it automatically). That could be a way to fix positioning bugs via a little addition to the js that causes the problem.

Maybe this is a way/workaround for other people in this community as well.
[/update]


Image
Image


While searching for the cause, I found out that opening AND closing the "IE Developer Toolbar" will fix the bug (except for the submit button) until I reload the page.
Bug -> I open the dev toolbar = Bug gone -> reload = Bug returns -> I close the toolbar = Bug gone again...
Image


Trying to reproduce the bug (using the navigation and then the back button) parts of the form were displayed correctly:
Image


This is the markup:
Code:
<div id="contact_box">
  <form id="contact_form" method="post" action="">
    <fieldset class="info_fieldset">
      <div id="fields">
        <label for="f_name">Name</label>
          <input class="textbox" type="text" name="name" id="f_name" value="">
        <label for="f_email">E-Mail</label>
          <input class="textbox" type="text" name="email" id="f_email" value="">
        <label for="f_subject">Betreff</label>
          <input class="textbox" type="text" name="subject" id="f_subject" value="">
        <label for="f_message">Nachricht</label>
          <textarea class="textbox" name="message" id="f_message" rows="1" cols="55"></textarea>
        <input class="submit button" type="submit" name="submit" value="Nachricht senden" title="Kontakformular abschicken">
      </div>
      <ul id="note" class="hidden">
      </ul>
    </fieldset>
  </form>
</div>


This is the css for the input, text field and submit button:
Code:
#contact-wrapper {
  border:1px solid #e2e2e2;
  padding:20px;
  margin:0 20px 20px;
  position:relative;
}

#contact_box input, #contact textarea {
  position:relative; background: none repeat scroll 0 0 #fff;
  border: 1px solid #ddd;
  margin: 6px 0 20px;
  padding: 8px;
  width: 210px; 
  color: #555;
  font-size: 14px;
     -moz-box-shadow: 0 0 4px #aaa;
  -webkit-box-shadow: 0 0 4px #aaa;
          box-shadow: 0 0 4px #aaa;
  behavior: url(css/PIE.htc);
}

#contact_box input.submit {
  border: medium none;
  color: #eee;
  margin: 0;
  text-transform: uppercase;
  width: 170px;
  float:left;
     -moz-border-radius: 4px 4px 4px 4px;
  -webkit-border-radius: 4px 4px 4px 4px;
          border-radius: 4px 4px 4px 4px;
  background: #a6a6a6 repeat scroll 0 0;
  background-image: -moz-linear-gradient(25% 75% 90deg, #7A7A7A, #a6a6a6);
  background-image: -webkit-gradient(linear, 0 75%, 0 25%, from(#7A7A7A), to(#a6a6a6));
  background-image: linear-gradient(25% 75% 90deg, #7A7A7A, #a6a6a6);
  behavior: url(css/PIE.htc); }




Here is the link to the test page
http://demo.konrad-arndt.de/public-demo/#/home.php#contact


I'm grateful for everything that points me in the right direction let alone solve the problem.

Konrad


Last edited by KADD_lancer on Mon Feb 28, 2011 7:05 am, edited 1 time in total.



Fri Feb 25, 2011 7:44 am
Profile

Joined: Wed Feb 16, 2011 9:15 am
Posts: 8
Post Re: jqueryUI/Dialog & CSS3PIE - erratic positioning problem
[update]
I did some testing and the problem seems to start when the content is loaded via ajax and placed in a jQueryUI Dialog Box. The ajax part is not important as it appears but the fact that the content part with the css3pie elements is displayed inside the dialog box that gets styled by the jQueryUI Dialog Function seems to be the cause of the problem.

Any ideas?
[/update]


Mon Feb 28, 2011 3:34 am
Profile

Joined: Wed Feb 16, 2011 9:15 am
Posts: 8
Post Re: jqueryUI/Dialog & CSS3PIE - erratic positioning problem
I could get a step closer to a solution.

After setting the parent to position:relative, the IE7 shows them in correct order one after the other but still out of place.
After doing some reading in this forum, I found out that it might have to do with the way the htc works. As the elements get drawn early (before the jQueryUI dialog styling etc) they would be in the right position if it wasn't for jQuery.

I could switch to the pie.js but as the IE Developers Toolbar appears to fix the problem there seems to be a way to redraw the elements and I'd like to know/understand how the IE Dev Toolbar does it (and why the IE8 does it automatically). That could be a way to fix positioning bugs via a little addition to the js that causes the problem.

Maybe this is a way/workaround for other people in this community as well.


Mon Feb 28, 2011 7:05 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: jqueryUI/Dialog & CSS3PIE - erratic positioning problem
Sorry for the delay in responding.

It looks like the issue you're running into is due to a problem in IE where it sometimes does not fire the onmove and onresize events when it should. IE8 is actually the worst offender in this regard in general, and because of that PIE manually polls each element a few times a second to see if its size and position have changed; this is why IE8 is behaving better for you.

IE7 (and 6) is generally much better, but it still seems there are some cases where the events don't fire, particularly when content is added dynamically to the page by setting innerHTML, like jQuery often does. It sounds like this is what you're running into.

The reason opening the developer toolbar causes the refresh is because it invokes the window.onresize handler which checks all elements for movement.

So basically what you need is a way to force IE7 to check the elements for movement. There is not currently an API method for this, but you might be able to trigger an onresize event on the window via JS.

I am also currently working on adding a custom CSS property (something like -pie-poll:true) which you could set on elements to force IE6 and 7 to do the same polling that IE8 does by default. It's a big hammer but it's become clear that it's needed in some cases.


Sun Mar 06, 2011 8:53 pm
Profile

Joined: Thu Mar 17, 2011 6:57 am
Posts: 1
Post Re: jqueryUI/Dialog & CSS3PIE - erratic positioning problem
Hi,

I'm having the same problem. The box doesn't appear where it should.

Did you eventually find a way to get around this ?

EDIT: nevermind, I managed to get rid of the problem by applying a margin-bottom on the previous element instead of a margin-top on the box-shadowed element.


Thu Mar 17, 2011 6:59 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 5 posts ] 

Who is online

Users browsing this forum: Google [Bot], Yahoo [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.