CSS + iframes + hover + IE = fail

No replies

Sat, 2011-05-14 18:11

Charred

Offline

Regular

Last seen: 11 years 12 weeks ago

Timezone: GMT-5

Joined: 2011-04-10

Posts: 22

Points: 35

Hello,

Goal: I would like to make a Table of Contents menu that slides out from the side upon hover. I'd like it to pull in an external HTML file into an iframe. The code I made worked OK in Firefox, but IE failed. In firefox, I can move my cursor around the entire box formed by the menu and select items, and only when moving the cursor out of the box does it close. In IE, the "pulled-out" menu doesn't want to stay "open" and allow me to move my cursor around on the "open" menu.

What I tried: It validated with no errors. I tried putting a div tag around it and using the "slidemenu" class on the div instead...that just caused IE to work on the div portion, but it would still flake when it hit the iframe within the div. I tried increasing the right margin on the iframe, but that also had no effect. I also tried the only fix I could find online but it had no effect. Is a bug in IE?

Solutions Limitations: My IT department will not let me use server-side coding (PHP in particular), so I'm using iframes pull in an external file menu. I'd like to avoid javascript as much as possible.

css file "Menu_layout.css" - relevant slidemenu class all the way on the bottom

@charset "utf-8";
 
body#page1 a#page1nav, 
body#page2 a#page2nav, 
body#page3 a#page3nav,
body#page4 a#page4nav,
body#page5 a#page5nav,
body#page6 a#page6nav,
body#page7 a#page7nav,
body#page8 a#page8nav,
body#page9 a#page9nav,
body#page10 a#page10nav,
body#page11 a#page11nav,
body#page12 a#page12nav,
body#page13 a#page13nav,
body#page14 a#page14nav,
body#page15 a#page15nav,
body#page16 a#page16nav,
body#page17 a#page17nav,
body#page18 a#page18nav,
body#page19 a#page19nav,
body#page20 a#page20nav,
body#page21 a#page21nav,
body#page22 a#page22nav
{
	font-weight:bold;
	font-size: 36px;
	color: #990000;
  }
 
body#page1 a.page1next, 
body#page2 a.page2next, 
body#page3 a.page3next,
body#page4 a.page4next,
body#page5 a.page5next,
body#page6 a.page6next,
body#page7 a.page7next,
body#page8 a.page8next,
body#page9 a.page9next,
body#page10 a.page10next,
body#page11 a.page11next,
body#page12 a.page12next,
body#page13 a.page13next,
body#page14 a.page14next,
body#page15 a.page15next,
body#page16 a.page16next,
body#page17 a.page17next,
body#page18 a.page18next,
body#page19 a.page19next,
body#page20 a.page20next,
body#page21 a.page21next,
body#page22 a.page22next
{
	visibility: visible;
	background-image: url(../Media/Images/Menu/LeftArrow.png);
/*	color:#FFFFFF;
	font-weight:bold;
	font-size: 14px; */
	font-size: 0px; 
	background-repeat: no-repeat;
	padding-top: 15px;
	padding-left: 5px;
	width: 67px;
	height: 51px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	float: left;
	position: fixed;
	z-index: 100;
	top: 50%;
	right: 5px;
}
body#page1 a.page1prev, 
body#page2 a.page2prev, 
body#page3 a.page3prev,
body#page4 a.page4prev,
body#page5 a.page5prev,
body#page6 a.page6prev,
body#page7 a.page7prev,
body#page8 a.page8prev,
body#page9 a.page9prev,
body#page10 a.page10prev,
body#page11 a.page11prev,
body#page12 a.page12prev,
body#page13 a.page13prev,
body#page14 a.page14prev,
body#page15 a.page15prev,
body#page16 a.page16prev,
body#page17 a.page17prev,
body#page18 a.page18prev,
body#page19 a.page19prev,
body#page20 a.page20prev,
body#page21 a.page21prev,
body#page22 a.page22prev
{
	visibility: visible;
	background-image: url(../Media/Images/Menu/RightArrow.png);
/*	color:#FFFFFF;
	font-weight:bold;
	font-size: 14px; */
	font-size: 0px; 
	background-repeat: no-repeat;
	padding-top: 15px;
	padding-left: 14px;
	width: 67px;
	height: 51px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	float: left;
	position: fixed;
	z-index: 100;
	top: 50%;
	left: 5px;
}
.nextprev {
	visibility: hidden;
}
 
