3
votes

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">&nbsp;
    <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

2
do you have this site online?ekeren
This seems to also happen with Google Chrome Developer Tools. Not sure if it's new or not, however.trysis

2 Answers

4
votes

First, it’s a warning, not an error message. Second, whether it appears depends on many things (and your sample document is one that does not trigger the warning, according to your description).

This is an odd warning from Mozilla internals, and there are open bugs about it, e.g. debugger ALWAYS has error about attribute nodeValue.

In practice, don’t worry about the warning.

You can use the simple approach

<img alt="" src=blank.png width=80 height=120> 

Alternatively, especially if you have several images with the same dimensions, you can set the dimensions in CSS. Whether you need a class for that depends on the context.

0
votes

For img tag you should use height and width

<img height='80' width='120' src='src...' >

Not css style like you do in other divs

<div style='width:120px;height:80px;' ></div>