Another odd IE flickering CSS problem!

[Rob O]

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

[cosmic foo]

"Rob O" <ro********@riverweb.dot.co.dot.uk> wrote in message
news:ld********************************@4ax.com...

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.

[Rob O]

On Wed, 27 Jul 2005 09:25:54 -0400, "cosmic foo"
<so*******@fromnothing.com> 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

[JDS]

On Wed, 27 Jul 2005 16:37:26 +0000, Rob O wrote:

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....

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

Try the Holly Hack:
http://www.onestab.net/a/pie/explorer/peekaboo.html

dunno if it will work
--
JDS | je*****@example.invalid
| http://www.newtnotes.com
DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/

[JDS]

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 | je*****@example.invalid
| http://www.newtnotes.com
DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/

[Animesh Kumar]

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

[boclair]

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

[kchayka]

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.

[Christoph Päper]

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>.

[boclair]

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

[Neredbojias]

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.

[Els]

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 -

[Rob O]

On Thu, 28 Jul 2005 08:33:18 -0500, kchayka <us****@c-net.us> 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

[Neredbojias]

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.

[Els]

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 -

[Neredbojias]

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.

[Els]

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 -

[Neredbojias]

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.

[Els]

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 -

[kchayka]

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]

Christoph Päper wrote:

kchayka:

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

Fixing the peekaboo bug does not address the broken overflow behavior.
It merely eliminates the need to set height as a hack to prevent the
peekaboo bug.

AFAICT, IE's default overflow behavior is still broken.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Neredbojias]

With neither quill nor qualm, Els quothed:

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 ?)

True. It's only set up for IE and Gecko; all other browsers default to
default which is simply a non-fixed top. That style page was mainly a
test for an IE-specific function, not position-fixed in browsers.

--
Neredbojias
Contrary to popular belief, it is believable.

[Neredbojias]

With neither quill nor qualm, kchayka quothed:

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. :(

The overall formula for that page, which used to stylize most of my
site's pages in the transitional flavor, I have now deprecated in favor
of a simpler, dtd-strict, earnestly standards-compliant outline. I'm
pretty sure it's the only one left, which I upgraded to strict and kept
for nostalgic reasons. Although it works, there are drawbacks (as you
suggested) as with frames and I'm now inclined to avoid javascript or
even PHP (etc.) wherever possible.

--
Neredbojias
Contrary to popular belief, it is believable.

[Jean Pierre Daviau]

http://www.positioniseverything.net/easyclearing.html