Internet Explorer 7 Override Functionality
Internet Explorer 7 provided many fixes for the innumerable problems that plagued IE 6, but it still doesn't work the same way as most other browsers. In this stylesheet, much like the one for IE 6, special styles are applied that are only read by IE 7, thanks to the conditional comment (see "Relevant HTML"). Below is a basic description of the styles applied. I've left the comments in the stylesheet so that you can read the specifics if you so desire.
First of all, IE 7 will work with Hoverbox, but requires some different styles, so that's what the first few styles are. Like IE 6, IE 7 also requires the special display type "inline-block" to correctly do source ordering. Finally, the pre tag requires different styles in order to act the same as other browsers.
Relevant HTML
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="../resources/css/ie7Hacks.css" media="screen" /><![endif]-->
Relevant CSS
/*------------------------------------------------------------*/
/* Hoverbox fix for IE 7. */
/*------------------------------------------------------------*/
.hoverbox a
{
position:relative;
}
.hoverbox a:hover
{
display:block;
font-size:100%;
z-index:1;
}
.hoverbox a:hover .preview
{
top:-38px;
left:-50px;
}
.hoverbox li
{
position:static;
}
/*------------------------------------------------------------*/
/* Miscellaneous fixes. */
/*------------------------------------------------------------*/
/* Fix for all kinds of weird problems IE has with putting #navigation below #content in the source code. */
#midpage
{
display:inline-block;
}
/* IE 7 handles pre styling differently than even IE 6. */
#content pre
{
padding-bottom:2em;
overflow:visible;
overflow-x:auto;
overflow-y:hidden;
}