ansaurus

Question

When does IE7 recompute styles? Doesn't work reliably when a class is added to the body.

Answer 1

A:

Try this:

.showCommentsRight .rightSide { display:block !important; width:50%; }
.showCommentsRight .leftSide { display:block !important; width:50%; }

Shuriken 2010-03-16 22:27:16

IE doesn't understand `!important`.

Pekka 2010-03-16 22:28:43

IE7 and higher should understand it. Since the issue here is with IE7, it's worth a shot.

keithjgrant 2010-03-16 22:32:05

Doesn't work. I'm kind of glad, because I didn't want to leave any bang-important's in my code.As I said in the edit, this all works fine if the class is applied to a wrapping element by hand, ahead of time, rather than JS--so the inheritence is fine.

Simple As Could Be 2010-03-16 22:33:37

Why not `.showCommentsRight .rightSide, .showCommentsRight .leftSide { display:block !important; width:50%; }` instead?

Eli Grey 2010-03-17 00:43:55

Am I missing a subtlety here, Eli, or are you just talking about grouping the selectors? The rule doesn't achieve the desired effect so grouping it differently doesn't help. Although I'd agree that if this worked yours would be the simpler way to write it.

Simple As Could Be 2010-03-17 14:07:47

I don't know where you heard IE doesn't understand `!important`. Even IE6 understands `!important`. I use `!important` to work around some of IE6's specificity quirks, as a matter of fact.

Christopher Parker 2010-03-18 20:55:48

Answer 2

A:

Close to a solution here, maybe someone else can bring it the last bit of the way.

The page behaves as expected if:
- If the style is assigned to the body by hand instead of using javascript.
(not an acceptable solution, but worth noting)
- If the elements that IE7 isn't updating (the .rightSide's) are manually pants-kicked with something like $(".rightSide").hide().show();

That second solution is darn close to workable, except that I actually am looking for show hide behavior out of my flag, so I'd want a less intrusive thing to change that will make IE refresh the styles.

Simple As Could Be 2010-03-17 14:13:31

Answer 3

+1 A:

Sounds a bit like a problem I've had with ie7, where the DOM is updated but the pixels on screen is not (sometimes hovering the mouse over it triggers redraw). I found a dirty hack that worked in my case (spesudo-javascript):

//Just after changing the css class:
if(isIe7()){
    addAnEmptyDivAboveTheChangedElement();
    removeTheEmptyDivFromTheDom();
}

For some reason this brutal hack of adding and removing an element (it might even work if you add and remove it anywhere) causes ie7 to repaint the document. It may cause a flicker though and it's an expensive hack since it forces a full repaint in an already slow browser, that's why i only does so if I'm sure it's ie7 (to not slow every other browser just because ie7 is stupid).

Can't promise it will work, though... When I tried to find a solution to my problem I found lots of different hacks that didn't work. Fixing ie7's inconsistencies with javascript is pretty much trial and error woodoo. :)

PS: I see toggling display is allready suggested, it might work, or as in my case, it did not. I had to actually remove the element from the dom tree to make it work..

Stein G. Strindhaug 2010-03-18 08:35:48

This is right on the button. I ended up using: if ($.browser.class == "msie7") { _$thingToRefresh.addClass("kickIE").removeClass("kickIE");}If there were a less resource intensive way to do it, I'd use it but I didn't find anything.

Simple As Could Be 2010-03-19 01:39:42

Answer 4

A:

It seems like you're running into either an IE6/IE7 reflow/repaint issue or IE6/IE7 layout issue.

See http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ for a detailed and informative analysis of what triggers reflow, repaint, etc. Also see http://www.satzansatz.de/cssd/onhavinglayout.html to find out what causes an element in IE to "have layout".

You could trigger both "having layout" and a reflow by setting height: 1%;. This is known as the Holly hack, named after the first person to document it, Holly Bergevin.

Christopher Parker 2010-03-18 21:35:59

ansaurus

tags:

views:

answers:

When does IE7 recompute styles? Doesn't work reliably when a class is added to the body.

related questions