.nextprev ul {
	position:relative;
}
.nextprev ul li {
	float:left;
}
 
#centeredmenu {
	float:left;
	width:100%;
	position:relative;
	margin-top: 3em;
	margin-bottom: 2em;
}
 
#centeredmenu ul {
	clear:left;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	left:50%;
	text-align:center;
}
 
#centeredmenu ul li {
	display:block;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	right:50%;
}
 
#centeredmenu ul li a {
	display:block;
	text-decoration:none;
	color:#8EB8CF;
	font-weight:bold;
	font-size: 36px;
	margin-right: 3px; 
	margin-left: 3px; 
}
 
#centeredmenu ul li a:hover {
	color:#1E72A0;
}
 
#centeredmenu a span{ 
	visibility: hidden;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	display:block;
	left:-4.25em;
	width:8.5em;
	color:#0060A9;
	text-align: center;
	font-size: 12px;
	margin-left: 1em;
	position: absolute;
	margin-top: -6.5em;
}
 
#centeredmenu a:hover span{
	visibility: visible;
	z-index: 25;
}
 
#centeredmenu ul li a.bar,
#centeredmenu ul li a.bar:hover {
	color:#FFFFFF;
	font-weight:bold;
	font-size: 11px;
	background-image: url(../Media/Images/Menu/MenuBar.png);
	background-repeat: no-repeat;
	padding-top: 5px;
	padding-left: 16px;
	width: 40px;
	height: 20px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 9px;
	margin-right: 10px;
	margin-left: 10px;
}
/* Begin Sliding Menu: Box in upper left slides out on hover. */
.slidemenu {
	float: left;
	position: fixed;
	border-width:5;
	border-color:#445599;
	border-style:solid;
	background-color: #CCCCCC;
	height: 350px;
	width: 160px;
	overflow: hidden;
	z-index: 75;
	left:-155px; /* Key: Moves box off screen. Adjust to change visible area */
	margin-top: 0px; 
	margin-left: 0px;
	margin-right: 160px; /* To make hover stable in IE browser? Didn't work, remove */
	padding: 5px; /* Must also change left to keep visible the same */
}
.slidemenu:hover {
	left:0px; /* Key: Moves content back on screen.*/
	margin-right: 0px; /* To turn off IE browser fix? Didn't work, remove*/
	background-position: 0 0; /* kicks IE 7. Didn't work, remove */
}
/* Didn't solve the problem so remove
div.slidemenu iframe {
	padding: 5px; /* Must also change left to keep visible the same */
/* 	width: 160px; /* keep same as .slidemenu */
/* 	overflow: auto;
}
End Sliding Menu */

CSS for general formatting - "Apprenticeship_layout"(I don't think there is anything relevant here, but including it just in case

@charset "utf-8";
html {
	background-color:#FFF5C6;
}
body {
	background-color:#FFFFFF;
	background-position: center;
	width: 650px;
	margin-right: auto;
	margin-left: auto;
	height: 100%;
	border: 5px ridge #0060A9;
	margin-top: 1em;
}
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-large;
	font-weight: bold;
	color: #0060A9;
	text-align: center;
	margin-top: 1.5em;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	background-color: #0060A9;
	letter-spacing: 0.15em;
	height: 1.5em;
	line-height: 1.5em;
	vertical-align: middle;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin-top: 1.5em;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
	margin-left: 1.5em;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
	font-weight: bold;
	color: #0060A9;
	background-color: #EAEAEA;
	line-height: 2em;
	top: 1em;
	padding-left: 1em;
	text-align: left;
	vertical-align: middle;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	margin-right: 2.5em;
	margin-bottom: 3px;
	margin-left: 2.5em;
}
h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	font-weight: bold;
	color: #0060A9;
	line-height: 1.5em;
	top: 1em;
	padding-left: 1em;
	text-align: left;
	vertical-align: middle;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
