Question

On my web site, I have the following code:

<input type="image" src="images/btn.png" alt="Submit" border="0" height="25" width="102" />

When I run my web site through one of the many HTML validators, they prompt to inform me that:

• border
• height
• width

are invalid attributes of the INPUT element.

However, YSlow and Google PageSpeed inform me that I should always include image dimensions to improve the speed up of parsing HTML.

What other way exists for me to use an image submit button while still being HTML valid and following YSlow recommendations?

Answer 1

Use CSS to achieve the same goal. Either inline CSS:

<input type="image" src="images/btn.png" alt="Submit"
       style="border:0; width:102px; height:25px;" />

or even better yet, with a style in your CSS file:

HTML:

<input type="image" src="images/btn.png" alt="Submit"
       class="somethingMeaningful" />

CSS:

input.somethingMeaningful { border: 0; width: 102px; height: 25px; }

If yslow or Google PageSpeed still complains, ignore.