...

View Full Version : Resolved DIVs positioned differently with XHTML1.0 Strict and Transitional DTD



stuartw
11-17-2010, 03:02 PM
Hi,
I have two pages, one with XHTML1.0 Strict DTD (www.yorkshiredales.org.uk/planningyourvisit.htm (http://www.yorkshiredales.org.uk/planningyourvisit.htm)) and the other XHTML1.0 Transitional DTD (www.yorkshiredales.org.uk/sendpostcard.htm (http://www.yorkshiredales.org.uk/sendpostcard.htm)). The xhtml validates for both but I have a problem with the positioning of a couple of divs that is messing up the Transitional page.

The Strict page was written first and all spacing etc is fine. I changed the DTD on the Transitional page as I am using ReCaptcha at the bottom of the form and that uses an iframe that doesn't validate under the Strict DTD. (it is really important that all of the pages validate).

The problem is that in the Transitional page, the divs 'pagesNav' (contains white link text over four coloured backgrounds) and 'auth' (contains more link texts and the search box over the orange background) are slightly higher on the page than the same divs on the Strict page. This in turn throws out the Gallery bar located at the bottom left of the large header image (div 'galleryWidget').

I have checked the actual html and css coding and it is the same on both pages, and I don't think there is anything in there that isn't recognised by the Transitional DTD (but am happy to be corrected!). I have also temporarily swapped the Transitional back to Strict and the problem corrects itelf. I therefore assume that the problem must be caused by the DTD difference.

Please does anyone know why this is happening and how I can correct it?

Cheers

Stu

SB65
11-17-2010, 05:04 PM
Hello Stu

The difference occurs because of the way the different doctypes deal with images. Strict documents, because images are normally inline elements, allow space underneath the image for the tails of g/y/j etc. Transitional ones don't.

On your pages, the image in #hWrap therefore takes up more space on the strict page and pushes subsequent divs down a bit. On transitional it doesn't.

If you set your images to display:block then the display will be consistent, because then the image on the strict doc won't have the space underneath.

Used that website many times....:thumbsup:

stuartw
11-18-2010, 07:28 AM
Many thanks SB65 - interesting and useful to know that and I'll look forward to having a play when I get into the office this morning.

Glad to hear you're a user of the site - please do take the site survey (www.yorkshiredales.org.uk/websurvey (http://www.yorkshiredales.org.uk/websurvey)) or email me at stuart.willis@yorkshiredales.org.uk (mailto:stuart.willis@yorkshiredales.org.uk) if I can ever help with anything on the site.

Cheers,
Stu



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum