Javascript causing CSS margin bug in IE

[MCM]

I have a page in my app that contains a table which is updated dynamically
with AJAX. Not an AJAX panel, just traditional javascript data access.

When the page loads, it correctly uses CSS to apply margin-top on several
elements on the page. Then when the table is updated with data, the margins
disappear - even on elements other than the table. If I simply use my mouse
to select some text on the page, the margins are reapplied. This only happens
in IE.

If you can't figure out how to fix this bug, perhaps there is a workaround
where I can use javascript to force the CSS to reapply at the end of the data
access?

 

[Gregory A. Beamer]

I have a page in my app that contains a table which is updated
dynamically with AJAX. Not an AJAX panel, just traditional javascript
data access.

When the page loads, it correctly uses CSS to apply margin-top on
several elements on the page. Then when the table is updated with
data, the margins disappear - even on elements other than the table.
If I simply use my mouse to select some text on the page, the margins
are reapplied. This only happens in IE.

If you can't figure out how to fix this bug, perhaps there is a
workaround where I can use javascript to force the CSS to reapply at
the end of the data access?

If you can get the elements with margins outside of hte update panel, it
should solve the issue. If this is impossible, you will need to examine
the source and find what is not being applied. One possible solution is
to switch from CSS classes to tags within classes.

..myInnerClass
{
}

becomes something like

..myClass.p
{
}

for example.

Peace and Grace,

 

[MCM]

If you can get the elements with margins outside of hte update panel, it

should solve the issue. If this is impossible, you will need to examine
the source and find what is not being applied.

There is no update panel. Just a table that I am adding rows to as I receive
data in javascript.

One possible solution is
to switch from CSS classes to tags within classes.

..myInnerClass
{
}

becomes something like

..myClass.p
{
}

Sorry, I don't quite understand...

 

[Gregory A. Beamer]

There is no update panel. Just a table that I am adding rows to as I
receive data in javascript.

Let me make sure I have this correct. You are peforming all of your own
AJAX transactions and not using the ASP.NET AJAX controls?

if so, you are in control of the CSS applied to elements you are
updating.

If not, you have an update panel somewhere or the AJAX would not work.
If the update panel is in a master page, this is a moot point.

Sorry, I don't quite understand...

//CSS
..myclass1
{
}

..myclass2
{
}

<!-- tags -->
<div class="myclass1">
<div class="myclass2">
</div>
</div>


can become

//CSS
..myclass1
{
}

..myclass1.div
{
}

<!-- tags -->
<div class="myclass1">
<div>
</div>
</div>

In this way, if the inner DIV is updated, you do not have to reapply the
myclass2 class to the div. This is probably a bad example, as the
elements with classes applied (if classes are, in fact, applied) are
probably not divs.

NOTE: Hit view source and save the source. Then update with AJAX and do
it again. You can then compare the sources and find what portion of the
page needs a bit of tweaking.

Peace and Grace,

 

[MCM]

Let me make sure I have this correct. You are peforming all of your own

AJAX transactions and not using the ASP.NET AJAX controls?
Yes.

if so, you are in control of the CSS applied to elements you are
updating.

Exactly. And they are applied correctly in browsers other than IE. Moreover,
they are applied correctly BEFORE the javascript is executed in IE. In fact,
if I hit Ctrl-F5, about 1/4 times they are applied correctly AFTER the
javascript executes. To me this means that if the javascript executes fast
enough and completes before IE thinks it has finished with the HTML/CSS
document, then it is fine. My guess is, I need to find a way to force IE to
re-apply the CSS after the javascript completes.

 

[Vince Xu [MSFT]]

Hello,

Could you please post some demo or codes? So that I can reproduct it. I
plan to use Fiddler/Web Development Helper to check the css style changed.


Sincerely,

Vince Xu

Microsoft Online Support


==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

MSDN Managed Newsgroup support offering is for non-urgent issues where an
initial response from the community or a Microsoft Support Engineer within
2 business day is acceptable. Please note that each follow up response may
take approximately 2 business days as the support professional working with
you may need further investigation to reach the most efficient resolution.
The offering is not appropriate for situations that require urgent,
real-time or phone-based interactions. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================


--------------------
| Thread-Topic: Javascript causing CSS margin bug in IE
| thread-index: Aco1b6hWxKLq0DKtQUKUzpk3d5vPfA==
| X-WBNR-Posting-Host: 216.80.121.82
| From: =?Utf-8?B?TUNN?= <[email protected]>
| References: <[email protected]>
<[email protected]>
<[email protected]>
<[email protected]>
| Subject: Re: Javascript causing CSS margin bug in IE
| Date: Mon, 14 Sep 2009 12:15:01 -0700
| Lines: 16
| Message-ID: <[email protected]>
| MIME-Version: 1.0
| Content-Type: text/plain;
| charset="Utf-8"
| Content-Transfer-Encoding: 7bit
| X-Newsreader: Microsoft CDO for Windows 2000
| Content-Class: urn:content-classes:message
| Importance: normal
| Priority: normal
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.3790.4325
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| Path: TK2MSFTNGHUB02.phx.gbl
| Xref: TK2MSFTNGHUB02.phx.gbl
microsoft.public.dotnet.framework.aspnet:92082
| NNTP-Posting-Host: tk2msftibfm01.phx.gbl 10.40.244.149
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| > Let me make sure I have this correct. You are peforming all of your own
| > AJAX transactions and not using the ASP.NET AJAX controls?
|
| Yes.
|
| > if so, you are in control of the CSS applied to elements you are
| > updating.
|
| Exactly. And they are applied correctly in browsers other than IE.
Moreover,
| they are applied correctly BEFORE the javascript is executed in IE. In
fact,
| if I hit Ctrl-F5, about 1/4 times they are applied correctly AFTER the
| javascript executes. To me this means that if the javascript executes
fast
| enough and completes before IE thinks it has finished with the HTML/CSS
| document, then it is fine. My guess is, I need to find a way to force IE
to
| re-apply the CSS after the javascript completes.
|
|

 

[Gregory A. Beamer]

Exactly. And they are applied correctly in browsers other than IE.
Moreover, they are applied correctly BEFORE the javascript is executed
in IE. In fact, if I hit Ctrl-F5, about 1/4 times they are applied
correctly AFTER the javascript executes. To me this means that if the
javascript executes fast enough and completes before IE thinks it has
finished with the HTML/CSS document, then it is fine. My guess is, I
need to find a way to force IE to re-apply the CSS after the
javascript completes.

You should be able to reapply at the end of the call, but I would check
the JavaScript lib you are using. Many have a function to wait until the
call is complete before finalizing the HTML output. I did some stuff
with another AJAX lib a few years back and we had some issues with it
attempting to process the HTML prior to finishing the call. While not
the same problem you are having, the solution may be the same, which was
to use the built in "wait" method (the call was essentially when x is
done, process). The docs for the lib should have some info on this, if
it is there.

If your AJAX is completely custom, you will have to institute this on
your own or add a "re-CSS" function at the end of the call.

Peace and Grace,

 

[MCM]

I was able to fix it with a little hack. I took the outer div containing the
problem elements and did basically div.hide().show(); That forces the browser
to recalculate and luckily does not cause any flickering for the user.

Thanks for your help.