homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Doctype problem?
Changed from XHTML Transitional to Strict

 5:35 pm on Jun 3, 2007 (gmt 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.




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

Try to add img{vertical-align:bottom;} in your stylesheet


 5:54 pm on Jun 3, 2007 (gmt 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 Jun 3, 2007 (gmt 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.



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

Ah, no, that'd be a tables-only thing. Had you ever previously checked in Fx/Opera?


 6:45 pm on Jun 3, 2007 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved