homepage Welcome to WebmasterWorld Guest from 54.237.95.6
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Doctype problem?
Changed from XHTML Transitional to Strict
shug




msg:3357350
 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.

Shug

 

DanA




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

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

Robin_reala




msg:3357354
 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.

shug




msg:3357357
 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.

Shug

Robin_reala




msg:3357379
 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?

shug




msg:3357392
 6:45 pm on Jun 3, 2007 (gmt 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

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved