Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

crazy IE6 issue, maybe CSS maybe HTML.

ie6 text images distort scroll bug crazy



10:08 pm on Jan 20, 2009 (gmt 0)

Inactive Member
Account Expired


ok strange error. im not really sure how to fix this.

it is only happening in IE6, ive tested IE7, safari, opera, firefox and it doesnt happen there

for some reason, all the text and images that are under my (fixed position non scrolling) background, as soon as you scroll, everything gets massively distorted and blurs like crazy

here is a screenshot i took in ie6 to illustrate it

i found somewhere that you could add the following to the top of your css/style declaration to workaround this bug :

* {

although sometimes that does work on my site, other times it completely crashes IE6 (not to mention it messing up some of the spacings for the popup menus im using)

(i think that this is being caused by the fact that my site is using frames, and that at the top frame there is a css image replacement/rollover being used on the menus. but as far as to how to resolve it i am clueless.)

if i remove the background from the bottom (main) frame, the problem goes away. ideas?

[edited by: swa66 at 4:22 am (utc) on Jan. 21, 2009]
[edit reason] No personal URLs, please describe it in words instead [/edit]

12:32 pm on Jan 21, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 23, 2004
posts: 728
votes: 0

Hi ineedhelps

Welcome to WebmasterWorld!

Please take some time to read the Forum Charter [webmasterworld.com]. This will give you some ideas on how to post for help. No posting of url's is permitted.

You might wish to post your css within here so that it could be viewed. Reading the forum charter will guide you on how to post.

I hope that this helps you out a bit. Once your code is able to be viewed help will be able to be provided better. :)


5:58 pm on Jan 21, 2009 (gmt 0)

Inactive Member
Account Expired


hmm ok this is going to be extremely difficult to explain but ill try

my site has frames, the very top frame is a sort of navigational menu using a css rollover image replacement technique. the top frame is 100 px tall.

the bottom frame (the main display frame of the site) has a static fixed position background that is set to not repeat at all, just to stay static at the top and not scroll around with the page. the background is 100px tall. i have, in html, the text 'welcome' that is overlapping the background.

for some reason, almost always on a fresh reload of my website in IE6 the background is repeated vertically, but there is no code at all to do such. i know this is a wild bug for sure because it not only is repeating the background image, but it is also repeating the word 'welcome' along with it! but that word is in flat html one single time. the first instance of the word is clickable/highlightable. in other words, its real text-- but every other 'repeating' instance of it is not clickable or editable because its, well, its not actually 'really' there, its just being repeated over and over like some sort of strange video anomaly- almost like some sort of strange video artifact like when your video cards memory has failing memory addresses.

so, if i load another page in the bottom frame that has alot of text and is can be scrolled up and down, as soon as you scroll downward all of the text that is under the 100px background image goes totally nuts, its like... its like the text isnt refreshing, everywhere there 'was' text when you scroll, the text remains as a 'ghost' and doesnt clear off. so, the more you scroll, the more impossible it becomes to read anything at all. if you highlight the text, it reappears through the mess, although there is still massive distortion behind it.

im almost positive that this has something to do with the css image replacement technique im using along with the use of frames. if i remove the background from the bottom frame, the problem vanishes.

here is the code applicable to the image rollover technique:

.rollover span.alt {
.rollover img {
:root .rollover img {

.rollover, .rollover:visited {
background-color:transparent !important; /* needed for Opera5/6 */
background-position:0 0;
.rollover:hover, .rollover:focus, .rollover:active, .rollover.MMO, .rollover.MMO:visited {
background-position:0 -26px;

9:37 am on Jan 22, 2009 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 9, 2003
votes: 0

Sounds like it might be the peakaboo bug. To see if this is the case try adding position:relative to the problem div and see if it disappears.

If the container has a float you can simply add a line-height to the rules and that should also clear it up.


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members