homepage Welcome to WebmasterWorld Guest from 54.227.41.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
crazy IE6 issue, maybe CSS maybe HTML.
ie6 text images distort scroll bug crazy
ineedhelps




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

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

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

* {
position:relative
}

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]

 

4css




msg:3831199
 12:32 pm on Jan 21, 2009 (gmt 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. :)

ineedhelps




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

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 {
display:none;
}
.rollover img {
border:none;
}
:root .rollover img {
display:block;
}

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

simonuk




msg:3832073
 9:37 am on Jan 22, 2009 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved