CODEWITHSUNDEEP
cssdebugginginternet-explorer
Brian
Brian

Reputation: 3958

CSS HasLayout IE7 Bug

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?!

Upvotes: 1

Views: 1121

Answers (2)

thirtydot
thirtydot

Reputation: 228222

@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.

Upvotes: 2

sweetroll
sweetroll

Reputation: 176

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!

Upvotes: 3

Related Questions