<div class="greenBorder" style=" #position: relative; #top: -50%">
I'm familiar with the # hack as it seems to help me differentiate between IE7 and IE8. I know this isn't exactly the best standards way to go, but it works. What exactly is this hack and what is a standards based way of implementing it?
What I'm trying to do is to center vertically using the same markup in both IE7 and IE8. I know I can center vertically using table-cell in IE8 and using positioning in IE7. I'm trying to figure out a way to do this without changing the markup. Thanks in advance.
Rather than using a hack to fix issues in IE7, I find it better to use conditional comments instead and supply a separate stylesheet to correct issues.
Use the following statement in the head of the page after your main stylesheet:
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]-->
Then add whatever positioning rules you require in the ie7 stylesheet.
The mark-up can then stay the same, and you don't need to use hacks to target IE7 :D