h5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: bold;
	color: #0060A9;
	line-height: 1.25em;
	text-align: left;
	font-variant: normal;
	font-style: italic;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	/*	border-bottom-color: #0060A9;*/
	border-bottom-color: #CCCCCC;
	width: 40%;
	margin-top: 3em;
}
p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: normal;
	color: #000000;
}
p.boxtext {
 text-align: center 
}
/* I don't remember what this was for*/
div.img
{
	margin: 2px;
	border: 1px dashed #666666;
	height: auto;
	width: auto;
	float: left;
	text-align: center;
}	
div.img img
{
	display: inline;
	margin: 3px;
	border: 1px solid #FFFFFF;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
	text-align: center;
	font-weight: normal;
	width: 11em;
	margin: 2px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #333333;
}
/*end unknown section*/
 
li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: normal;
	color: #000000;
	}
li.contentlist {
	position: relative;
	left: 1em;
	padding-bottom: 0.5em;
}
li.numbers {/*for the steps*/
	list-style-type: decimal;
	padding-bottom: 1em;
}
li.letters {/*for the steps*/
	list-style-type: lower-alpha;
	padding-bottom: 1em;
}
/* Not needed
iframe.middle {
	display: block;
	margin-left: auto;
	margin-right: auto;
	border: thin dashed #0060A9;
	padding: 15px;
}
*/
 
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto 
}
 
 
/*image link*/
a.img:link img {
	border: 2px solid #000000;
} 
a.img:visited img {
	border: 2px solid #000000;
} 
a.img:active img {
	border: 2px dotted #FF0000;
} 
a.img:hover img {
	border: 2px dotted #FF0000;
}
/*image link end*/
 
/*popup text box code*/
a.info{
	position:relative; /*this is the key*/
	z-index:24;
	background-color:white;
	color:#0000ff;
	text-decoration:underline
}
 
a.info:hover{z-index:25; background-color:#ff0}
 
a.info span{display: none}
 
a.info:hover span{ /*the span will display just on :hover state*/ 
	display:block;
	position:absolute;
	top:2em;
	left:1em;
	width:20em;
	border:1px solid #0060A9;
	background-color:#CAE4FF;
	color:#000;
	text-align: center
}
/*popup box end*/
 
/*Credits: Dynamic Drive CSS Library */
/*URL: <a href="http://www.dynamicdrive.com/style/" rel="nofollow">http://www.dynamicdrive.com/style/</a> */
/*popup text box with image*/
.thumbnail{
	position: relative;
	z-index: 0;
}
.thumbnail:hover{
	background-color: transparent;
	z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/ 
	position: absolute;
	background-color: #DFEDEE;
	padding: 5px;
	left: -1000px;
	border: 1px dashed gray;
	visibility: hidden;
	color: black;
	text-decoration: none;	
}
.thumbnail span img{ /*CSS for popup image*/ 
	border-width: 0;
	padding: 2px;
}
.thumbnail:hover span{ /*CSS for popup image on hover*/ 
	visibility: visible;
	top: 2em;
	left: 2em; /*position where enlarged image should offset horizontally */ 
	z-index: 50;
}
/*End of thumbnail code*/
 
.left {
	float: left;
	position: relative;
	border: 1px solid #000000;
	margin-top: .5em;
	margin-right: 2em;
	margin-bottom: .5em;
	margin-left: 0.5em;
}
.right {
	float: right;
	position: relative;
	border: 1px solid #000000;
	margin-top: 0.5em;
	margin-right: 0.5em;
	margin-bottom: .5em;
	margin-left: 2em;
}
.leftvideo {
	float: left;
	position: relative;
	border: 3px solid #0060A9;
	margin-top: .5em;
	margin-right: 2em;
	margin-bottom: .5em;
	margin-left: 0.5em;
}
.rightvideo {
	float: right;
	position: relative;
	border: 3px solid #0060A9;
	margin-top: 0.5em;
	margin-right: 0.5em;
	margin-bottom: .5em;
	margin-left: 2em;
}
.shading {
	background-color: #CCCCCC;
}
.content {
	margin-right: 3em;
	margin-left: 3em;
}
 
.logo {/*for the bottom right logo*/
	position: relative;
	right: 0px;
	bottom: 0px;
	float: right;
	margin-bottom: 15px;
}
.centralbox {
	margin-right: auto;
	margin-left: auto;
	width: 70%;
	border: thin dashed #0060A9;
	padding: 1em;
	min-height: 10em;
	display: block;
	vertical-align: middle;
}
/*not used?*/ /*
.curvedbox {
	margin-right: auto;
	margin-left: auto;
	width: 70%;
	border: thin dashed #0060A9;
	padding: 1em;
	min-height: 10em;
	display: block;
	vertical-align: middle;
	border:2px solid;
	border-radius:25px;
	-moz-border-radius:25px; /* Firefox 3.6 and earlier */ /*
	box-shadow: 10px 10px 5px #888888;
	-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */ /*
}
*/
 
.review {
	color: #FF0000;
}
/*clearfix code*/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}
/*end clearfix code*/

HTML for content page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<!-- External CSS FILES: add additional CSS files as needed -->
<link href="../../Scripts/Menu_layout.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/Apprenticeship_layout.css" rel="stylesheet" type="text/css" />
<!-- END CSS FILES -->
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
 
<title>AELC1421: Learning Goals</title>
</head>
 
<!-- BODY ID: change id to reflect page number. Affects menu and next-prev output. -->
<body id="page1">
 
<!-- Begin Menu Layer Code. Point to external table of contents file. //-->
<!-- attempted fix which didn't work
<div class="slidemenu"> -->
 
<iframe class="slidemenu" src="../TOC.html">
<!-- Begin non-iframe code. Use only one slidemenu class for entire section//-->
  <p class="slidemenu">If you can see this, your browser doesn't understand IFRAMEs and you cannot see the Table of Contents in this area.<br /><br />
  To go directly to the Table of contents, click the link below:<br /><br /> 
      <a href="../TOC.html">Table of Contents</a>
      </p>
<!-- End non-iframe Code //-->
</iframe>
<!-- </div>-->
<!-- End Menu Layer Code //-->
 
<h1>Pole Climbing Equipment</h1>
 
            <p align="center"><a class="img" href="AELC1421-02_introduction.html"><img src="../../Media/Images/Climbing_Equipment/climbers.JPG" alt="Climbers" width="100" height="131" /></a></p>
 
<div class="content clearfix">
            <p>Upon completing this module, you will be be able to:</p>
              <ul>
                <li> list the proper equipment to use when pole climbing</li>
                <li> explain how to  inspect and care for pole climbing equipment</li>
                <li> describe how to measure yourself to determine the proper size of climbers</li>
                <li> demonstrate the proper method of putting on climbers, body belt and safety strap</li>
              </ul>
 
           <p>To advance to the next module, you will need to:</p>
            <ul>
                <li>Score 80% or greater on the end-of-module exam</li>
              <li >Correctly adjust and put on climbers </li>
              <li >Correctly put on the body belt and attach the safety strap</li>
            </ul>
 
 
           <a href="AELC1421-02_introduction.html"><img class="centered"border="0" alt="Click here to enter the module" align="middle" width="49" height="16" src="../../Media/Images/Menu/enter.jpg" /></a>
 
 
<img class="logo" src="../../Media/Images/Icons-Logos/Logo.png" alt="Logo" width="100" height="31" border="0" />    </div>
 
</body>
</html>

Tags:

Beginners CSS Questions

CSS + iframes + hover + IE = fail

User login

Navigation