xhtml strict img problems 1

[soniclnd]

hello i know html and want to change my work into xhtml. however when i put an image it always put a padding to the bottom of it (even if specifically assign no border, margin, or padding)
can anybody help me?

 

[tgreer]

Could we see a sample, online? Or could you paste some code we could copy and test?



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[soniclnd]

sure....

(xhtml transitional):

http://www.freewebs.com/soniclnd/marcos.htm

(xhtml strict):

http://www.freewebs.com/soniclnd/marcostrict.htm

also, when i validate my html i keep geting this anoying message:

Line 28, column 21: invalid comment declaration: found name character outside comment but inside comment declaration

<!---startminitable--->

 

[tgreer]

That is a strange error message. How can it be both outside and inside the comment? Try adding spaces or line breaks to your comment:

<!--
startminitable
-->

xhtml is case sensitive. It could be that your styles aren't applying because your xhtml tags are properly lowercase, but you define your style declarations in uppercase.

See if changing your style declarations to lowercase fixes the problem.



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[philote]

Add "display: block" to the style for your img tags. The images are displaying as inline, causing the td's line-height to be over 15px.

 

[soniclnd]

works great.... thanx a lot philote
so inline elements automatically have padding to the top and bottom? and block elements dont?

 

[philote]

http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced

That link says the height doesn't apply to inline elements. Instead the height is somehow based on the font size. I bet most browsers make the line-height a bit bigger than the font size so that text doesn't touch other text above or below.

I believe what happened in your case is the browser saw the inline image and set the line-height of the <td> to a little bigger than the image. So alternatively you could have forced the line-height of the <td> to be 15px to fix your problem.