Another odd IE flickering CSS problem!

  • Thread starter Thread starter Rob O
  • Start date Start date
R

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
 
Rob O said:
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
Click to expand...
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.
 
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.
Click to expand...

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
 
I haven't looked, but it sounds like the "peekaboo" bug to me.
Click to expand...

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.
 
Rob said:
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
Click to expand...

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
 
Rob said:
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.
Click to expand...

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

Louise
 
boclair said:
peekaboo bug
Add rule height:1px; to #findus
Click to expand...

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.
 
kchayka said:
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;
Click to expand...

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
 
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.
Click to expand...

If a height is given, content has nothing to do with it.
 
Neredbojias said:
With neither quill nor qualm, boclair quothed:


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

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.
 
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.
Click to expand...

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
 
With neither quill nor qualm, Els quothed:
In current IE versions for Windows the content will still make the div
extend to encompass it.
Click to expand...

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.
Click to expand...

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 said:
With neither quill nor qualm, Els quothed:


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

Ah, I thought the /goal/ was to make it encompass the content ;-)
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.
Click to expand...

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...
 
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 said:
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...'
Click to expand...

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.
Click to expand...

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.
Click to expand...

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.)
Click to expand...

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?
 
With neither quill nor qualm, Els quothed:
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.
Click to expand...

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 does honour that parameter, if the content isn't too high, and if
no overflow property is set.
Click to expand...

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.
I wouldn't expect anything else :-)


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?
Click to expand...

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 said:
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
Click to expand...

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 ?)
 
Neredbojias said:
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.
Click to expand...

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