IE7 not properly redrawing elements with position: relative

Posted Almost 13 years ago. Visible to the public.

If you manipulate the DOM with JavaScript and your page contains nested elements with position: relative, chances are Internet Explorer 7 will not properly move to the right position.

I have not found a fool-proof workaround, but these are options that have worked for me:

  • Try to lose some position: relative attributes, so they do not nest. This is often impossible, though.
  • Force the correct redrawing of the elements using JavaScript. Adding a bogus class ($(element).addClass('touch')) seems to suffice.
  • Try to give the offending elements overflow: hidden.
Tobias Kraze
makandra.de
Say thanks
Last edit
Over 11 years ago
License
Source code in this card is licensed under the MIT License.

Related cards:

PSA: When Redis (on LRU noeviction) reaches memory limits, keys with (any) expiry are removed, and keys without are not

In production, you (or your ops team) should configure a maximum number of bytes that Redis can use to store data (maxmemory setting).
They may even want to set maxmemory-policy to noeviction to avoid keys being removed that you want to keep...

How to transition the height of elements with unknown/auto height

If you want to collapse/expand elements with dynamic content (and thus unknown height), you can not transition between height: 0 and height: auto.

Doing it properly, with modern CSS features

In the past, you might have resorted to bulky J...

CSS: Opacity is not inherited in Internet Explorer

Non-static elements will not inherit their parent's opacity in IE for no good reason. This can lead to unexpected behaviour when you want to fade/hide an element and all its children.

To fix it, give the parent element defining the opacity a non-...

Working with or without time zones in Rails applications

Rails supports time zones, but there are several pitfalls. Most importantly because Time.now and Time.current are completely different things and code from gems might use one or the other.

Especially configuring an application that cares only...

UI Sortable on table rows with dynamic height

UI sortable helps reordering items with drag 'n drop. It works quite fine.

Proven configuration for sorting table rows

When invoking the plugin, you may pass several options. This set is working fine with ...

Capybara: Finding invisible elements and how to test that an element is not visible

When Capybara locates elements in the DOM, by default it allows only accessing visible elements -- when you are using a driver that supports it (e.g. Selenium, not the default Rack::Test driver).

Consider the following HTML:

<div class=...

Careful: `fresh_when last_modified: ...` without an object does not generate an E-Tag

To allow HTTP 304 responses, Rails offers the fresh_when method for controllers.

The...

Beware: Nested Spreewald patiently blocks are not patient

Note: The behaviour of Spreewald's within step is as described below for version < 1.9.0; For Spreewald >= 1.9.0 it is as described in Solution 1.

When doing integration testing with cucumber and selenium you will often encounter problems ...

CSS3 Pie: Element not properly redrawn

Pie sometimes does not properly redraw elements upon changes. This often happens when the change comes from somewhere further up the DOM.

Consider something like:

<ul>
  <li class="active"><div class="content">Act...

JavaScript without jQuery (presentation from 2019-01-21)

Summary

  • We want to move away from jQuery in future projects
  • Motivations are performance, bundle size and general trends for the web platform.
  • The native DOM API is much nicer than it used to be, and we can polyfill the missing pieces
  • Un...
Posted by Tobias Kraze to makandra dev (2011-05-26 17:04)
This website uses short-lived cookies to improve usability.
or learn more