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]
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...
Trying to reproduce the bug (using the navigation and then the back button) parts of the form were displayed correctly:
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
Forums
