BROWSER PECULARITIES - FIX THIS!!!! - from webaim

Most browsers allow you to select multiple, non-adjacent items with the keyboard by using the arrow keys or CTRL plus the arrow keys to navigate and the space bar to select/deselect individual options. However, in Internet Explorer, you can only activate this keyboard functionality by pressing Shift + F8 while in the multiple select menu. Because of the obscurity of this shortcut and functionality, it is recommended that multiple select menus be avoided. Typically, a set of check box options can provide similar, yet more accessible functionality.

Customize Your Browser's Scrollbar Visibility (or Lack Thereof)

Some people are so bothered by the page shift that they will not use Firefox to browse the web, and wish it gave you the ability to stop the auto-hiding behavior of the vertical scrollbar. Well guess what — it does. Every browser has a default style sheet that is applied to all pages and is responsible for the default margins, link colors, bullet types, and other standard formatting you see across the web. Firefox lets you customize its default style sheet to your liking.

To do so, just create a file called userContent.css in the chrome subfolder of your Firefox profile folder. There will already be a file in there called userContent-example.css that you can just rename and add your rules to. If you don't know where your profile folder is located, you can either find out from the knowledge base on mozillaZine, or take the easy way out, like I did, and install the ChromEdit extension. This extension adds a "Edit User Files" option to the Tools menu on Firefox that allows you to edit userContent.css and other configuration files without having to find and go into your profile folder.

No matter how you go about accessing userContent.css, you can add the above styles to it to force the vertical scrollbar to always show, or use this proprietary Mozilla property:

  html { overflow: -moz-scrollbars-vertical !important; }

Because this is simply a user style sheet for Mozilla only, it doesn't matter if you use proprietary properties such as -moz-scrollbars-vertical to achieve what you are after. After adding this line and restarting Firefox, the vertical scrollbar will now always show on every site you visit, so even if its web developer did not account for the page shift, you've taken care of it from your end.

What about Opera and Safari, you ask? Since they aren't open source, they aren't as forthcoming about how to customize their browsers, so at this time it looks like such customization is not possible. If the page shift bugs you that much, I recommend just browsing with a customized version of Firefox!

Another option to cure the page shift for all sites is simply to disable the vertical scrollbar altogether and just use the scroll wheel on your mouse. Opera lets you turn off scrollbars by going to Tools > Preferences, clicking on the Advanced tab, clicking on the Browsing section, and unchecking "Show scroll bars." To turn off the vertical scrollbar in Firefox, add this line to userContent.css:

  scrollbar[orient="vertical"] { display: none !important; }

After restarting Firefox, you will now never see a vertical scrollbar on any sites, and thus will not see the page shift on any sites.

Disappearing Background Images - Internet Explorer & CSS

IE has a very freaky bug where it likes to make background images (and sometimes even text - particularly if there are floated elements around) disappear.

This often happens when you scroll up and down on a web page and you can usually make the background re-appear by refreshing the page.

Obviously you won't want your site visitors to have to refresh a page to see a background image in full! A freaky solution to this freaky problem is to insert the CSS command, position: relative into the CSS rule containing the background image:

.foo {
  background: url(filename.jpg);
  position: relative
}

Occasionally this won't work, so another solution is to assign a width or a height to the element with the background image. You may not want to assign a height or width, so a solution is to assign a height of 1% for Internet Explorer. Because IE interprets height as min-height (see point 2 above) this CSS rule won't affect the appearance:

.foo {
  background: url(filename.jpg);
  height: 1%
  }
html>body .foo {
  height: auto
}

The height: 1% CSS command is cancelled out by the height: auto CSS command. Internet Explorer doesn't understand html>body, so by inserting this in front of the second CSS rule this whole CSS rule is ignored by IE.

<li> {background-repeat:} In IE

<!--[if lt IE 7]>
  <style>
    #leftnav li { zoom: 1;} /* haslayout=true */
  </style>
<![endif]-->

CSS: Targeting Safari 3 Only

Although Safari 3 tends to render layouts the same as the other leading popular browsers, it prefers to use it’s “aqua” button styling for standard sized form buttons.

One solution for this is to set a dimension (width or height) to the button.

To target Safari 3 in CSS you can use the following to add or override any existing attributes, such as the height of a button:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  button {
    height: 40px;
  }
}

CSS: Targeting Opera & Safari 3

Just in case, here’s also a way to target Opera. The first declaration hits Safari as well so you need to go back and reset Safari. There have been a few times that I needed to hit just Opera and this solves it.

/* Opera and Safari */
@media all and (min-width: 0px) {
  #id { background: #99e; }
    }
    /* Reset Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #id { background: #ede; }
}

CSS Hack: Getting Safari To Behave

{script type="javascript"}
  isSafari3 = false;
  if(window.devicePixelRatio) isSafari3 = true;
{/script}