xhtml strict question

[jez]

Hi everyone,

Can anyone tell me a workaround for the fact that width and height attributes on images are not valid in xhtml.

After being told for the last 5 years to 'always give images width and height properties to make the page load better', how can i do this and still get my pages to validate to XHTML strict?

I know i could use transitional but the requirement is for strict, any ideas as this seems pretty strange to me... not even to depreciate it first.

Thanks

Jez

 

[ChrisHirst]

width and height are valid in XHTML strict.
Maybe you have missed off the required quotes around the values ?



Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[Vragabond]

I have no idea where you're coming from, but this is an excrept from XHTML 1.0 Strict DTD:

<!ELEMENT img EMPTY>
<!ATTLIST img
  %attrs;
  src         %URI;          #REQUIRED
  alt         %Text;         #REQUIRED
  longdesc    %URI;          #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  usemap      %URI;          #IMPLIED
  ismap       (ismap)        #IMPLIED
  >

As clear as it can be, width and height are still fully supported in XHTML. I have been using them without any problems.

 

[jez]

# Line 77, character 123:

... ntinue_dark_71x19.gif" width="71" height="19"

Error: there is no attribute width for this element (in this HTML version)

The next warning says the same but about the height (the tag is closed, it is just cut off in the validator.

The other part of this validation that is relevant is

Document Checked

* Character encoding: UTF-8
* Level of HTML: XHTML 1.0 Strict

So, although i was under the impression they were valid in XHTML, it looks to me like theyre not.

?


just to be sure here is the full image tag.....

<input type="image" name="continue" id="continue" alt="continue" src="../img/buttons/btn_continue_dark_71x19.gif" width="71" height="19" onmouseover="MM_swapImage(this.id, '', '../img/buttons/btn_continue_dark_71x19_on.gif', 1);" onmouseout="MM_swapImgRestore()" />

 

[jez]

Doh, its not an image its an input....

 

[jez]

....so its correct, there is no width and height on an input field.....

It was becuase the validator cut off the beginning of the excerpt so i thought it was an image....

Thanks anyway guys.

 

[Vragabond]

The validator is right. You're not using an image tag but an input tag. Telling us that would have been helpful. So:
This will work:

<img id="continue" alt="continue" src="../img/buttons/btn_continue_dark_71x19.gif" width="71" height="19" onmouseover="MM_swapImage(this.id, '', '../img/buttons/btn_continue_dark_71x19_on.gif', 1);" onmouseout="MM_swapImgRestore()" />

Your code should look like:

<input type="image" name="continue" id="continue" alt="continue" src="../img/buttons/btn_continue_dark_71x19.gif" onmouseover="MM_swapImage(this.id, '', '../img/buttons/btn_continue_dark_71x19_on.gif', 1);" onmouseout="MM_swapImgRestore()" />

 

[ChrisHirst]

<input> these things are sent to test us sometimes

Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[ChrisHunt]

Incidentally, if you do want to declare width and height for elements that don't have attributes for them, you can use CSS:

<input name="continue" style="height:19px; width:71px" ...etc... />

Remember that, unlike in HTML, you have to specify units for these dimensions.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd