Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2007
    Location
    Skipton, North Yorkshire, UK
    Posts
    31
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Thumbs up DIVs positioned differently with XHTML1.0 Strict and Transitional DTD

    Hi,
    I have two pages, one with XHTML1.0 Strict DTD (www.yorkshiredales.org.uk/planningyourvisit.htm) and the other XHTML1.0 Transitional DTD (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
    Last edited by stuartw; 11-18-2010 at 07:29 AM. Reason: Resolved

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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....

  • Users who have thanked SB65 for this post:

    stuartw (11-18-2010)

  • #3
    New Coder
    Join Date
    Nov 2007
    Location
    Skipton, North Yorkshire, UK
    Posts
    31
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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) or email me at stuart.willis@yorkshiredales.org.uk if I can ever help with anything on the site.

    Cheers,
    Stu


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •