IE7 is crap.

[TheFilmGod]

I stopped supporting IE6 awhile ago, and it seemed like that was the answer of all my worries about stupid Internet Explorer. I just used IE7 and everything seemed perfect! Unfortunately, the wrath of IE came back and it bit me in the ass hard.  :-\

 

IE7 is garbage.

 

Okay here's my problem:

 

Normal DEFAULT css:

#expand {
position:fixed; top:0; left:0; width:100%; height:100%;
}
#expand .middle {
height: 100%; display:table; margin:0 auto;
}
#expand .inner {
vertical-align:middle; display:table-cell;
}

 

Please notice "height: 100%" that is the problem...

 

IE css override:

<!--[if lte IE 7]>
<style>
  .middle { height: auto; position:absolute; top:50%; left: 50%; }
  .inner { height: auto; position:relative; top:-50%; left:-50%; }
</style>
<![endif]-->

 

notice the height: auto;?

 

.... So the problem is IE7 uses "height: 100%" instead of using "height: auto". This screws things up, as it NEEDS auto height to have my "hack" to work - this hack is an IE behavior hack, not an html/css hack.

 

thanks for your help, in advance!

[s_ff_da_b_ff]

Film God your the one whos supposed to be answering the questions on asking!

[TheFilmGod]

I did a bit of investigation on the problem. The problem does not lay in my code, it is IE7's behavior.

 

I was trying to center a div vertically and horizontally without a specified height. This is rather complex, so I won't get into that, but as usual IE7 did not support "vertical-align:middle;" in a div with display: table-cell. To solve this issue I created IE7 only code and tried exploiting one of its bugs. If you do top: 50% and then top:-50% in the child div you can make it center vertically. Unfortunately, using height: auto; deactivates the bug. I still did not find a solution.

 

This is probably the most difficult css problem I ever stumbled on.

[haku]

It looked difficult. I had and have no solution for it. Let us know if/when you figure one out.

[TheFilmGod]

To solve this issue, I used css hacks as I can not have IE7 see some other style and override it, as this disactivates the bug. I hate using hacks, but this is the only way to solve it.

 

/* Modern Browsers, not IE7 */

html>/**/body #expand {
position:fixed;
top:0;
left:0;
width: 100%;
height: 100%;
opacity: .95;
overflow: 
}
html>/**/body #expand .middle {
display:table;
margin: 0 auto;
height: 100%;
}
html>/**/body #expand .inner {
vertical-align:middle;
display:table-cell;
}

/* Only IE7 */
*:first-child+html #expand {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
*:first-child+html #expand .middle {
position:absolute;
top:50%;
left: 50%;
}
*:first-child+html #expand .inner {
position:relative;
top:-50%;
left:-50%;
}
*:first-child+html #expand .main {
margin: -3px 0 0 0;
}

[haku]

Why not use conditional comments that only target IE7?

[TheFilmGod]

Why not use conditional comments that only target IE7?

 

I tried doing that Haku, but unfortunately, this screws things up in IE7. If I were to use conditional statements, I would need to set the height: 100%; then in the IE7 override state "height: auto;" - but this disactivates the weird behavior in IE7. This is the only way I could get it to work. Trust me, I would never use "hacks" if I really didn't need to.