Welcome to WebmasterWorld Guest from 54.198.62.217

Forum Moderators: incrediBILL

Message Too Old, No Replies

Doctype problem?

Changed from XHTML Transitional to Strict

     
5:35 pm on Jun 3, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:May 18, 2005
posts:57
votes: 0


Yesterday, I decided to change my site from XHTML Transitional to Strict in an effort to keep to the cleanest code.
There were only a handfull of small errors to change and once done all my pages validated correctly to the strict doctype. Great I thought!

I made the mistake of checking my work in (Win) IE7 (I know - lesson learnt). All looks as it should. I then checked in (Win) FF, NN, Opera and there is a small gap in all the pictures I have on the site. The gap is between the bottom of the pictures and the border.

When I change the Doctype back to XHTML Transitional everything is ok again. I can post some code if required but just wondered if I am missing something here.

This is the doctype I am using: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

And this is the Doctype I was using: <!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">

Any ideas. Thanks for your time.

Shug

5:46 pm on June 3, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Nov 29, 2003
posts:351
votes: 0


Try to add img{vertical-align:bottom;} in your stylesheet
5:54 pm on June 3, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


Gecko has (as well as standards and quirks modes) an 'almost standards' mode which is the same as standards mode apart from images inside tables. It's triggered when using a transitional doctype but not when using a strict one, so that's the likely explanation for your problems. You could try setting all your images inside table cells to display:block to see if that helps:

td img { display: block; }

If so, then you can target the ones that are causing problems more specifically. This fix should work because it's probably the inline images sitting above their baseline that's causing the gaps you're seeing.

6:09 pm on June 3, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:May 18, 2005
posts:57
votes: 0


DanA, thanks - adding img {vertical-align: bottom;} worked a treat.

Robin, Would this happen if my images were inside Div's, I don't have any inside tables.

Thank you both for your time, this is very much appreciated.

Shug

6:30 pm on June 3, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


Ah, no, that'd be a tables-only thing. Had you ever previously checked in Fx/Opera?
6:45 pm on June 3, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:May 18, 2005
posts:57
votes: 0


Robin,
No, I only found this out when I checked in Firefox, Opera and Netscape.

I realise I should have checked in those browsers first before IE.
I am glad that it was such an easy fix though.

Is there anything you guys cant solve!
Many thanks