Thanks for taking a chance to look at this quick post.
I have a side menu bar that is intended to load in an I Frame via a click of a menu selection. It works as intended in Fire Fox but not in IE.
My question is, how do I fix the dimensional display problem?
Here’s the link: http://www.newmanexpressions.com/
Here’s the code:
The section is at the bottom and is called “sideMenuBar”
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8">
<title>Be Inspired by New Man Expressions | Share in the Expression</title>
<meta name="description" content="Whether you are wanting to express yourself or would like to share in the Global Chemistry; there is something here at New Man Expressions.">
<meta name="keywords" content="New Man Expression">
<link rel="stylesheet" type="text/css"
href="css/index.css">
<link rel="stylesheet" type="text/css"
href="css/iconMenuBusiness.css">
<script type="text/javascript"
src="script.js"></script>
<link rel="stylesheet" type="text/css"
href="css/ministry.css">
</head>
<body id="Intro">
<div id="wrapper">
<div id="fauxColumns">
<div id="leftSideArea">
<div id="header">
<h1><a href="index.html" title="New Man Expressions">New Man Expressions<span>
</span></a>
</h1>
<!-- #header --></div>
<div id="topNavContainer">
<div id="links">
<ul>
<li><a class="fire" href="http://www.newmanexpressions.com/Administrator/index.html" target="_blank"><span class="inspire">The Mind of New Man</span></a></li>
<li><a class="water" href="http://www.newmanexpressions.com/Administration/index.html" target="_blank"><span class="iam">New Chemistry</span></a></li>
<li><a class="blood" href="http://www.newmanexpressions.com/Administration/Party/index.html" target="_blank"><span class="ampelos">Biggest Party Ever</span></a></li>
</ul>
<!-- #links --></div>
<!-- #topNavContainer --></div>
<div id="iFrameArea">
<iframe name="mediaPort" src="includes/intro.html" width="761" height="354" frameborder="0" scrolling="no" ALLOWTRANSPARENCY="true"></iframe>
<!-- #iFrameArea --></div>
<div id="socialNavContainer">
<div id="socialLinks">
<ul>
<li><a class="btn1" href="includes/introLanding.html" target="mediaPort"><span class="socialLinksText">Welcome Center</span></a></li>
<li><a class="btn2" href="includes/business.html" target="mediaPort"><span class="socialLinksText">Business Resources</span></a></li>
<li><a class="btn3" href="includes/hotMedia.html" target="mediaPort"><span class="socialLinksText">Current Events</span></a></li>
<li><a class="btn4" href="includes/weldedLove.html" target="mediaPort"><span class="socialLinksText">Social Stream</span></a></li>
<li><a class="btn5" href="includes/mobilize2.html"target="mediaPort"><span class="socialLinksText">Partner Tools!</span></a></li>
</ul>
</div>
</div>
<div id="transition"></div>
<div id="expressionsContentArea">
<a name="read"><h2>3 Ways you can enjoy the New Man</h2>
<div class="TwoColumn">
<h4>More than a System - It's the Final Origination</h4>
<p>Whether you are a late night zombie looking to take off grave clothes and <a href="http://www.newmanexpressions.com/Administration/Party/index.html">enter into the party</a> , or perhaps you want to lighten the load and <a href="http://www.newmanexpressions.com/Administration/Media-Library/scrapBook.html">receive some inspiration</a>; or you are a business tech looking to <a href="http://www.newmanexpressions.com/Administrator/index.html">launch a new venture</a>, you and I together can share in the new man.</p>
<p>Together as party goers, partners and friends, and business associates; the extra dose is a privilege to start where you are at; this means there is always promotion and breakthrough available to you at any turn of the journey.</p>
<h4>Seedlings – From the Broad Way to a Narrow Gate</h4>
<p>Perhaps you just want to hear some cool music, then the party is where you will find the experience to take a rare turn from modern genres to enjoy what makes a lasting high when you dial up the Doctor of Music. Plus the life of the party would not be complete unless you meet the mystery man's guests and those who have enjoyed the greatest high with live video testimony, and other You Tube priviledges like short films the “Butterfly Circus”. Those are just hints of a <a href="http://www.newmanexpressions.com/Administration/Party/index.html">global celebration</a> that you are either witnessing first hand or have longed to be invited to.</p>
<h4>Heaven's Best - Reeducate with New Wine</h4>
<p>It may be that you have done all the wine tasting you want, and you just want to relax and hear something new and encouraging; check out the chemistry to the new man and hear what the new chemistry is after we literally went brain-dead before we found light at the end of the tunnel. You will enjoy our <a href="http://www.newmanexpressions.com/Administration/Vision/index.html">vision</a>, <a href="http://www.newmanexpressions.com/Administration/Stream/Love-Impact-Social-Stream.html">social outreach</a>, <a href="http://www.newmanexpressions.com/Administration/Network/index.html">network resources</a> to reeducate, <a href="http://www.newmanexpressions.com/Administration/index.html">current productions</a> and ways you are shaping the media. The chemical component of the party is a compound of love, faith and hope. This is all that you have shared in while the new man has emerged presently and throughout the millenniums. </p>
<h4>Business 101 – The Ease of Business when you're New on the Block</h4>
<p>Maybe you are in your element already and you want to launch a dream site captivating your audience with your vision; then web administrative offers are available. We take the vital chemistry of reeducation and we align with the most vital connection you have to the new man. In a time where people need vision; people like you can lead where you have succeeded to understand where the new man is going. Family, Community, Region wide, Nation wide, and International partnership make it possible for you to join our <a href="http://www.newmanexpressions.com/Administrator/free-web-design-services.html">business to charity drive</a>; where you get to build the simplest website, composed with custom graphics and illustration to dawn a new look for the future of business. Receive our <a href="http://www.newmanexpressions.com/Administrator/web-tools.html">free utilities</a> that give a billion dollar relief to the face of online business in simple wisdom keys and learn how to equate a simple offer of zero down and zero on completion. In other words; satisfaction before reward. All this is available from the mystery man and his people. Collectively we are a new man.</p>
</div>
<div class="TwoColumn">
<p><img class="large" src="css/etomic.jpg" alt="etomic" height="300" width="300" /></p>
</div>
</div>
</div><!-- leftSideArea -->
<div id="sideBarMenuContainer">
<iframe id="sideBarMenu" name="report" src="includes/blank.html" width="228px" height="630" frameborder="0" scrolling="no" ALLOWTRANSPARENCY="true">
</iframe>
</div>
</div><!-- fauxColumns -->
<div id="footer">
<!-- #footer --></div>
<!-- #wrapper --></div>
</body>
</html>
CSS
#fauxColumns {background: transparent;
overflow:hidden; /* wrap floats */
width:100%; /* trip haslayout, wrap floats in IE */
}
#leftSideArea {
float:left;
width:762px;
}
#sideBarMenuContainer {background: #bbcff0 url(launchPadBG.png) repeat-x;
float:right;
display:inline; /* prevent IE double margin bug */
width:228px;
height:506px;
}
#sideBarMenu {
margin-top:160px;
}
/* THIS IS FULL WIDTH HOVER AND VERTICALLY ALIGNED MENU */
.items ul {list-style-type:none;}
.items li
{
float: left;
margin: 0px 0px 0px 5px;
font-family: Tahoma;
}
.items li img {vertical-align:middle;}
.items li .outerContainer
{
display: table;
height: 62px;
overflow: hidden;
width: 210px;
}
.items li .outerContainer:Hover
{
background-color: #e4f8ff;
}
.items li .outerContainer .innerContainerImg {width:62px; height:62px;}
.items li .outerContainer .innerContainer
{
display: table-cell;
vertical-align: middle;
width: 100%;
margin: auto;
height:62px;
}
.items li .outerContainer .innerContainer .element a
{
color: #036;
text-decoration: none;
padding:0 0 0 5px;
display: block;
}
.items li .outerContainer:Hover .innerContainer .element a
{
text-decoration: none;
}
.items li .outerContainer .innerContainer .element a.smallText {font-size:12px;
color:#666;
}
/* using a text box */
.linkBox {width:228px;
height:64px;
float:left;
zmargin-bottom:10px;
}
.linkBox:hover {background:#e4f8ff;}
.linkBoxLinks{list-style-type:none;}
.linkBoxLinks li {display:block;
}
.linkBoxLinks li a { color:#4b6775;
display:block;
font:bold 120% Arial, Helvetica, sans-serif;
padding:6px 0 0px 2px;
text-decoration:none;
}
.linkBoxLinks a em {color:#036;
display:block;
font:normal 85% Verdana, Helvetica, sans-serif;
padding:5px 0 5px 0px;
}
.linkBoxLinks a span {color: #666;
font:normal 70% Verdana, Helvetica, sans-serif;
display:block;
}
.imageLink {float:left; margin-top:-5px; padding-right:5px;}
