1

First off, I've read the following articles, just to brush up on the issues and I've dealt with them before:

Position Relative / Absolute / Fixed in IE

http://www.brunildo.org/test/IE_raf3.html

http://www.satzansatz.de/cssd/onhavinglayout.html

For some people with these problems might be new and the above will help, however in my case, I have the following in All non-IE browsers:

http://cl.ly/4n6F [image]

And the following in IE7

http://cl.ly/4nYm [image]

I understand that I need to trigger hasLayout = true on the large brown <div id="footer"> because it is position: relative which is triggering hasLayout = false in IE7. I've tried zoom: 1, and display: inline-block in attempt to trigger hasLayout on #footer but no success.

Here is the site live for your viewing pleasure: http://hannahnour.co

The cause of the disappearing div is that hasLayout is currently false on #footer.

How can I trigger it?!

Brian
  • 3,920
  • 12
  • 55
  • 100

2 Answers2

3

Its not a hasLayout issue. You need to validate your markup. It looks like you are self closing a tags and then adding a closing tag again which is making IE bug out. You also have an extra closing div tag which will definetaly break your layout.

Browsers like Firefox and Chrome and smart enough to render there issue correctly but its still a good idea to have valid code.

Hope this helps!

sweetroll
  • 176
  • 2
  • 10
  • Thanks for your help @thirtydot above was able to figure it out, although I did fix those nesting issues as well, thanks for that! – Brian Feb 24 '11 at 03:19
2

@sweetroll is correct, this has nothing to do with hasLayout.

The problem is inside /wp/wp-content/themes/custom_bellydance_theme/style.css.

You have two lines (specifically, lines 354 and 438) which contain a filter rule:

filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', /* IE6,IE7 */ 
                      M11=0.9986295347545738, M12=0.05233595624294383, M21=-0.05233595624294383, M22=0.9986295347545738);

Seemingly, any CSS after either of those lines is not parsed by IE7.

If you remove both of those lines, your site is fixed in IE7.

I'm not sure what the actual problem is with those lines. I tried removing the /* */ comments inside those lines, but that made no difference.

I'd suggest the best way to proceed is just to forget about having the rotated date hover things on IE6/7. It's not that important an effect, and it's only in two unimportant browsers. If that's unacceptable, you could make another question to see if anybody else knows the reason for this (if you do, make sure you link to this question).

I'm glad you decided to link to your site.

It would've otherwise been impossible for anyone to figure this out.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Indeed I'm glad I posted a link... Many thanks to both you and @sweetroll. You're right in that it was incredibly difficult to debug. Hat's off to you! – Brian Feb 24 '11 at 03:18
  • It was no problem. I learned something new on this one: I'd never before come across the situation where a `filter` rule was breaking IE7. – thirtydot Feb 24 '11 at 03:20
  • Wow, I've spent hours trying to figure out a similar bug with IE7 positioning a div weirdly (and then moving the div when I click it), and it seems to be related to a "filter" line of my CSS. Thanks. – Ryan Oct 01 '12 at 18:27
  • Oops, that actually didn't solve it. http://stackoverflow.com/a/1794381/470749 did. Thanks for your post anyhow! – Ryan Oct 01 '12 at 19:16