Fix Scrolling Render Bug in IE

This fixes a very annoying bug in IE by where when you scroll the page becomes corrupted. It relates to the way IE renders pages. This code places a null background image behind, making IE render the page differently.

This can also be place on the body tag unless it already has a background.

1. html {
2. background: url(null) fixed no-repeat;
3. }

Better Image replacement technique

It fixes bug that makes the solution unusable if images are switched off in a browser:

The HTML code:

<h1 class=”ReplaceWithImage” id=”ImageHeader”>Replaced Text<span></span></h1>

The CSS code: 

.ReplaceWithImage{
  position:relative;
  margin:0px; padding:0px;
  /* hide overflow:hidden from IE5/Mac */
  /* \*/
  overflow: hidden;
  /* */
}
.ReplaceWithImage span{
  display:block;
  position:absolute;
  top:0px;
  left:0px;
  z-index:1; /*for Opera 5 and 6*/
}
#ImageHeader, #ImageHeader span{
  height:100px;
  width:300px;
  background-image: url(image.jpg);
}

Works in:

• Opera 5 and up
• IE 7/win
• IE 6/win
• IE 5.5/win
• IE 5/win
• Mozilla Firebird
• Mozilla 1.2
• Konqueror 3.1.2
• Safari
• Camino
• Omniweb
• IE5.2/Mac OS X

Image replacement technique

I believe that this image replacement technique works for people with screen reading software. It will make some body’s life easier.

This technique keeps the text visible to the screen reader software and hidden to the user.

This is what you need to do:

<div class=’ReplaceWithImage’>
Invisible Text
</div>

And this CSS code:

.ReplaceWithImage
{
  background: url(image.jpg);
  text-indent: -7777px;
}

What it does :
I moves text 7777 pixels to the left and places image in it’s place.