CSS Workarounds / Hacks

Fixed Positioned Elements with Compliant Browsers

You can set an element to a fixed position and not invoke IE's gag reflex by using a CSS child selector. Set the element to an absolute position and then declare the element position fixed in another declaration using the child selector ('>'). Here is what your stylesheet would look like:

IE ignores the child selector, but more standards compliant browsers that adhere to the W3C specifications will render the element fixed. If you look at this site in IE and then look at it in Opera or Netscape, you will notice that the upper left graphic that says Dave's Web Help does not scroll in the latter browsers, but does in IE. This is the hack I used to achieve this effect, in fact, I took this code right out of my stylesheet and changed the element name to element.

Refer to the additional resources for more information on child selectors and fixed position elements.

Disappearing Elements in IE

Under certain circumstances, IE likes to make images, text, and other blocked or inline elements disappear. I get this problem a lot when I move my cursor over links or scroll the page. Here's a simple hack that will clear up most of the problem. I say most because IE can be quite quirky in standards mode and this hack won't clear up all the Houdini acts you will come across. I have found this to be quite effective though in almost every case. Just add height:100% to the parent element of the disappearing element or to the element itself:

Oddly enough, this seems to fix A LOT of CSS bugs in IE.

Get List Elements to Expand Fully in Netscape

Here's a head scratcher. You create an unordered or ordered list for your menu and it works fine in every browser except Netscape. Netscape decides you need some extra space between the ul or ol "box" and the list elements. To fix it so your list items fully expand into the ul or ol box, add a padding declaration to your ul or ol declaration and give it a value of 0:

That ought to clear up the problem...