Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS XHTML Strict/Transitional, Differing Layout

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #27976
    Cags
    Member

    I’ve been attempting to create a header / menu combination for my site, but ran into problems with a gap that I could not get rid of, after posting on another forum it was discovered that if I changed the DOCTYPE from XHTML Strict to XHTML Transitional the gap disappears. It was my understanding that there shouldn’t really be any layout differences going backwards from Strict to Transitional, so this confused me somewhat. I don’t really consider changing the DOCTYPE a solution, after all I thought the whole point of Transitional was to be just what it’s name describes.

    It’s worth noting I’m not especially experienced with CSS, I’m more a back-end programmer than designer, so excuse me if I’ve done something ‘dumb’, the quirks of working with CSS are taking some adjustments to get used to. I’ve created a simple example that demonstrates the point.

    Code:



    Test



    Note that if viewed in FireFox you will need an image, but most other browsers obey the width and height attributes used in the <img tag.

    Edit: Oops, I nearly forgot to mention that the gap is between the header image and the ‘menu’ below it.

    #70831
    Cags
    Member

    I’ve discovered that setting ‘display:block’ on the <img tag seems to remove the gap. I would still be very much interested if anybody could shine some light on why Strict and Transitional seem to display the layout differently.

    #70804
    TheDoc
    Member

    I may be blind, but it looks like you’ve forgotten to add a link to the site!

    #70866
    Cags
    Member

    I’ve not forgotten anything, there is no link to the site since there is no site, I’m currently just testing locally. Somehow I don’t think giving you http://localhost/ would help you much :). The snippet of code provided is all that is required to emulate the situation I’m having with my ‘site’. Simply changing the two instances (once in the DTD name and once in the link) of the word strict to the word transitional in that code will affect the layout.

    Edit: After reading your signature, I thought I should probably add I’ve tested it in Chrome, FireFox, Safari and IE 8. I’m not entirely sure on the exact versions, but they have all been installed within the last month, using whatever was the version available on the respective website at that time. It’s visible with them all assuming you actually have a header.gif the right size. As mentioned in the first post, it’s visible with them all excluding FF without having an image in the directory (since it doesn’t force a space the size of the width & height attributes).

    #70872
    Cags
    Member

    Hmmm… after some further testing and clearing my caches, it appears the problem isn’t quite how I described on all browsers. I ran tests on all 4 browsers that I have installed using strict and transitional DOCTYPEs. For good measure I also ran the same tests after applying the afforementioned ‘fix’ (setting display:block on the img tag). Here are the results:

    Chrome
    Transitional – No Gap
    Strict – Gap
    Transitional Fix – No Gap
    Strict Fix – No Gap

    FireFox
    Transitional – Gap
    Strict – Gap
    Transitional Fix – No Gap
    Strict Fix – No Gap

    Safari
    Transitional – No Gap
    Strict – Gap
    Transitional Fix – No Gap
    Strict Fix – No Gap

    Internet Explorer 8
    Transitional – Gap
    Strict – Gap
    Transitional Fix – No Gap
    Strict Fix – No Gap

    As you can see, the ‘fix’ works. There is no gap on any of the 4 browsers when it is applied. Technically speaking since the ‘fix’ works I no longer have a problem. Having said that, it annoys me not knowing what is causing the difference between the two DOCTYPES in Chrome and Safari, so I would be grateful if anybody can shed some light on the matter.

    I decided to throw up some examples for you:
    http://www.tib-studios.co.uk/TEST/strict.html
    http://www.tib-studios.co.uk/TEST/strict-fix.html
    http://www.tib-studios.co.uk/TEST/transitional.html
    http://www.tib-studios.co.uk/TEST/transitional-fix.html

    #70862
    TheDoc
    Member

    * { margin:0; padding:0; }
    CSS Resets

    #70898
    Cags
    Member

    Since every tag in use on the page (with the exception of the div, body and html which are containers and shouldn’t cause a gap in the middle of the content) has had it’s own ‘padding: 0px; margin: 0px’ this is somewhat irrelevant. I’ve already tried it anyway and it doesn’t make the slightest bit of difference.

    Also, to my knowledge browsers don’t use a separate internal CSS for different DTDs (though I could be wrong), so that wouldn’t explain how I can get different output by simply changing the DTD.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.