/    Sign up×
Community /Pin to ProfileBookmark

IE CSS Rendering Problem

Copy linkTweet thisAlerts:
May 04.2011

Hi,

I’m using IE7 – as we have to be backward compatible.

I need to be able to:

1) store an element in memory …
[B]entityItemValues = document.getElementById(‘entityItemValues’);[/B]

2) temporarily remove it …
[B]document.body.removeChild(entityItemValues);[/B]

3) and later add it back again …
[B]if (entityItemValues) document.body.appendChild(entityItemValues);[/B]

The element has a CSS directive to provide a red border and that’s where the problem lies in IE. When the element is returned it does not have the red border.

This is the bit I find quite bizarre – if I minimise the browser, and then maximise it, the red border suddenly appears.

What’s going on? I’d appreciate any help.

Cheers.

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebGeezerauthorMay 04.2011 — I just wanted to add that if I drag the browser off the screen, and back in place again, the same situation applies, i.e. the red border displays.

By the way, it works fine in Firefox.

Regards.
Copy linkTweet thisAlerts:
@KorMay 04.2011 — Use a "clone" (created with the [B]cloneNode()[/B] method). And use a CSS class.
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;style type="text/css"&gt;
#mydiv {
border:solid 1px #ff0000;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
var clone;
function cloneElement(element){
clone=element.cloneNode(true);
}
function removeElement(id){
var element=document.getElementById(id);
cloneElement(element)
element.parentNode.removeChild(element)
}
function restoreElement(parentID){
var parent=document.getElementById(parentID);
parent.appendChild(clone);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
&lt;div id="mydiv"&gt;my div&lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;br&gt;
&lt;div onclick="removeElement('mydiv')"&gt;Remove the DIV&lt;/div&gt;
&lt;div onclick="restoreElement('container')"&gt;Restore the DIV&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@WebGeezerauthorMay 04.2011 — Kor,

Thanks very much for taking the time to supply an excellent solution.

Didn't know about the CloneNode method. Very interesting to learn about the option to 'deep' clone the sub-tree as well.

Kind Regards.
×

Success!

Help @WebGeezer spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...