Browse > Home / Archive by category 'CSS'

Fix Scrolling Render Bug in IE

August 25, 2008

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

Written by Olegs Marhelis · Filed Under CSS, Web Design 

Better Image replacement technique

January 2, 2008

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

Written by Olegs Marhelis · Filed Under CSS, Web Design 

Image replacement technique

January 2, 2008

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.

Written by Olegs Marhelis · Filed Under CSS, Web Design