scriptygoddess

26 Oct, 2011

Disappearing absolute positioned elements in IE7

Posted by: Jennifer In: CSS|HTML

With IE6 nearly dead (although according to Microsoft – as of this writing, 9% of users worldwide still have this P.O.S. browser on their machines which, if you go by w3school's stats, is more than Safari's usage. Then again, w3schools has ie6 pinned at around 1% so maybe there's still hope) Or not. IE7 and all of it's annoying issues will be happy to serve up your frustrations.

I recently ran into the most bizarre bug. It takes a 'perfect storm' to create – one that I hadn't created before in hundreds (thousands?) of HTML files I've worked on. To recreate you need an absolute positioned element – then an element that's floated right, then another element that is positioned relative. A little odd I know, but in a layout I was working on – this was the scenario I ended up with. The result: The absolute positioned element was just GONE from the page.

Take a look at the real basic example here (If you have IE7, that's where you'll see the problem.) Here's what it's supposed to look like:

Here's what IE7 shows

Notice the missing text at the top? In my layout that was a company's logo. Lovely.

The fix? Equally as stupid. A static DIV after the absolute positioned element and all is good. If you have IE7 you can see the fixed page here.

Many hairs were pulled in the discovery and fixing of this IE7 bug. Here's to hoping I can save you and your hair some pain. :)

2 Responses to "Disappearing absolute positioned elements in IE7"

1 | Joseph Scott

October 26th, 2011 at 12:59 pm

Avatar

For browser versions being used in the wild I like gs.statcounter.com which currently puts IE6 usage at 3.13% worldwide – http://gs.statcounter.com/#browser_version-ww-monthly-201107-201109-bar

The good news is IE7 is only 5.1%, so it shouldn't be too far behind in getting kicked out the door.

2 | Balazs

November 1st, 2011 at 9:17 am

Avatar

Not sure if this is along the same lines, but ie7 has some issues with "haslayout". I had a bug when I used jquery's slideDown() function to reveal a div… it would slide down and then immediately disappear in IE7..

The fix was to add the css rule:

zoom: 1

to the container, which essentially gives it "haslayout"

That may work here as well.

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements