slide/fly out menu, Conditional comments, iframes, IE/firefox incompatibility

No replies

Mon, 2011-05-16 16:07

Charred

Offline

Regular

Last seen: 11 years 12 weeks ago

Timezone: GMT-5

Joined: 2011-04-10

Posts: 22

Points: 35

Hello,

I could really use some direction please. I'd been trying to solve the problem I introduced in an earlier post. I just discovered conditional comments and had great hope that it would help with my iframe problem by allowing me to use the iframe Table of Contents for non-IE browsers, but just provide a link to the TOC in IE and browsers that can't handle iframes.

Problem now: Firefox won't show the iframe and validate, and it also shows what is within the IE conditional statement in a sliding box behind the iframe. (And I'd still prefer to have the table of contents external file show up in the menu in IE, if at all possible.)

Validates, but iframe doesn't show up in firefox:

<!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. //-->
<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>
<!-- End Menu Layer Code //-->
 
 
<!--[if IE]><!-->
<!-- Begin Menu Layer Code. Point to external table of contents file. //-->
  <p class="slidemenu">
  To go to the Table of contents, click the link below:<br /><br /> 
      <a href="../TOC.html">Table of Contents</a>
      </p>
<!-- End Menu Layer Code //-->
<!--<![endif]-->
 
<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="Alliant Energy Logo" width="100" height="31" border="0" />    </div>
 
</body>
</html>

Doesn't validate, but shows iframe in firefox (except it also has the IE code behind the fly out box...not sure why)

<!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">
 
<!--[if IE]><!-->
<!-- Begin Menu Layer Code. Point to external table of contents file. //-->
  <p class="slidemenu">
  To go to the Table of contents, click the link below:<br /><br /> 
      <a href="../TOC.html">Table of Contents</a>
      </p>
<!-- End Menu Layer Code //-->
<!--<![endif]-->
 
<![if !IE]>
<!-- Begin Menu Layer Code. Point to external table of contents file. //-->
<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>
<!-- End Menu Layer Code //-->
<![endif]>
 
<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="Alliant Energy Logo" width="100" height="31" border="0" />    </div>
 
</body>
</html>

CSS (2 files combined):

@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*/
 
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 */

Table of contents file code:

<!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>
 
<title>Table of Contents</title>
</head>
 
<body id="toc">
 
<!-- This is the Table of Contents file that will show up in the iframe on the individual pages so that users can navigate between chapters. -->
 
<h1>Table of Contents</h1>
 
<h2>Resources</h2>
<p>
<img src="../Media/Images/Menu/blue_dot.gif" width="12" height="12" alt="fold.gif (119 bytes)" /> <a href="../Glossary/Glossary.html" target="_parent">Glossary</a></p>
<h2>Step 1 Content</h2>
<p>
<img src="../Media/Images/Menu/blue_dot.gif" width="12" height="12" alt="fold.gif (119 bytes)" /> <a href="AELC1421-Climbing_Equipment/AELC1421-01_home.html" target="_parent">Climbing Equipment</a><br />
<img src="../Media/Images/Menu/blue_dot.gif" width="12" height="12" alt="fold.gif (119 bytes)" /> <a href="AELC1431-Climbing/" target="_parent">Climbing</a><br />
<img src="../Media/Images/Menu/blue_dot.gif" width="12" height="12" alt="fold.gif (119 bytes)" /> <a href="../Old/AELC1421-menu.html" target="_parent">Ch1Menu</a></p>
 
<h2>Step 2 Content </h2>
<p>
<img src="../Media/Images/Menu/blue_dot.gif" width="12" height="12" alt="fold.gif (119 bytes)" /> <a href="AELC1421-Climbing_Equipment/AELC1421-01_home.html" target="_parent">Climbing Equipment</a><br />
  <img src="../Media/Images/Menu/blue_dot.gif" width="12" height="12" alt="fold.gif (119 bytes)" /> <a href="AELC1431-Climbing/" target="_parent">Climbing</a><br />
  <img src="../Media/Images/Menu/blue_dot.gif" width="12" height="12" alt="fold.gif (119 bytes)" /> <a href="../Glossary/Glossary.html" target="_parent">Glossary</a>
  </p>
 
  </body>
  </html>

Tags:

Beginners CSS Questions

slide/fly out menu, Conditional comments, iframes, IE/firefox incompatibility

User login

Navigation