Hi, im a bit new to html and all, and ive run into a bit of a problem. The web page i am currently making is displaying 100% perfect in Firefox, but in IE there seems to be a variety or different problems with it. For a start the IFrame just isnt getting displayed at all and also the columns down the left and right dont either. Ive tried looking around for a solution, but cant seem to find one. Code is below:
<head>
<style type="text/css" media="screen">
body { background:#ffffcc; margin:0; }
.menu-link { cursor:default; }
.leftfade { background:url(fade-left-right-bone.gif) repeat-y; height:auto; left:130px; top:113px; bottom:113px; width:13px; position:absolute; z-index:3; }
.rightfade { background:url(fade-right-left-bone.gif) repeat-y; height:auto; right:130px; top:113px; bottom:113px; width:13px; position:absolute; z-index:3; }
.topfade { background:url(fade-top-bottom-bone.gif) repeat-x; width:auto; height:13px; position:absolute; top:100px; left:143px; right:143px; z-index:3; }
.bottomfade { background:url(fade-bottom-top-bone.gif) repeat-x; left:143px; right:143px; width:auto; height:13px; bottom:100px; position:absolute; z-index:3; }
.topleftfade { background:url(fade-topleft-bone.gif); left:130px; top:100px; width:13px; height:13px; position:absolute; z-index:4; }
.toprightfade { background:url(fade-topright-bone.gif); right:130px; top:100px; width:13px; height:13px; position:absolute; z-index:4; }
.bottomleftfade { background:url(fade-bottomleft-bone.gif); left:130px; bottom:100px; width:13px; height:13px; position:absolute; z-index:4; }
.bottomrightfade { background:url(fade-bottomright-bone.gif); right:130px; bottom:100px; width:13px; height:13px; position:absolute; z-index:4; }
.mainiframe { background:#ffffcc url(reaper-bone-back-small.jpg) center no-repeat; top:113px; bottom:113px; left:143px; right:143px; position:absolute; z-index:2; }
table.bottom { margin:0px; bottom:0px; position:absolute; }
table.main { z-index:6; }
td.left { background:#000000; width:130px; left:0px; top:100px; bottom:100px; height:auto; position:absolute; z-index:5; }
td.right { background:#000000; width:130px; right:0px; top:100px; bottom:100px; height:auto; position:absolute; z-index:5; }
table { table-layout:fixed; }
</style>
</head>
<body>
<table class="header" border=0 height="100px" width="100%" cellspacing="0">
<tr>
<td align="center" bgcolor="#000000">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"rkbanner.gif" alt="RK-Header" id="RK Banner"></img>
</td>
</tr>
</table>
<table border=0 width="100%" height="100%" cellspacing="0">
<tr>
<td class="left" bgcolor="#000000" width="130px" height="100%">
</td>
<td class="main" height="100%" width="auto">
<div class="leftfade"></div>
<div class="rightfade"></div>
<div class="topfade"></div>
<div class="bottomfade"></div>
<div class="topleftfade"></div>
<div class="toprightfade"></div>
<div class="bottomleftfade"></div>
<div class="bottomrightfade"></div>
<div class="mainiframe">
<iframe name="currentcontent" src=http://www.webdeveloper.com/forum/archive/index.php/"empty.html" marginwidth="25" marginheight="25" frameborder="0" width="100%" height="100%"></iframe>
</div>
</td>
<td class="right" bgcolor="#000000" width="130px" height="100%"></td>
</tr>
</table>
<table class="bottom" border=0 height="100px" width="100%" cellspacing="0">
<tr>
<td bgcolor="#000000"></td>
</tr>
</table>
</body>
There is normally a menu in the left column, but i have left that out, because it just complicates the code to look at.
Any help would be greatly appreciated. Thanks in advance.
Adam
<head>
<style type="text/css" media="screen">
body { background:#ffffcc; margin:0; }
.menu-link { cursor:default; }
.leftfade { background:url(fade-left-right-bone.gif) repeat-y; height:auto; left:130px; top:113px; bottom:113px; width:13px; position:absolute; z-index:3; }
.rightfade { background:url(fade-right-left-bone.gif) repeat-y; height:auto; right:130px; top:113px; bottom:113px; width:13px; position:absolute; z-index:3; }
.topfade { background:url(fade-top-bottom-bone.gif) repeat-x; width:auto; height:13px; position:absolute; top:100px; left:143px; right:143px; z-index:3; }
.bottomfade { background:url(fade-bottom-top-bone.gif) repeat-x; left:143px; right:143px; width:auto; height:13px; bottom:100px; position:absolute; z-index:3; }
.topleftfade { background:url(fade-topleft-bone.gif); left:130px; top:100px; width:13px; height:13px; position:absolute; z-index:4; }
.toprightfade { background:url(fade-topright-bone.gif); right:130px; top:100px; width:13px; height:13px; position:absolute; z-index:4; }
.bottomleftfade { background:url(fade-bottomleft-bone.gif); left:130px; bottom:100px; width:13px; height:13px; position:absolute; z-index:4; }
.bottomrightfade { background:url(fade-bottomright-bone.gif); right:130px; bottom:100px; width:13px; height:13px; position:absolute; z-index:4; }
.mainiframe { background:#ffffcc url(reaper-bone-back-small.jpg) center no-repeat; top:113px; bottom:113px; left:143px; right:143px; position:absolute; z-index:2; }
table.bottom { margin:0px; bottom:0px; position:absolute; }
table.main { z-index:6; }
td.left { background:#000000; width:130px; left:0px; top:100px; bottom:100px; height:auto; position:absolute; z-index:5; }
td.right { background:#000000; width:130px; right:0px; top:100px; bottom:100px; height:auto; position:absolute; z-index:5; }
table { table-layout:fixed; }
</style>
</head>
<body>
<table class="header" border=0 height="100px" width="100%" cellspacing="0">
<tr>
<td align="center" bgcolor="#000000">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"rkbanner.gif" alt="RK-Header" id="RK Banner"></img>
</td>
</tr>
</table>
<table border=0 width="100%" height="100%" cellspacing="0">
<tr>
<td class="left" bgcolor="#000000" width="130px" height="100%">
</td>
<td class="main" height="100%" width="auto">
<div class="leftfade"></div>
<div class="rightfade"></div>
<div class="topfade"></div>
<div class="bottomfade"></div>
<div class="topleftfade"></div>
<div class="toprightfade"></div>
<div class="bottomleftfade"></div>
<div class="bottomrightfade"></div>
<div class="mainiframe">
<iframe name="currentcontent" src=http://www.webdeveloper.com/forum/archive/index.php/"empty.html" marginwidth="25" marginheight="25" frameborder="0" width="100%" height="100%"></iframe>
</div>
</td>
<td class="right" bgcolor="#000000" width="130px" height="100%"></td>
</tr>
</table>
<table class="bottom" border=0 height="100px" width="100%" cellspacing="0">
<tr>
<td bgcolor="#000000"></td>
</tr>
</table>
</body>
There is normally a menu in the left column, but i have left that out, because it just complicates the code to look at.
Any help would be greatly appreciated. Thanks in advance.
Adam