SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    MSIE Win 'spills and repeats' content

    A container div 'wrapper' holds 3 horizontal divs:
    header
    main
    footer
    'main' contains 2 further divs: a left-floated 'content' and right-floated 'sidebar'.

    The wrapper div is width 766.
    The content div is width 510.
    The sidebar div is width 255.

    Reducing the content width to 505 removes the problem.

    What's the cause and solution?

    Removing 'content' and 'sidebar' from 'main' also solves the issue, though 'main' has a purpose - enabling flexibility in backgrounds etc and so I want to keep it.

    Demo at http://glvr.com/test/drop/

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >it's your commenting <!-- -->

    As far as I can see, the commenting doesn't affect the issue.


    >why float the header and the footer ?

    In the real example they contain floated divs and elements - the float extends them to enclose the content.


    >why do you need the extra main div ?

    As explained... enabling flexibility in backgrounds etc - a background applied to 'main' can 'show through' for 'content' and 'sidebar' of unequal length. Also helps prevent additional divs/elements from 'sneaking up' out of position.


    >you already clear the floats with the footer, why do you use a extra clearing div ?

    Because in the real example the footer contains floated divs and elements. The extra clear extends it to enclose the content. 'Float nearly everything': http://orderedlist.com/articles/clearing-floats-fne/

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    remove <!-- content ends --> and it works
    Damn right, it does. I was wrong. Thanks. And...

    Why does the comment cause that problem?

    This isn't simply a moot point - I always comment the closing of my divs and other significant stuff to ease checking and reduce potential coding errors... I'm reluctant to change this (and certainly not without knowing the cause). Also, even if removed, adding another comment - example 'sidebar starts' - brings the problem back.

    Other fixes of which I'm aware but didn't mention because they're crappy kludges include ensuring all sidebar content is in <p> or similar tags - not possible when it contains nested divs - or adding a linebreak just before the close.

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah... light bulb... Thanks. Hadn't read that page before.

    'Crappy kludge it is', then. ;-)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by gulliver
    not possible when it contains nested divs
    Yes it is possible

    Code:
    		<div id="sidebar"><div><p>sidebar</p></div></div>
    You should remember that divs are just generic dividers for your page and are not really holders for content. All content should be contained within a suitable html tag that describes the content as best as possible.

    This is bad:
    Code:
    <div id="sidebar">sidebar</div>
    This is better:
    Code:
    <div id="sidebar"><p>sidebar</p></div>
    The former has no semantic meaning and just leaves inline content hanging in mid air which seems to be one of the triggers for the bug. If you enclose the content within proper tags within the div then the problem goes away.

    If you must have inline content then leave a space before the closing div and the bug will be defeated also and still allow you to have html comments.

    Code:
    <div  id="sidebar">sidebar </div>
    But that's just a kludge as you already mentioned

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul.


    >Yes it is possible.

    With my limited knowledge I'd not come across using un-named divs. My usage is in the form <div id="nameofdiv">. It seems confusing - is there a sane reason why I'd use an un-named div?


    >This is bad: <div id="sidebar">sidebar</div>

    Yeah, I know. I'd only included the 'untagged' text to show the divs. On my pages text is always tagged.


    >If you enclose the content within proper tags within the div then the problem goes away.

    Thanks. I was damn sure I'd had the problem on a prior site and also in the real page from which I built that stripped-down example. Can't find it now so I must have been wrong.


    >then leave a space before the closing div... the bug will be defeated also and still allow you to have html comments... just a kludge.

    Thanks. And it's perhaps a better kludge than some. I've also found a comment to work.

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    UPDATE

    >I was damn sure I'd had the problem on a prior site and also in the real page from which I built that stripped-down example so I've a demo which triggers the bug even though all text is tagged: http://glvr.com/test/drop/3/

    Re-reading the PIE page shows 'this duplicating characters bug can be triggered by other things than just HTML comments'. Maybe I wasn't wrong - though I can't find the example I had.

    And... 'leave a space before the closing div' isn't reliable (and neither is a linebreak) but a gratuitous comment just before the close seems to work- a test page illustrates the issue: http://glvr.com/test/drop/pie/
    Last edited by gulliver; Sep 17, 2006 at 23:07. Reason: updated with new example

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Nice Demo

    I did know about the html comment inside the div and its similar to the problems with lists and extra space that can be corrected in a similar fashion.

    It does seem that IE struggles with white space in the html at the best of times and there are also a number of triggers with various solutions (as you have found out ).

    In your last example above all the problems can be fixed by simply giving a height to the clearer div.
    Code:
    		<div style="clear: both;height:1px; background: #b2d4af;">Cleared element</div>
    However that doesn't work for the other examples although setting position:relative on all elements does fix the problem (although it is not advised to do this).

    It seems that this is more than the usual simple "layout" issues and I expect there are occasions where there are many triggers and many solutions.

    I usually leave my html clear of comments such as <!-- header closing div --> as they are just extra weight to the page and don't tell me anything I couldn't easily find out by simply indenting the code in DW. In fact I find code labelled like this more confusing as I'm never sure whether the author means above the comments is the closing div or below it

    I will only add comments that explain why something has been done in a certain way otherwise you end up with loads of comments that do no more than tell you the structure which can be easily accessed anyway.

  9. #9
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >I did know about the html comment...

    Paul, I'd have been surprised if you didn't. ;-)

    I comment the div closes because I'm anal and have frequently missed or duplicated closes and had odd display problems. ;-)

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    have frequently missed or duplicated closes
    Thats why I use DW for editing as it highlights any missing or duplicated tags so you know that there's a problem straight away (even if it doesn't tell you exactly where they should be)


Bookmarks

Posting Permissions

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