Changing !DOCTYPE messes with dimensions

  • Resolved Morten Ross

    (@rosmo01)


    1 year, 10 months ago

    Hi,

    I’ve updated header.php from

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

    to

    <!DOCTYPE html>

    This resulted in one peculiar problem for the entire site.

    The landing page has a section at the very top, just below the menus. It’s divided by a section on the left, the featured posts – a carousel, and my profile image to the right.

    The height of the carousel/featured posts section is reduced, which can be seen by the bottom of it not being in line with my profile image on the right of featured posts.

    This is my staging server with the old doctype, which is how it should look:

    https://www.ross.no/staging/

    I just cannot find a way to correct this.

    • This topic was modified 1 year, 10 months ago by Morten Ross.
    • This topic was modified 1 year, 10 months ago by Morten Ross.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • The javascript that is calculating the slide height is calculating it differently for html5 than html4, why I don’t know.

    As the side in your staging is 267px height you can ‘fix’ the image with additional CSS


    div#about { 
  box-sizing: border-box;
  max-height: 267px;
}
    Thread Starter Morten Ross

    (@rosmo01)

    Again, thank you sooo much Alan! Appreciate your quick and productive response to my issues.

    You wouldn’t believe the rubbish my wife is watching on TV, at least I can pretend I’m working on my plugins !

    Thread Starter Morten Ross

    (@rosmo01)

    There you go, brilliant!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing !DOCTYPE messes with dimensions’ is closed to new replies.

Tags