Another odd IE flickering CSS problem!

Discussion in 'HTML' started by Rob O, Jul 27, 2005.

  1. Rob O

    Rob O Guest

    Hi again folks

    We have a CSS based site where something very odd is happening to a
    couple of items on the homepage.

    In IE6, take a look at <http://www.littlejohnfraser.com>

    The panel under the left nav contains a text link, with an image
    below.

    Most of the time IE6 does not display the text (other browsers seem
    fine!) and sometimes on a refresh in IE6 the links do re-appear.

    It also appears once you have clicked it and hold the mouse button
    down.

    It also disappears again if you click it then hit the back button.

    Weird eh? Anyone got any ideas on this one?

    TIA

    R
     
    Rob O, Jul 27, 2005
    #1
    1. Advertising

  2. Rob O

    cosmic foo Guest

    "Rob O" <> wrote in message
    news:...
    > Hi again folks
    >
    > We have a CSS based site where something very odd is happening to a
    > couple of items on the homepage.
    >
    > In IE6, take a look at <http://www.littlejohnfraser.com>
    >
    > The panel under the left nav contains a text link, with an image
    > below.
    >
    > Most of the time IE6 does not display the text (other browsers seem
    > fine!) and sometimes on a refresh in IE6 the links do re-appear.
    >
    > It also appears once you have clicked it and hold the mouse button
    > down.
    >
    > It also disappears again if you click it then hit the back button.
    >
    > Weird eh? Anyone got any ideas on this one?
    >
    > TIA
    >
    > R
    >
    >

    In ie 'How to find us' disappears as soon as i
    mouse over any of the menu selections.
    And in firefox when i mouse over 'Home',
    it doesn't chop the top right corner.
     
    cosmic foo, Jul 27, 2005
    #2
    1. Advertising

  3. Rob O

    Rob O Guest

    On Wed, 27 Jul 2005 09:25:54 -0400, "cosmic foo"
    <> wrote:


    >> In IE6, take a look at <http://www.littlejohnfraser.com>
    >>
    >> The panel under the left nav contains a text link, with an image
    >> below.
    >>
    >> Most of the time IE6 does not display the text (other browsers seem
    >> fine!) and sometimes on a refresh in IE6 the links do re-appear.
    >>
    >> It also appears once you have clicked it and hold the mouse button
    >> down.
    >>
    >> It also disappears again if you click it then hit the back button.
    >>
    >> Weird eh? Anyone got any ideas on this one?
    >>
    >> TIA
    >>
    >> R
    >>
    >>

    >In ie 'How to find us' disappears as soon as i
    >mouse over any of the menu selections.
    >And in firefox when i mouse over 'Home',
    >it doesn't chop the top right corner.
    >


    Interesting observation - yep, sure is part of the problem - we just
    can't figure it out, there's no dodgy JS, just some CSS hover stuff
    that's all pretty straightforward....

    R
     
    Rob O, Jul 27, 2005
    #3
  4. Rob O

    JDS Guest

    JDS, Jul 27, 2005
    #4
  5. Rob O

    JDS Guest

    On Wed, 27 Jul 2005 14:15:09 -0400, JDS wrote:

    > I haven't looked, but it sounds like the "peekaboo" bug to me.


    Now I have looked, and I agree with my original diagnosis. the "peekaboo"
    bug.

    Using floats with MSIE is iffy at best. The Holly Hack works, but may
    take some tinkering to get right.

    --
    JDS | lid
    | http://www.newtnotes.com
    DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/
     
    JDS, Jul 27, 2005
    #5
  6. Rob O wrote:

    > Hi again folks
    >
    > We have a CSS based site where something very odd is happening to a
    > couple of items on the homepage.
    >
    > In IE6, take a look at <http://www.littlejohnfraser.com>
    >
    > The panel under the left nav contains a text link, with an image
    > below.
    >
    > Most of the time IE6 does not display the text (other browsers seem
    > fine!) and sometimes on a refresh in IE6 the links do re-appear.
    >
    > It also appears once you have clicked it and hold the mouse button
    > down.
    >
    > It also disappears again if you click it then hit the back button.
    >
    > Weird eh? Anyone got any ideas on this one?
    >
    > TIA
    >
    > R
    >
    >


    The bug you found is quite interesting. Bill Gates should slap himself
    thrice on his cheeks for his silliest and bulkiest web browser.

    Rants apart. I will get rid of the image since it is not serving much
    purpose there. You may also want to "decrease" border or padding around
    images or <h2> element which you use to define "How to Find Us" link.

    In Mozilla, "hover" chops a corner of the link-background. I wonder if
    you designed it like that. Good luck!

    Animesh
     
    Animesh Kumar, Jul 27, 2005
    #6
  7. Rob O

    boclair Guest

    Rob O wrote:
    > Hi again folks
    >
    > We have a CSS based site where something very odd is happening to a
    > couple of items on the homepage.
    >
    > In IE6, take a look at <http://www.littlejohnfraser.com>
    >
    > The panel under the left nav contains a text link, with an image
    > below.
    >
    > Most of the time IE6 does not display the text (other browsers seem
    > fine!) and sometimes on a refresh in IE6 the links do re-appear.


    peekaboo bug
    Add rule height:1px; to #findus

    Louise
     
    boclair, Jul 28, 2005
    #7
  8. Rob O

    kchayka Guest

    boclair wrote:
    >
    > peekaboo bug
    > Add rule height:1px; to #findus


    You might want to reconsider using height as a work-around for various
    IE6 layout bugs. What happens if MS decides to correct IE's broken
    overflow behavior in IE7? This will bite you badly.

    Suggested alternative:
    zoom: 1.0;

    It is a proprietary property which other browsers will ignore, but still
    usually does the job for IE. IMO, it's a case where using non-standard
    code is quite OK.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Jul 28, 2005
    #8
  9. kchayka:
    > boclair wrote:
    >> peekaboo bug

    >
    > What happens if MS decides to correct IE's broken
    > overflow behavior in IE7?


    Actually they kind of did. IE7b1 has the Peekaboo bug fixed---at least
    it says so on
    <http://msdn.microsoft.com/library/default.asp?url=/workshop/essentials/whatsnew/whatsnew_70_sdk.asp>.
     
    =?ISO-8859-1?Q?Christoph_P=E4per?=, Jul 28, 2005
    #9
  10. Rob O

    boclair Guest

    kchayka wrote:
    > boclair wrote:
    >
    >>peekaboo bug
    >>Add rule height:1px; to #findus

    >
    >
    > You might want to reconsider using height as a work-around for various
    > IE6 layout bugs. What happens if MS decides to correct IE's broken
    > overflow behavior in IE7? This will bite you badly.
    >
    > Suggested alternative:
    > zoom: 1.0;
    >


    Thanks for that. I had not come across it though now having googled I
    see it is recommended widely.

    Do you know that the height hack will backfire in IE7? It doesn't in
    existing compliant browsers as far as know.

    I thought that suggesting a height for a div did not constrain the div
    height which is determined rather by the content. It seemed that the
    height hack was fairly innocuous as hacks go.

    I ask because we have authored a number of sites in some of which the
    height hack has been used.

    Louise
     
    boclair, Jul 29, 2005
    #10
  11. Rob O

    Neredbojias Guest

    With neither quill nor qualm, boclair quothed:

    > I thought that suggesting a height for a div did not constrain the div
    > height which is determined rather by the content. It seemed that the
    > height hack was fairly innocuous as hacks go.


    If a height is given, content has nothing to do with it.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Jul 29, 2005
    #11
  12. Rob O

    Els Guest

    Neredbojias wrote:

    > With neither quill nor qualm, boclair quothed:
    >
    >> I thought that suggesting a height for a div did not constrain the div
    >> height which is determined rather by the content. It seemed that the
    >> height hack was fairly innocuous as hacks go.

    >
    > If a height is given, content has nothing to do with it.


    In current IE versions for Windows the content will still make the div
    extend to encompass it. For any other browser, the set height will
    constrain the div, which is why this hack should always be hidden from
    them.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 29, 2005
    #12
  13. Rob O

    Rob O Guest

    On Thu, 28 Jul 2005 08:33:18 -0500, kchayka <> wrote:

    >boclair wrote:
    >>
    >> peekaboo bug
    >> Add rule height:1px; to #findus

    >
    >You might want to reconsider using height as a work-around for various
    >IE6 layout bugs. What happens if MS decides to correct IE's broken
    >overflow behavior in IE7? This will bite you badly.
    >
    >Suggested alternative:
    >zoom: 1.0;
    >
    >It is a proprietary property which other browsers will ignore, but still
    >usually does the job for IE. IMO, it's a case where using non-standard
    >code is quite OK.


    Thanks folks! correctly diagnosed and fixed (well, for now :) )

    Changes wil not be visible yet, but all hunky dory on the dev server.

    Cheers

    R
     
    Rob O, Jul 29, 2005
    #13
  14. Rob O

    Neredbojias Guest

    With neither quill nor qualm, Els quothed:

    > Neredbojias wrote:
    >
    > > With neither quill nor qualm, boclair quothed:
    > >
    > >> I thought that suggesting a height for a div did not constrain the div
    > >> height which is determined rather by the content. It seemed that the
    > >> height hack was fairly innocuous as hacks go.

    > >
    > > If a height is given, content has nothing to do with it.

    >
    > In current IE versions for Windows the content will still make the div
    > extend to encompass it.


    Perhaps under certain circumstances, but I've used overflow:auto on set-
    height divs with some success.

    > For any other browser, the set height will
    > constrain the div, which is why this hack should always be hidden from
    > them.


    I haven't examined the "hack" but suspect it works for reasons other
    than what might be construed from the result. Hopefully, IE7 will cure
    a lot of these anomalies without spawning a host of new ones.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Jul 30, 2005
    #14
  15. Rob O

    Els Guest

    Neredbojias wrote:

    > With neither quill nor qualm, Els quothed:
    >
    >> Neredbojias wrote:
    >>
    >>> With neither quill nor qualm, boclair quothed:
    >>>
    >>>> I thought that suggesting a height for a div did not constrain the div
    >>>> height which is determined rather by the content. It seemed that the
    >>>> height hack was fairly innocuous as hacks go.
    >>>
    >>> If a height is given, content has nothing to do with it.

    >>
    >> In current IE versions for Windows the content will still make the div
    >> extend to encompass it.

    >
    > Perhaps under certain circumstances, but I've used overflow:auto on set-
    > height divs with some success.


    Ah, I thought the /goal/ was to make it encompass the content ;-)

    >> For any other browser, the set height will
    >> constrain the div, which is why this hack should always be hidden from
    >> them.

    >
    > I haven't examined the "hack" but suspect it works for reasons other
    > than what might be construed from the result. Hopefully, IE7 will cure
    > a lot of these anomalies without spawning a host of new ones.


    After reading most of the replies on this blog entry:
    http://blogs.msdn.com/ie/archive/2005/07/27/444004.aspx
    I've lost hope of IE7 fixing anything, really...

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 30, 2005
    #15
  16. Rob O

    Neredbojias Guest

    With neither quill nor qualm, Els quothed:

    This stupid newsreader accidently deleted your last reply as I was going
    to answer it but I remember the gist of it.

    You said something like 'I thought the content was the point...'

    It is. I just made an IE hack for "position:fixed;" which is why I know
    at least sometimes IE honors the height parameter. Perhaps you need to
    include an overflow statement, or width or something else, but I've done
    it both under transitional and strict doctypes with fully-validating
    pages. Basically, the trick was to put a div in another overflow-auto
    div. Maybe the inner div expanded with content, but that had no height
    setting. Also, maybe width differs reactively from height (-though I
    don't think so.)

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Jul 30, 2005
    #16
  17. Rob O

    Els Guest

    Neredbojias wrote:

    > With neither quill nor qualm, Els quothed:
    >
    > This stupid newsreader accidently deleted your last reply as I was going
    > to answer it but I remember the gist of it.
    >
    > You said something like 'I thought the content was the point...'


    Almost ;-)
    I thought the point was to make the div's height extend to encompass
    the content. IE does that, even if you give the div a height of say
    1px. That is, if you don't add stuff like overflow properties.

    > It is. I just made an IE hack for "position:fixed;" which is why I know
    > at least sometimes IE honors the height parameter.


    It does honour that parameter, if the content isn't too high, and if
    no overflow property is set.

    > Perhaps you need to
    > include an overflow statement, or width or something else, but I've done
    > it both under transitional and strict doctypes with fully-validating
    > pages.


    I wouldn't expect anything else :)

    > Basically, the trick was to put a div in another overflow-auto
    > div. Maybe the inner div expanded with content, but that had no height
    > setting. Also, maybe width differs reactively from height (-though I
    > don't think so.)


    I'm still not sure what the actual objective of your hack was though.
    Were you trying to make IE expand a div's height based on the content?
    Or were you trying to do the opposite, and make IE honour the set
    height and have the content scroll?

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 30, 2005
    #17
  18. Rob O

    Neredbojias Guest

    With neither quill nor qualm, Els quothed:

    > Neredbojias wrote:
    >
    > > With neither quill nor qualm, Els quothed:
    > >
    > > This stupid newsreader accidently deleted your last reply as I was going
    > > to answer it but I remember the gist of it.
    > >
    > > You said something like 'I thought the content was the point...'

    >
    > Almost ;-)
    > I thought the point was to make the div's height extend to encompass
    > the content. IE does that, even if you give the div a height of say
    > 1px. That is, if you don't add stuff like overflow properties.
    >


    Okay, apparently the measurable height does grow with the content unless
    you specify an overflow property. So a "hack" for getting around this
    fault could be specifying the overflow property.

    > > It is. I just made an IE hack for "position:fixed;" which is why I know
    > > at least sometimes IE honors the height parameter.

    >
    > It does honour that parameter, if the content isn't too high, and if
    > no overflow property is set.
    >


    I think we agree. In IE, content expands a div if it exceeds the div's
    dimensions unless the height (or width) is set and overflow is set to
    auto.

    > > Perhaps you need to
    > > include an overflow statement, or width or something else, but I've done
    > > it both under transitional and strict doctypes with fully-validating
    > > pages.

    >
    > I wouldn't expect anything else :)
    >
    > > Basically, the trick was to put a div in another overflow-auto
    > > div. Maybe the inner div expanded with content, but that had no height
    > > setting. Also, maybe width differs reactively from height (-though I
    > > don't think so.)

    >
    > I'm still not sure what the actual objective of your hack was though.
    > Were you trying to make IE expand a div's height based on the content?
    > Or were you trying to do the opposite, and make IE honour the set
    > height and have the content scroll?


    The latter - have the div scroll in order to place a "fixed" top
    section. It works, but there are a few other problems relating to the
    volatile absence or presence of the side scrollbar. Here's an example
    (-which needs javascript so I could include both "normal" and "IE" modes
    although the same could be done non-jsish using something like php.)

    http://www.neredbojias.com/delta/strozzi.html

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Jul 31, 2005
    #18
  19. Rob O

    Els Guest

    Neredbojias wrote:

    >> I'm still not sure what the actual objective of your hack was though.
    >> Were you trying to make IE expand a div's height based on the content?
    >> Or were you trying to do the opposite, and make IE honour the set
    >> height and have the content scroll?

    >
    > The latter - have the div scroll in order to place a "fixed" top
    > section. It works, but there are a few other problems relating to the
    > volatile absence or presence of the side scrollbar. Here's an example
    > (-which needs javascript so I could include both "normal" and "IE" modes
    > although the same could be done non-jsish using something like php.)
    >
    > http://www.neredbojias.com/delta/strozzi.html


    I can see the fixed header in IE and Firefox, but Opera (javascript
    enabled) doesn't do it. Opera also has the images centered instead of
    stuck to the sides (text-align: justify ?)

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 31, 2005
    #19
  20. Rob O

    kchayka Guest

    Neredbojias wrote:
    >
    > In IE, content expands a div if it exceeds the div's
    > dimensions unless the height (or width) is set and overflow is set to
    > auto.


    Please use overflow:auto with extreme caution. Scrolling divs can be a
    PITA for keyboard navigation. :(

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Aug 1, 2005
    #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. SEWilson

    Re: Flickering effect

    SEWilson, Aug 23, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    1,086
    SEWilson
    Aug 23, 2003
  2. yop

    Flickering on Listbox control

    yop, Aug 27, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    440
  3. vinay

    Flickering

    vinay, Aug 27, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    520
    S. Justin Gengo
    Aug 27, 2003
  4. Manohar

    How to Avoid Flickering?

    Manohar, Nov 6, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    1,289
    Rajesh.V
    Nov 6, 2003
  5. Michael Speer

    Odd behavior with odd code

    Michael Speer, Feb 16, 2007, in forum: C Programming
    Replies:
    33
    Views:
    1,104
    Richard Heathfield
    Feb 18, 2007
Loading...

Share This Page