IE peekaboo?

Discussion in 'HTML' started by Jonathan N. Little, Mar 8, 2007.

  1. I did up a page for a dog club's website and the "webmaster" says that
    the content text is not showing in IE6. Now it does have two floated
    elements and does produce a white artifact sometimes appear *behind* the
    content text which will disappear upon reload or resizing the window. A
    peekaboo like problem but I see all the text! I have tested in IEv4-6,
    v4 does break and IE5.01 doubles the top margin in the body text,
    phffff! So what--it's IE! ;-) But I cannot reproduce *his* problem and
    have checked it with 3 different computers.

    Here is a mockup of the page.

    http://www.littleworksstudio.com/temp/l2340/
    Yankee Pug Dog Club - 2007 Fund Raiser

    Anyone else with IE have trouble with the page in IE, or is the problem
    in this guy's browser...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 8, 2007
    #1
    1. Advertising

  2. Jonathan N. Little

    dorayme Guest

    In article <cdddc$45efa3c8$40cba7b0$>,
    "Jonathan N. Little" <> wrote:

    > I did up a page for a dog club's website and the "webmaster" says that
    > the content text is not showing in IE6. Now it does have two floated
    > elements and does produce a white artifact sometimes appear *behind* the
    > content text which will disappear upon reload or resizing the window. A
    > peekaboo like problem but I see all the text! I have tested in IEv4-6,
    > v4 does break and IE5.01 doubles the top margin in the body text,
    > phffff! So what--it's IE! ;-) But I cannot reproduce *his* problem and
    > have checked it with 3 different computers.
    >
    > Here is a mockup of the page.
    >
    > http://www.littleworksstudio.com/temp/l2340/
    > Yankee Pug Dog Club - 2007 Fund Raiser
    >
    > Anyone else with IE have trouble with the page in IE, or is the problem
    > in this guy's browser...


    Works nicely in all Mac browsers including, I know you are dying
    to know, and surprise surprise?, Mac IE.

    --
    dorayme
     
    dorayme, Mar 8, 2007
    #2
    1. Advertising

  3. dorayme wrote:
    > In article <cdddc$45efa3c8$40cba7b0$>,
    > "Jonathan N. Little" <> wrote:
    >


    > Works nicely in all Mac browsers including, I know you are dying
    > to know, and surprise surprise?, Mac IE.
    >



    I know, I think his browser is whacked! I cannot get it to fail unless I
    remove the "position: relative" on the H1 element, then I get the
    classic IE Peekaboo.

    I tried to style it to "coordinate" with their <ahhem> website but I
    couldn't bring myself to mirror their vintage 90s ....well you know.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 8, 2007
    #3
  4. Jonathan N. Little

    Els Guest

    Jonathan N. Little wrote:

    > I did up a page for a dog club's website and the "webmaster" says that
    > the content text is not showing in IE6. Now it does have two floated
    > elements and does produce a white artifact sometimes appear *behind* the
    > content text which will disappear upon reload or resizing the window. A
    > peekaboo like problem but I see all the text! I have tested in IEv4-6,
    > v4 does break and IE5.01 doubles the top margin in the body text,
    > phffff! So what--it's IE! ;-) But I cannot reproduce *his* problem and
    > have checked it with 3 different computers.
    >
    > Here is a mockup of the page.
    >
    > http://www.littleworksstudio.com/temp/l2340/
    > Yankee Pug Dog Club - 2007 Fund Raiser
    >
    > Anyone else with IE have trouble with the page in IE, or is the problem
    > in this guy's browser...


    No problems in my IE6 (standalone version), but serious probs in IE7:
    http://locusmeus.com/temp/pugdog.jpg

    From what I tested quickly, it's caused by the italic text in the <em>
    elements (IE italic bug), but can be solved by making enough space for
    it, or constraining elements by giving them zoom:1 (IE only code, will
    cause validation error). Zoom:1 gives an element 'layout' in IE
    (Google for 'hasLayout'), just like position:relative does in some
    cases too.

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/
     
    Els, Mar 8, 2007
    #4
  5. Els wrote:
    > Jonathan N. Little wrote:


    >> Anyone else with IE have trouble with the page in IE, or is the problem
    >> in this guy's browser...

    >
    > No problems in my IE6 (standalone version), but serious probs in IE7:
    > http://locusmeus.com/temp/pugdog.jpg
    >
    > From what I tested quickly, it's caused by the italic text in the <em>
    > elements (IE italic bug), but can be solved by making enough space for
    > it, or constraining elements by giving them zoom:1 (IE only code, will
    > cause validation error). Zoom:1 gives an element 'layout' in IE
    > (Google for 'hasLayout'), just like position:relative does in some
    > cases too.
    >


    Thanks Els, I could not get the guy to send me screen shot. I bet he has
    IE7 not IE6 as he says! I have not access to 7.

    If I add horizontal padding to the EM element fix this, or do I have to
    make EM display as BOLD non-ITALIC?

    I just love IE!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 8, 2007
    #5
  6. Jonathan N. Little

    Els Guest

    Jonathan N. Little wrote:

    > Els wrote:
    >> Jonathan N. Little wrote:

    >
    >>> Anyone else with IE have trouble with the page in IE, or is the problem
    >>> in this guy's browser...

    >>
    >> No problems in my IE6 (standalone version), but serious probs in IE7:
    >> http://locusmeus.com/temp/pugdog.jpg
    >>
    >> From what I tested quickly, it's caused by the italic text in the <em>
    >> elements (IE italic bug), but can be solved by making enough space for
    >> it, or constraining elements by giving them zoom:1 (IE only code, will
    >> cause validation error). Zoom:1 gives an element 'layout' in IE
    >> (Google for 'hasLayout'), just like position:relative does in some
    >> cases too.

    >
    > Thanks Els, I could not get the guy to send me screen shot. I bet he has
    > IE7 not IE6 as he says! I have not access to 7.
    >
    > If I add horizontal padding to the EM element fix this,


    No, padding on the <em> doesn't help anything, nor does padding on
    #innerWrapper or #outerWrapper.
    One thing that did help I noticed just now, is position:relative on
    the #outerWrapper. Haven not tested the effect of that on IE6 or
    anything though.

    > or do I have to
    > make EM display as BOLD non-ITALIC?


    That certainly does help, as it takes away the Italic bug all together
    :)

    > I just love IE!


    Don't we all! :)

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/
     
    Els, Mar 8, 2007
    #6
  7. Els wrote:

    > No, padding on the <em> doesn't help anything, nor does padding on
    > #innerWrapper or #outerWrapper.
    > One thing that did help I noticed just now, is position:relative on
    > the #outerWrapper. Haven not tested the effect of that on IE6 or
    > anything though.



    NOPE! position:relative on #outerWrapper TOTALLY wipes out both floats
    in IE6! I love it!

    >
    >> or do I have to
    >> make EM display as BOLD non-ITALIC?


    Okay I have change EM, does it now work in IE7?

    http://www.littleworksstudio.com/temp/l2340/
    Yankee Pug Dog Club - 2007 Fund Raiser

    I appreciate the help, I have to get the turkey out. Now I have to
    <shudder> break down and upgrade to XP Pro.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 8, 2007
    #7
  8. Jonathan N. Little

    Els Guest

    Jonathan N. Little wrote:

    > Els wrote:
    >
    >> No, padding on the <em> doesn't help anything, nor does padding on
    >> #innerWrapper or #outerWrapper.
    >> One thing that did help I noticed just now, is position:relative on
    >> the #outerWrapper. Haven not tested the effect of that on IE6 or
    >> anything though.

    >
    > NOPE! position:relative on #outerWrapper TOTALLY wipes out both floats
    > in IE6! I love it!


    <g>

    >>> or do I have to
    >>> make EM display as BOLD non-ITALIC?

    >
    > Okay I have change EM, does it now work in IE7?
    >
    > http://www.littleworksstudio.com/temp/l2340/


    Yup, works nicely :)

    > I appreciate the help, I have to get the turkey out. Now I have to
    > <shudder> break down and upgrade to XP Pro.


    And then you'll see IE7 too then?

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/

    Now playing: Live - [Untitled]
     
    Els, Mar 8, 2007
    #8
  9. Els wrote:
    > Jonathan N. Little wrote:
    >
    >> Els wrote:
    >>
    >>> No, padding on the <em> doesn't help anything, nor does padding on
    >>> #innerWrapper or #outerWrapper.
    >>> One thing that did help I noticed just now, is position:relative on
    >>> the #outerWrapper. Haven not tested the effect of that on IE6 or
    >>> anything though.

    >> NOPE! position:relative on #outerWrapper TOTALLY wipes out both floats
    >> in IE6! I love it!

    >
    > <g>
    >
    >>>> or do I have to
    >>>> make EM display as BOLD non-ITALIC?

    >> Okay I have change EM, does it now work in IE7?
    >>
    >> http://www.littleworksstudio.com/temp/l2340/

    >
    > Yup, works nicely :)



    THANKS! I needed to put this puppy to bed.

    >
    >> I appreciate the help, I have to get the turkey out. Now I have to
    >> <shudder> break down and upgrade to XP Pro.

    >
    > And then you'll see IE7 too then?
    >


    Gaw'd I hate the Fisher-Price GUI, that is the first hack I will have to
    apply. Next the stupid "wizards" for setting things up. If you know
    what you are doing configuring network settings is straightforward even
    in old W98, Don't have to watch the little inane animation "Preparing
    your network connection..." for 10 minutes while XP queries and logs
    every possible configuration and resource! The Linux that I use for my
    servers is beginning to look more an more attractive for my desktop ;-)

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 8, 2007
    #9
  10. Jonathan N. Little

    dorayme Guest

    In article <36eea$45f02779$40cba7c3$>,
    "Jonathan N. Little" <> wrote:

    > I appreciate the help, I have to get the turkey out. Now I have to
    > <shudder> break down and upgrade to XP Pro.


    ....go ahead and leave me to be the only turkey left in the world
    with Win 2000 on my Win box.

    --
    dorayme
     
    dorayme, Mar 8, 2007
    #10
  11. dorayme wrote:
    > In article <36eea$45f02779$40cba7c3$>,
    > "Jonathan N. Little" <> wrote:
    >
    >> I appreciate the help, I have to get the turkey out. Now I have to
    >> <shudder> break down and upgrade to XP Pro.

    >
    > ...go ahead and leave me to be the only turkey left in the world
    > with Win 2000 on my Win box.
    >



    I love Win2k, fast, efficient, stable, no BS. Don't want to change and
    certainly do not want Vista. I am hope to skip that one and in hopes
    that post-Vista OS MS might get it right. But I may not have to worry
    about that if things go as has been the trend. I will be dead and gone
    long before it is released.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 8, 2007
    #11
  12. Jonathan N. Little

    Neredbojias Guest

    On Thu, 08 Mar 2007 15:29:41 GMT Jonathan N. Little scribed:

    > Els wrote:
    >> Jonathan N. Little wrote:
    >>
    >>> Els wrote:
    >>>
    >>>> No, padding on the <em> doesn't help anything, nor does padding on
    >>>> #innerWrapper or #outerWrapper.
    >>>> One thing that did help I noticed just now, is position:relative on
    >>>> the #outerWrapper. Haven not tested the effect of that on IE6 or
    >>>> anything though.
    >>> NOPE! position:relative on #outerWrapper TOTALLY wipes out both
    >>> floats in IE6! I love it!

    >>
    >> <g>
    >>
    >>>>> or do I have to
    >>>>> make EM display as BOLD non-ITALIC?
    >>> Okay I have change EM, does it now work in IE7?
    >>>
    >>> http://www.littleworksstudio.com/temp/l2340/

    >>
    >> Yup, works nicely :)

    >
    >
    > THANKS! I needed to put this puppy to bed.
    >
    >>
    >>> I appreciate the help, I have to get the turkey out. Now I have to
    >>> <shudder> break down and upgrade to XP Pro.

    >>
    >> And then you'll see IE7 too then?
    >>

    >
    > Gaw'd I hate the Fisher-Price GUI, that is the first hack I will have
    > to
    > apply. Next the stupid "wizards" for setting things up. If you know
    > what you are doing configuring network settings is straightforward
    > even in old W98, Don't have to watch the little inane animation
    > "Preparing your network connection..." for 10 minutes while XP queries
    > and logs every possible configuration and resource! The Linux that I
    > use for my servers is beginning to look more an more attractive for my
    > desktop ;-)


    What kind of network are you looking at? I've setup a 3 computer
    wireless peer-to-peer (WEP) ntw with XP _Home_. Manually, 'course.

    --
    Neredbojias
    He who laughs last sounds like an idiot.
     
    Neredbojias, Mar 8, 2007
    #12
  13. Jonathan N. Little

    Rik Guest

    Jonathan N. Little <> wrote:

    > dorayme wrote:
    >> In article <36eea$45f02779$40cba7c3$>,
    >> "Jonathan N. Little" <> wrote:
    >>
    >>> I appreciate the help, I have to get the turkey out. Now I have to
    >>> <shudder> break down and upgrade to XP Pro.

    >> ...go ahead and leave me to be the only turkey left in the world with
    >> Win 2000 on my Win box.
    >>

    > I love Win2k, fast, efficient, stable, no BS.


    Indeed, happy user of an (nlited) w2k pro version here (BTW did you know
    that when you remove the fax support from windows, MS Office can't be
    installed? Strange dependancy..). Certainly with all bells & whistles off
    very efficient. I do have seldom used XP64 box however, handy for checking
    MSIE7.

    --
    Rik Wasmus
    Posted on Usenet, not any forum you might see this in.
    Ask Smart Questions: http://tinyurl.com/anel
     
    Rik, Mar 8, 2007
    #13
  14. dorayme wrote:
    > In article <36eea$45f02779$40cba7c3$>,
    > "Jonathan N. Little" <> wrote:
    >
    >> I appreciate the help, I have to get the turkey out. Now I have to
    >> <shudder> break down and upgrade to XP Pro.

    >
    > ...go ahead and leave me to be the only turkey left in the world
    > with Win 2000 on my Win box.
    >


    The guy is telling me that he *does* have IE6 and not 7, but that the
    content text is missing. He says it is actually there but the same color
    as the background. It is visible if he selects it! I cannot get him to
    send me a screenshot yet, but the content is explicitly defined:

    #innerWrapper { border: .5em solid #8fbc8f; color: #000;
    background-color: #faf0e6; }

    black on flesh color to match their site. I cannot get it to fail. Its
    got you be something specific to his browser. Some Yahoo|Whahoo Toolbar
    mucking things on something.

    I have validated both the markup and the CSS...cannot see what the
    problem could be.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 8, 2007
    #14
  15. Rik wrote:

    > Indeed, happy user of an (nlited) w2k pro version here (BTW did you know
    > that when you remove the fax support from windows, MS Office can't be
    > installed? Strange dependancy..). Certainly with all bells & whistles
    > off very efficient. I do have seldom used XP64 box however, handy for
    > checking MSIE7.


    From the Start>Run command

    echo wacked > %SystemRoot%\media\"Windows XP Startup.wav"

    can give you a bad day the next time you reboot.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 8, 2007
    #15
  16. Jonathan N. Little

    Els Guest

    Jonathan N. Little wrote:

    > dorayme wrote:
    >> In article <36eea$45f02779$40cba7c3$>,
    >> "Jonathan N. Little" <> wrote:
    >>
    >>> I appreciate the help, I have to get the turkey out. Now I have to
    >>> <shudder> break down and upgrade to XP Pro.

    >>
    >> ...go ahead and leave me to be the only turkey left in the world
    >> with Win 2000 on my Win box.
    >>

    >
    > The guy is telling me that he *does* have IE6 and not 7, but that the
    > content text is missing. He says it is actually there but the same color
    > as the background. It is visible if he selects it! I cannot get him to
    > send me a screenshot yet, but the content is explicitly defined:
    >
    > #innerWrapper { border: .5em solid #8fbc8f; color: #000;
    > background-color: #faf0e6; }


    That sets the colours on the wrapper. I think that regardless of what
    causes the problem, you can still make him see the text by setting the
    same colours to the <p> elements as well.
    Unless it's caused by position:relative on something that has
    background-color, then you might need to give the <p> elements
    position:relative too to make them appear 'in front of' its parent.
    I've seen entire images disappear because of position:relative on a
    (grand-)parent, and only got them to re-appear by giving them
    position:relative as well...

    > black on flesh color to match their site. I cannot get it to fail. Its
    > got you be something specific to his browser. Some Yahoo|Whahoo Toolbar
    > mucking things on something.


    Do you know on what OS he is? I've noticed in the past that identical
    browsers give different results between for instance XP and 2000.

    > I have validated both the markup and the CSS...cannot see what the
    > problem could be.


    It's IE6 - validating won't help ;-)

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/

    Now playing: Daniela Mercury - Vermelho
     
    Els, Mar 8, 2007
    #16
  17. Jonathan N. Little

    Bergamot Guest

    Jonathan N. Little wrote:
    >
    > I love Win2k, fast, efficient, stable, no BS. Don't want to change and
    > certainly do not want Vista.


    I'm in the same boat. I didn't bother upgrading to XP because I didn't
    see any real benefit in it. Everything I've seen and heard about Vista
    makes me want to avoid it altogether. The only thing I miss is IE7, but
    I have access to that from a nearby PC. I do hope MS does better with
    the next O/S, not worse.

    --
    Berg
     
    Bergamot, Mar 8, 2007
    #17
  18. Jonathan N. Little

    Bergamot Guest

    Jonathan N. Little wrote:
    >
    > The guy is telling me that he *does* have IE6 and not 7, but that the
    > content text is missing.
    >
    > I cannot get it to fail.


    It's definitely peekaboo. I got the same result as the client after I
    downloaded your test page to my local drive and commented out the <em>
    style rule, letting it default to italics.

    One thing I noticed is that you do not have a container around the 3
    divs in the midsection. I discovered a long time ago that some browsers,
    not just IE, can have quirky renderings if there isn't a separate
    container surrounding just the "column" divs.

    A common cure for IE float weirdness is to set position:relative on the
    floated elements. It usually does no harm to other browsers, but do test
    to make sure. Setting position:relative on the added midsection
    container may cure the other parts.

    zoom:1 is also known to do wonders.

    HTH

    --
    Berg
     
    Bergamot, Mar 8, 2007
    #18
  19. Els wrote:
    > Jonathan N. Little wrote:
    >
    >> dorayme wrote:
    >>> In article <36eea$45f02779$40cba7c3$>,
    >>> "Jonathan N. Little" <> wrote:
    >>>
    >>>> I appreciate the help, I have to get the turkey out. Now I have to
    >>>> <shudder> break down and upgrade to XP Pro.
    >>> ...go ahead and leave me to be the only turkey left in the world
    >>> with Win 2000 on my Win box.
    >>>

    >> The guy is telling me that he *does* have IE6 and not 7, but that the
    >> content text is missing. He says it is actually there but the same color
    >> as the background. It is visible if he selects it! I cannot get him to
    >> send me a screenshot yet, but the content is explicitly defined:
    >>
    >> #innerWrapper { border: .5em solid #8fbc8f; color: #000;
    >> background-color: #faf0e6; }

    >
    > That sets the colours on the wrapper. I think that regardless of what
    > causes the problem, you can still make him see the text by setting the
    > same colours to the <p> elements as well.
    > Unless it's caused by position:relative on something that has
    > background-color, then you might need to give the <p> elements
    > position:relative too to make them appear 'in front of' its parent.
    > I've seen entire images disappear because of position:relative on a
    > (grand-)parent, and only got them to re-appear by giving them
    > position:relative as well...
    >


    *!@#%$#@!#!!* Damn! I did that and even gave the Ps a class and set css as

    #innerWrapper P.ie and it appears to be a (IE6 on WinXP) error seems to
    works on IE6 when on other versions of Windows. Had a friend with WinXP
    check it out and she says the text is then for a second than disappears!


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 9, 2007
    #19
  20. Jonathan N. Little

    BootNic Guest

    > Jonathan N. Little <> wrote:
    > news: cdddc$45efa3c8$40cba7b0$
    > I did up a page for a dog club's website and the "webmaster" says that
    > the content text is not showing in IE6. Now it does have two floated
    > elements and does produce a white artifact sometimes appear *behind*
    > the content text which will disappear upon reload or resizing the
    > window. A peekaboo like problem but I see all the text! I have tested
    > in IEv4-6, v4 does break and IE5.01 doubles the top margin in the
    > body text, phffff! So what--it's IE! ;-) But I cannot reproduce *his*
    > problem and have checked it with 3 different computers.
    >
    > Here is a mockup of the page.
    >
    > http://www.littleworksstudio.com/temp/l2340/
    > Yankee Pug Dog Club - 2007 Fund Raiser
    >
    > Anyone else with IE have trouble with the page in IE, or is the
    > problem in this guy's browser...


    See if setting line-height will make it behave.

    body {
    line-height:1.3;
    }

    --
    BootNic Thursday, March 08, 2007 10:18 PM

    Have no fear of perfection - you'll never reach it.
    *Salvador Dali*
     
    BootNic, Mar 9, 2007
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Emergence

    ie6 peekaboo problem

    Emergence, Jul 31, 2007, in forum: HTML
    Replies:
    15
    Views:
    704
    andrew
    Aug 2, 2007
Loading...

Share This Page