I continue working on my JavaScript UI library and today I had encountered an interesting problem. If an element is made invisible via “display: none” CSS statement in some instances IE will report it's “offsetWidth” and “offsetHeight” as 0. This behavior can make exact positioning of the element problematic if positioning takes into account object’s dimensions.
I’m sure I’m not the first one to find it, and probably not the last one. I couldn’t find any documentation on this "feature" of IE anywhere, so to help people who might get this type of behavior I’ll describe what I’ve done to solve the problem. Instead of using “display: none” I’m using “visibility: hidden”. They are similar, but not exactly the same. “visibility: hidden” does hide the element, but keeps it in the page flow of the document. Where there was supposed to be an element, there’s now a blank space. To eliminate that effect I apply the following CSS to the element: "{ position: absolute; top: 0; left: 0 }". There’s nothing to this trick and I’m sure it has been done before. I’m also not sure if this is the best solution, but as much as I've tested it, it seems to works fine.
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5