Hello all,

 I am not traditionally an HTML/CSS guru, I'm learning, and garnering wisdom as I go, however I'm stumped by the following issue. I have some expandable divs that work great in every browser but IE 7. I will include their style, but by the following pictures you can see it working in Chrome/FF:

working in FF/Chrome

as you can see the buttons get pushed down and the +/- sign along with the expanded and non-expanded divs are aligned where they should be. 95working in FF/Chrome

However, in IE 7, things get all crazy you can see a demo here: 95IE crazyness

The buttons do not get pushed down ("Save for Later" and other buttons are not moving), the divs become misaligned (the +/- button to the following div gets pushed up).

Here is the computed layout for the expanded div, more info may be needed, let me know. Thank you very much for your help.

Layout: position static

display table-cell

visibility visible

z-index auto

overflow-x visible

overflow-y visible

white-space normal

clip auto

float none

clear none

4 answers


Okay, at a guess I'd say the problem is that IE7 doesn't do CSS tables.

Support for display:table only comes in in IE8



Answered almost 6 years ago by Tony Crockford
  • Haha, looks like we got to the same conclusion at about the same time. :) Ktash almost 6 years ago
Ktash 1851

display table-cell

Likely, that is your issue. According to the compatability tables at quirksmode, IE < 7 does not support display: table-* properties. Maybe if you let us know what you are trying to accomplish with setting it to display: table-cell, then we can help solve that issue in a cross-browser manner. Or you can use conditional comments to target IE 7 and fix it that way, but obviously that may require a bit of work and also makes it a bit tougher if you want to change something since you'll have two versions of the code.

Answered almost 6 years ago by Ktash

It's very difficult to help you when all you have given us is screen shots and text, it's a bit like asking an auto mechanic what's wrong with my car and showing him a picture of it.

Can you link to a page that demonstrates the problem?

either on your development site, or by creating a testcase and uploading it where we can look at the source code and test it for ourselves.

Then we could do more than guess at what might be the problem.

Answered almost 6 years ago by Tony Crockford

I can't as is it proprietary data. I know that it would be better served with more information, I'm sorry that I can't show more. I had hoped this was a known issue and easily answerable.

Possibly could recreate on a different page with a test case, looking into that now. Thanks for taking a look.

Answered almost 6 years ago by SaraChipps
  • if you could maybe just post the CSS for when the div is expanded (maybe not just the computed styles), that would also be a helpful alternative. Ktash almost 6 years ago