I am working on a new site, and haven't used HTML for some time - and it's changed underneath me!
Anyway, I need to set the size of an image I usually do this by setting a class, or style, or even direct change (e.g. height = 40px) etc.
I need to do this in tables, which are always say 80px high, but with some text inside reducing the available image size to 60px (The images change/can't be relied upon to be exactly the correct size - as I won't manage this in the future)
I have produced an example below - bit of an extract of a genuine file - just reduced for here
If I set <img alt="blank 300px x 80px image" src="blank.png" />
within the table then obviously if the image is 80px high it fills the table leaving no space for the text - but the page loads in mazila without the
"Use of attributes' nodeValue attribute is deprecated. Use value instead" error.
If I change it to
img style="height:60px; width:300px" alt="blank 300px x 80px image" src="blank.png"
or try
img height="60px" width="300px" alt="blank 300px x 80px image" src="blank.png"
or try
img class="headp" alt="blank 300px x 80px image" src="blank.png"
Then the image sizes correctly, but the mazila debugger flood with the "Use of attributes' nodeValue attribute is deprecated. Use value instead" error.
Help!!!
Any one else have/had/solved this issue??
Example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>just a test page</title>
<style type="text/css">
h1 {
text-align:center;
font-size:18.0pt;
font-family:"Times New Roman","serif";
font-weight:normal;
}
.headt {
text-align: center;
margin-left: 0cm;
margin-right: 0cm;
margin-top: 0cm;
vertical-align:top;
width:300px;
height:80px;
}
.headp {
text-align: center;
margin-left: 0cm;
margin-right: 0cm;
margin-top: 0cm;
vertical-align:top;
width:300px;
height:60px;
}
</style>
<meta content="testpage" name="description" />
</head>
<body>
<table style="width: 100%">
<tr>
<td class="headt">
<img alt="blank 300px x 80px image" src="blank.png" /> <! - loc to try -->
<! I tried four options for the code above - here -->
<! -- or try img style="height:60px; width:300px" alt="blank 300px x 80px image" src="blank.png" - try 1 -->
<! -- or try img height="60px" width="300px" alt="blank 300px x 80px image" src="blank.png" - try 2 -->
<! -- or try img class="headp" alt="blank 300px x 80px image" src="blank.png" - try 3 -->
<! -- or try img alt="blank 300px x 80px image" src="blank.png" - try 4 -->
<! trys 1, 2, & 3 all work - but using the debug console in mazilla gives error Warning:
Use of attributes nodeValue attribute is deprecated. Use value instead. -->
<! try 4 doesnt work ans also doesnt give an error -->
<h1><span style="font-size:8.0pt">text underneath</span></h1>
</td>
<td class="head">
<img alt="blank 300px x 60px image" src="blank.png" />
</td>
</tr>
</table>
<hr />
</body>
</html>
note the image file is just inserted twice (so you can gauge the relative sizes, and is any .png of suitable size
Thanks
Julie