gilgames said:
<html><head></head><body>
<DIV ALIGN=CENTER
style="{HEIGHT:90%;WIDTH:90%;BACKGROUND-COLOR:AQUA;VERTICAL-ALIGN:MIDDLE}">
<img SRC="../../www/wpm/images/apple.jpg" style="{VERTICAL-ALIGN:MIDDLE}">
</DIV></body></html>
Here is CSS, the HEIGHT and WIDTH properties work, the VERTICAL-ALIGN
does not, this time neither in IE.
What on earth made you think that style="{...}" was correct syntax?
None of you styles above will be honoured in any browser that doesn;t
bend over backwards to correct totally trashed code.
And even if the syntax was correct the above wouldn't help you.
Because vertical-align does not apply to block elements like div. It
only applies to elements with the display property set to either
inline or table-cell.
In this case setting vertical-align on the inline element (<img>) does
no good as there is no other in line elements for it to align with.
Nor does setting display: table-cell on the div because (amongst other
reasons) IE doesn't support display: table-cell.
So we're back to a version of your original code, which horrible
bastard of CSS and presentational HTML does do what you want in all
relatvely modern browsers and also validates.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>The title element is mandatory</title>
<style type="text/css">
html,body {height: 100%;}
table {height: 90%; width: 100%; border: none;}
td {text-align: center; vertical-align: middle; background: aqua none;
color: black;}
</style>
</head>
<body>
<table><tr><td>
<img src="../../www/wpm/images/apple.jpg" alt="Never forget to include
alternative text">
</td></tr></table>
</body>
Apparanetly I have to get the image size in javascript and reposition
it, which is yucky.
That's one way to proceed, but if the user's browser is smaller than
the image you may find that you've made portions of the image
inacessable. If that's an acceptable consequence for you then setting
the image as a bcakground image is easier than messing about with JS.
<DIV style="height: 90%; width :90%; background-color: aqua;
background-image: url(../../www/wpm/images/apple.jpg);
background-position: center center;"></DIV>
And if you trigger Standards mode then you need (as my example above)
to set html, body {height: 100%;}, otherwise the height: 90% won't be
treated as 90% of the window height.
What drives me crazy, that in the original TABLE version the HEIGHT
NS71. accepts the absolute number, only the percentage in skipped.
Yes, that looks like a bug. Both should be ignored.
Steve
