[thelist] Vertical shuffle in IE problem
Adrian Kearns
adriank at reactor.co.nz
Mon Apr 3 23:44:40 2000
This is a multi-part message in MIME format.
--------------C12D75070CC89BFFFFD75283
Content-Type: text/plain; charset=us-ascii
Content-Transfer-Encoding: 7bit
Hello folks,
Having terrible trouble with IE 4.72 "shuffling" the page downwards
when you click on a link.
I have tables within other tables, the 'master' table has a
height of 100%
Style sheets are used for formatting.
Font size is only specified once.
The problem only occurs when the master table is set too a percentage
height (bigger than the table) with the style sheet.
Only happens in IE 4.72.
Is there another way to use the vertical depth in a page without
putting everything into a big table cell?
files attached.
Thanks, Adrian K
--------------C12D75070CC89BFFFFD75283
Content-Type: text/html; charset=us-ascii;
name="tabletest.html"
Content-Transfer-Encoding: 7bit
Content-Disposition: inline;
filename="tabletest.html"
<html><head>
<TITLE>Shuffle problem</TITLE>
<META name="keywords" lang="en" content="Reactor,adrian,web site development,design,re-design,artistic,creative">
<META name="description" content="Welcome to [ R ] e a c t o r internet design and development.">
<META name="date" content="2000-03-29T12:00:00+00:00"><!-- yyyy-mm-dd -->
<style type="text/css">
<!--
body,td { margin: 1em; background-color: #0066ff; font-size: 12pt; font-family: verdana,helvetica,arial,sans-serif; }
td.r { background-color: #ccccff; }
td.bigr { background-color: #9999ff; }
:link { color: #ffffff; text-decoration: none; }
v:link { color: #ffffff; text-decoration: none; }
a:link { color: #ffffff; text-decoration: none; }
a:visited { color: #ffffff; text-decoration: none; }
a:active { color: #ffffff; text-decoration: none; }
a:hover { color: #ffffff; text-decoration: none; }
.big:link { color: #006699; text-decoration: none; }
v.big:link { color: #006699; text-decoration: none; }
a.big:link { color: #006699; text-decoration: none; }
a.big:visited { color: #000099; text-decoration: none; }
a.big:active { color: #006699; text-decoration: none; }
a.big:hover { color: #006699; text-decoration: none; }
.p:link { color: #333399; text-decoration: none; }
v.p:link { color: #333399; text-decoration: none; }
a.p:link { color: #333399; text-decoration: none; }
a.p:visited { color: #333399; text-decoration: none; }
a.p:active { color: #333399; text-decoration: none; }
a.p:hover { color: #333399; text-decoration: none; }
-->
</style>
</head>
<body>
<table width="90%" height="100%" align="center" border="1">
<tr><td valign="middle">
<table width="600" align="center" border="1" cellspacing="3" cellpadding="0">
<tr>
<td align="center"><a href="go_back.html" class="big">Here is the test, style is inline</a></td></tr>
<tr>
<td align="center"><a href="go_back.html" class="p">all text are links</a></td></tr>
</table>
<table width="400" align="center" border="1" cellspacing="3" cellpadding="3">
<tr>
<td align="center" valign="middle" class="bigr"><a href="go_back.html">all</a></td>
<td align="center" valign="middle" class="r"><a href="go_back.html">links</a></td></tr>
</table>
<table width="100%" align="center" border="1" cellspacing="3" cellpadding="0">
<tr>
<td align="center"><a href="go_back.html" class="p">cause shuffle</a></td></tr>
<tr>
<td align="center"><a href="go_back.html" class="big">IE 4.72 on Win 95 only, not nav 4.6</a></td></tr>
</table>
</td></tr>
</table>
</body></html>
--------------C12D75070CC89BFFFFD75283
Content-Type: text/html; charset=us-ascii;
name="go_back.html"
Content-Transfer-Encoding: 7bit
Content-Disposition: inline;
filename="go_back.html"
<html><head>
<TITLE>Go Back</TITLE>
<META name="keywords" lang="en" content="Reactor,adrian,web site development,design,re-design,artistic,creative">
<META name="description" content="Welcome to [ R ] e a c t o r internet design and development.">
<META name="date" content="2000-03-29T12:00:00+00:00"><!-- yyyy-mm-dd -->
<style type="text/css">
<!--
body,pre { margin: 1em; background-color: #0066ff; font-size: 12pt; font-family: verdana,helvetica,arial,sans-serif; }
:link { color: #ffffff; text-decoration: none; }
v:link { color: #ffffff; text-decoration: none; }
a:link { color: #ffffff; text-decoration: none; }
a:visited { color: #ffffff; text-decoration: none; }
a:active { color: #ffffff; text-decoration: none; }
a:hover { color: #ffffff; text-decoration: none; }
-->
</style>
</head>
<body>
<p align="center"><a href="tabletest.html">Go back to shuffle problem</a></p>
<pre>From what I can gather:
problem occurs when style sheet and a 100 percent height table
are used together.
The table has all the other tables in it of course.
Copy of the style is bellow.
text-decoration: none; has no effect.
font-size - whether pt or percent makes no difference.
Thanks,
<a href="mailto:adriank@reactor.co.nz">adriank@reactor.co.nz</a>
==========================================================
body,td { margin: 1em; background-color: #0066ff; font-size: 120%; font-family: verdana,helvetica,arial,sans-serif; }
td.r { background-color: #ccccff; }
td.bigr { background-color: #9999ff; }
:link { color: #ffffff; text-decoration: none; }
v:link { color: #ffffff; text-decoration: none; }
a:link { color: #ffffff; text-decoration: none; }
a:visited { color: #ffffff; text-decoration: none; }
a:active { color: #ffffff; text-decoration: none; }
a:hover { color: #ffffff; text-decoration: none; }
.big:link { color: #006699; text-decoration: none; }
v.big:link { color: #006699; text-decoration: none; }
a.big:link { color: #006699; text-decoration: none; }
a.big:visited { color: #000099; text-decoration: none; }
a.big:active { color: #006699; text-decoration: none; }
a.big:hover { color: #006699; text-decoration: none; }
.p:link { color: #333399; text-decoration: none; }
v.p:link { color: #333399; text-decoration: none; }
a.p:link { color: #333399; text-decoration: none; }
a.p:visited { color: #333399; text-decoration: none; }
a.p:active { color: #333399; text-decoration: none; }
a.p:hover { color: #333399; text-decoration: none; }
==========================================================
</pre>
</body></html>
--------------C12D75070CC89BFFFFD75283--