Forum Moderators: not2easy
I am the webmaster of a small site called <Eeek!>, and I am currently having some problems with IE compatibility.
If you have multiple browsers installed, try visiting <Ooops!> in Opera, Netscape, Mozilla, etc. You will find that it looks fine in everyhting - except for Internet Explorer, where the '<iframe>' element is much too small in height.
This is because I have yet to find a workaround for the following problem:
CSS2 top/bottom
The current version of the site uses a simple <div> element, which has been given "top=0px;" and "bottom=110px;", and "potisioning: absolute;". This is correct according to W3C standard, and it consequently works in all the GOOD browsers.
It seems that IE does not handla the combination of top and bottom attributes correctly. If I use only top, the thing positions itself in the top of the screen, if I use bottom, it places itself in the bottom, If I use bith, it uses Top and ignores Bottom. It is, I fear, unable to "stretch" height.
CSS2 height
During my attempts of solving the above problem, I came upon yet another "bug": I seem to be unable to get IE to accept "height=100%" for ANYTHING. It simply will not let me make a table, a div, or anything else 100% of the hight of the viewing area. Very annoying.
[edited by: Nick_W at 11:35 am (utc) on Sep. 13, 2003]
[edit reason] no urls please / thanks! [/edit]
Possibly both problems are the same. Height is not a proportion of the window, it is a proportion of the container, so try setting "height=100%" for html and for body (and any other nested divs which your table or whatever is contained in.
Shawn
<html>
<body style="height:100%">
<div style="height:100%;padding-top:10px;padding-bottom:110px">
<iframestyle="height:100%;">
</iframe>
</div>
</body>
</html>
not tested, might have to fix borders and margins too. In my experience, spacing around an object is BEST done with padding and margins, even if its relative to the window frame.
SN
This is my current IE-code (I have already deduced that I shall have to have different sets of code for IE and "the others"):
<body>
<table class="main">
<tr class="mainwindow">
<td class="mainwindow">
<div style="height:100%;padding-top:10px;padding-bottom:110px">
<iframe class="mainframe" name="mainframe"></iframe>
</div>
</td>
</tr>
<tr >
<td class="mainmenu">
<div class="menutext">
¦
<a class="menulink" href="news.php" target="mainframe">N E W S</a>
¦
<a class="menulink" href="soon.html" target="mainframe">I N F O</a>
¦
<a class="menulink" href="dloads.php" target="mainframe">F I L E S</a>
¦
<a class="menulink" href="soon.html" target="mainframe">G A M E S</a>
¦
<a class="menulink" href="soon.html" target="mainframe">L I N K S</a>
¦
<a class="menulink" href="soon.html" target="mainframe">F O R U M</a>
¦
</div>
<div class="menulogo"><img src="./images/logo.gif" alt="Omega 2.0 roleplaying system"></div>
</td></tr></table></body><Ack!>
The latest test of the IE-compatible version is at <Doh!>
I still can't get it to work. The menu is where is is, but I CANNOT make the <iframe> be exactle 100%-110px in height.
Suggestions are welcome.
The single line "I cannot make it 100%-110px" is plenty of information for us to know it didn't work. No need to look ata page to see that it didn't work.
No URLs is mostly for the reason that this forum is well googled and highly ranked, and this will reflect positively on urls dropped here. So if it was allowed, soon 1000s of spam scripts would continuously drop urls here and the forum would be dead.
Thank you.
SN
I'm not a great fan of Microsoft either, but in this regard their implementation is not incorrect; just different.
Other good reasons for eloquently elaborating your problem rather than pointing someone to a url is that it saves those who are trying to help you time. Also, these forums are searched and used by many who have a similar problem to what someone else might have experienced and solved months ago, so refering off to another page which will change tomorrow doesn't help.
