This isn't the first time I've used iFrames, but it is the first time I'm using one in conjunction with a CSS Style Sheet. I didn't think this would be an issue, but apparently it is. When I remove my CSS stylesheet the iFrame stays within the table even when i have the height coded into the HTML to be 100%.
Also, theres a strange little glitch with my page that only occurs in FireFox. Theres a lot of space at the bottom, for no apparent reason.
Sorry if I posted this in the wrong place. Yes my issue involves CSS, but the key problem is the iFrame, and iFrame is an HTML tag which is why I figured it belonged here.
HTML of my site
Quote:
<head>
<title>Information Technology High School</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div class="mainpage" align="center">
<table class="maintable" width="800" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="banner.gif" width="796" alt="Information Technology High School" />
<table class="innertable" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="150" valign="top">
<div class="menu">
<script type="text/javascript" src="menu.js"></script>
</div>
</td>
<td width="650" height="100%" valign="top">
<iframe id="mainframe" class="mainframe" src="index2.html" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
|
CSS Stylesheet
Quote:
body
{
background-color:#EEEEEE;
margin-bottom: 0px;
}
a
{
color: #000000;
text-decoration: none;
}
a:hover
{
color: #000000;
text-decoration: underline;
}
table.maintable
{
height: 98%;
border-width:2;
border-color:#000000;
border-style:solid;
background-color:#FFFFFF;
padding: 0px;
}
table.innertable
{
border-width: 0px;
height:100%;
}
div.menu
{
padding-top:5px;
width:150px;
height:100%;
overflow: hide;
}
table.menutable
{
border-bottom-width:2px;
border-bottom-style:solid;
border-top-width:2px;
border-top-style:solid;
border-right-width:2px;
border-right-style:solid;
}
div.menucategory
{
font-weight: bold;
text-indent: 1px;
border-bottom-width:1px;
border-bottom-style:solid;
text-align: left;
}
div.menulink
{
color: black;
text-decoration: none;
text-indent: 5px;
text-align: left;
}
td.menulink:hover
{
background-color:E0E0E0;
}
iframe.mainframe
{
width:100%;
height:100%;
}
|
Last edited by outermon; 03-16-2008 at 06:19 PM..
|
