1. Home
  2. Forums Index
  3. Browser Side / HTML 3:02 pm May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

Doctype problem?

Changed from XHTML Transitional to Strict

         

shug

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

10+ Year Member



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

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

10+ Year Member



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

Robin_reala

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

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

shug

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

10+ Year Member



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

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 3:02 pm May 1, 2026