"ahacks" <webdev@ahacks.com> wrote in message
news:uBRt4lx$JHA.3556@TK2MSFTNGP04.phx.gbl...
> IE8 apparently has some bugs which M.S. has not ironed out that work
> correctly previous in IE versions as well as ALL OTHER major browsers.
>
> Bug issue: Transparent animated GIFs when repeated (repeat-x or repeat-y)
> in a background, the transparency fails and shows as a black cover.
>
> Note: switching to "compability mode" seems to have no effect
>
> this bug is fully replicated on www.ahacks.com
Part I of II: Assorted Problems...
Firstly: my compliments on your clever glass curtain idea - I haven't seen
this technique used before
The HTML is invalid.
Flags were valid in IE6 and below, but from IE7 up GML functionality
attached to overlapping flagged regions no longer applied - so opening an
element (or turning on a flag) may have unpredictable results in later
Microsoft browsers if the element is not closed inside any elements that
were open at the point where the element in question was opened.
Also, center & font tags are no longer valid and it's easier if you put all
the styling in the CSS or the style element in the head. Also, table-based
layouts are notoriously labour insensitive - which ultimately translates to
being more bug-prone. We can apply the same controls to the other HTML
elements such as the h3 and p elements - check their selectors in the style
element.
Did you realise that one of Google's script elements snuck into one table
but not the other?
Also the b & i elements are purely visual and won't necessarily carry
altered volume or tone when presented by aural UAs. The strong and em
elements are the ones to use if, were you to read your page to an audience,
you would alter the tone and or volume for the applicable parts.
Finally, if you don't tell the browser what to expect, the choice of HTML
interpretation can be somewhat unpredictable - so it's worth specifying your
doctype.
Try this instead:
__________________________________________________ ___________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
IE8 bugs/defects - sample test - some reasons to hold off upgrading
</title>
<style>
body {padding:10%;
text-align:center;}
table {border:1px;
width:770px;
height:300px;}
tr {height:100%;}
td {vertical-align:middle;
text-align:center;
background:none;
color:#FF0000;
height:100%;}
td span {background:#FFFFFF;}
.smiley {background-image: url(images/SmileyFace.jpg);
background-repeat: no-repeat;
background-position: center;}
.curtain {background-image: url(images/curtains.gif);
background-repeat: no-repeat;
background-position: center;}
.curtains {background-image: url(images/curtains.gif);
background-repeat: repeat-y;
background-position: center;}
p,
h3 {text-align:left;}
</style>
</head>
<body>
<h3>Internet Explorer (IE) 8 bugs/defects</h3>
<p>IE8 apparently has some bugs which M.S. has not ironed out
that work correctly previous in IE versions.</p>
<p><strong>Bug issue:</strong> Transparent animated GIFs when
repeated (repeat-x or repeat-y) in a background,
the transparency fails and shows as a black cover.</p>
<p><strong>Replicated sample:</strong> In the following table, the
smiley face is displayed behind the tiled curtains
background correctly in: FireFox (all versions)
Safari, IE5, IE6, & IE7 ...but (as of 6/18/09) not in IE8:</p>
<table class="smiley">
<tr>
<td class="curtain">See if you can see the smiley face behind this
text</td>
</tr>
</table>
<br>
<p>Using background-repeat: no-repeat :</p>
<script type="text/javascript"><!--
google_ad_client = "pub-4507360123933524";
/* firtst try 728x15, created 6/22/09 */
google_ad_slot = "6512737135";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.
js">
</script>
<table class="smiley">
<tr>
<td class="curtain"><span>Here the backround is not
tiled/repeated.</td>
<tr>
</table>
<script type="text/javascript"><!--
google_ad_client = "pub-4507360123933524";
/* 2nd try 728x15, created 6/22/09 */
google_ad_slot = "4348225726";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.
js">
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." :
"http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost +
"google-analytics.com/ga.
js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9412016-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
__________________________________________________ ___________
As shown, this does not appear to display as expected in IE8 - using valid
HTML as above.
However, consulting pp. 266-268 of the CSS2 specification, we discover that
there are six layers in a table, whose transparency must be accounted for
and a number of issues with respect to tables and table layer transparency.
I'd expect there to be diverging interpretations of the CSS2 specification
here - which makes tables les than ideal for glass curtain mechanisms.
--
Timothy Casey - Email:
5th-prime-number@timothycasey.info
Software:
http://software-1011.com; Scientific IQ Test, Web Menus, Security
http://web-design-1011.com http://speed-reading-comprehension.com
Science & Geology:
http://geologist-1011.com; http://geologist-1011.net
Linear Mode
