Spaces added to Image with XHTML Strict

Sorry meant to say XHTML Strict.

I’m doing a project for a course I’m doing in which I have to create a website using XHTML 1.0 Strict (along with javascript/CSS etc).

I have problems aligning my images in my banner. It works fine in XHTML transitional but once i switch to Strict a line is created below one of the images (in both Firefox and Explorer):

Heres a link to the code/pages:

Test Site

The Home page and Gallery pages are both set to strict and you can see the space but if you at the other pages (which are transitional) there is no gap.

I think its something about the baseline for the images but not sure how to sort it. Is there anything i can add to my CSS style **** to fix it…

Thanks - I appreciate any help on this.

An img, being an inline element, allows space at the bottom for text descenders. To remove the space, either set the img to display:block; or vertical-align:bottom;

That said, as the patterned area of the image is purely decorative, it may be better placed as a background image on #header.

I suspect is a case the page syntax has errors and the ‘Almost standards mode’ is triggering with Transitional. I suspect applying vertical-align: bottom; on the IMG would solve the issue though it might not be the most efficient method.

A clean solution that would avoid alignment issues would be to use display: block which will be easier to manage, a much more elegant solution would be to just use a transitional <!DOCTYPE>

Thanks for the help…

First thing I tryed (from google) was put a display:block; CSS rule to #header but that put the navbar images in a vertical column.
I then split the top image and the 6 rollover gifs into 2 different DIVS and applied (approiate)height/margin:0; padding:0; to each and that seemed to sort. I didn’t get a chance to try the vertical-align: bottom rule though. Would you do that to the top image or the row of rollover gifs or all the images in the header.

Vertical-align (which doesn’t have to be set to bottom tho that’s most popular; it just has to be set to something other than the default “baseline” really) is what you’d use if you need to keep the images inline. So, you automatically get rid of descender space when you make the img a block with display: block or float or whatever, but if that causes problems then vertical-align solves it.

First thing I tryed (from google) was put a display:block; CSS rule to #header but that put the navbar images in a vertical column.

The display: block stuff, if you use it, goes on the HTML <img> element who’s creating the space. Not any boxes around. Descender space, if there is any, is always on the bottom of the image. It’s room for the dangly parts (descenders) of our text (qpgjy etc). So you look to see which image has this space underneath it. That’d be the one you’d need to add vertical-align to.

(so, in your case, it would be #header img {vertical-align: bottom;})
Background images don’t create descender space. None of the above solutions are for boxes who happen to have a background image in them.

You might want to take another look at your menu as well. The anchors are also inline, and smaller than the images they contain. If you check your page out with a debugger that highlights page elements like Firebug, you’ll see your menu has a sort of TARDIS-effect going on.