It actually is possible with the Firebug plugin for Firefox. As you may already know, Firebug allows you to edit HTML and CSS “live” on the page. I put “live” in quotes, because while the changes automatically appear, they won’t be stored to the server.

Actually, that’s not necessarily true either. Using Firebug to edit the HTML within a TinyMCE window, you can then click save in the TinyMCE toolbar and it will actually save, to the server, the HTML that currently exists in that window, including those changes you made using Firebug. An excellent hack that saved me a lot of headache because of someone elses poor implementation. My guess is that it works on other tools similar to TinyMCE. Let me know if you get it working using other CMS tools.

I managed to come up with a very clean working solution by hacking the controls.js file that comes with scriptaculous. The solutions requires replacing the markPrevious and markNext functions and adding a small line of code to the updateChoices function.

Currently, markPrevious and markNext are telling the page to jump around like that, and I’m not sure why! As far as I can tell (please let me know otherwise) this solution could be included in the scriptaculous without breaking a thing (hint, hint to the scriptaculous team).

To implement the solution, replace:

markPrevious: function() {
 if(this.index > 0) this.index--;
  else this.index = this.entryCount-1;
   this.getEntry(this.index).scrollIntoView(true);
},

markNext: function() {
 if(this.index < this.entryCount-1) this.index++;
  else this.index = 0;
  this.getEntry(this.index).scrollIntoView(false);
},

With:

markPrevious: function() {
 if(this.index > 0) {this.index--;}
 else {
  this.index = this.entryCount-1;
  this.update.scrollTop = this.update.scrollHeight;
 }
 selection = this.getEntry(this.index);
 selection_top = selection.offsetTop;
 if(selection_top < this.update.scrollTop){
  this.update.scrollTop = this.update.scrollTop-selection.offsetHeight;
 }
},

markNext: function() {
 if(this.index < this.entryCount-1) {this.index++;}
 else {
  this.index = 0;
  this.update.scrollTop = 0;
 }
 selection = this.getEntry(this.index);
 selection_bottom = selection.offsetTop+selection.offsetHeight;
 if(selection_bottom > this.update.scrollTop+this.update.offsetHeight){
  this.update.scrollTop = this.update.scrollTop+selection.offsetHeight;
 }
},

Now find the updateChoices function and just after the code this.stopIndicator(); add this.update.scrollTop = 0; so that it looks like this:

this.stopIndicator();
this.update.scrollTop = 0;
this.index = 0;

I’ve tested in FF 2.0.0.4, FF 3.0.5, Chrome 1.0.154.43, Safari 3.2.1, Opera 9.5.1, IE 7.0.5730.13 and IE 6.0.2600 without problems.

<div id="main_nav_top_shadow"></div>

And with CSS I’m giving that div a fixed height and a repeating background image that creates the appearance of a shadow being cast upward on top of my main nav.

#main_nav_top_shadow {
height: 6px;
background-image: url(../images/main_nav_top_shadow_x.gif);
background-repeat: repeat-x;
}

The problem is that IE6 thinks that the empty space consists of text. Empty text, but text nonetheless. So what happens is that whatever the default font size for that particular DIV becomes the height of the DIV, rather than my specified height: 6px; in the CSS. There are 2 fixes for this problem, one of which I’ve been using forever and another I just stumbled upon and which prompted me posting both solutions. Both are fairly easy.

Solution #1
This solution is the one I’ve been using forever. Basically, you just choose a font size that’s smaller than the height you are setting.

#main_nav_top_shadow {
height: 6px;
font-size: 1px;
background-image: url(../images/main_nav_top_shadow_x.gif);
background-repeat: repeat-x;
}

That usually does the trick. But this has always seemed wrong. I can’t say why, it just feels weird. Maybe it’s the fact that I’m setting a font size for no text at all.

Solution #2
This solution I found this week and actually makes more sense to me. It involves using simple HTML comments. And not the [if IE] stuff either. Just a plain simple comment:

<div id="main_nav_top_shadow"><!--Leave this empty--></div>

It does not matter what text you put in there. It’s not any command to the browser or anything. But it works, by darn! I guess IE6 feels more comfortable not having anything in that div, as long as you put a comment there.

Not only does that work, but it is the right thing to do. After all, the next guy to come along and read your code might see an empty DIV and be tempted to remove it because it contains no content. This way you can leave some nice little message pleading the proverbial programmer to leave well enough alone!

There’s a nice way to fake piping using really clean, standards friendly code along with our friend, CSS. I’ve been using this method for years now and am quite happy with it. Basically, you start by creating a typical unordered list containing the list of links.

<ul id="piped">
  <li><a href="first">One</a></li>
  <li><a href="second">Two</a></li>
  <li class="last"><a href="third">Three</a></li>
</ul>

I’ll explain the class=”last” in a minute.

Now in your stylesheet you tell the list to be displayed without any bullets and displayed inline rather than stacked as is the default. You also give each link a nice pad on both the left and right. To fake the pipe, you simply add a border to one side. This is where the class=”last” comes in. You don’t want there to be a border after the last link, so for that class, you can simply set the border to none.

ul#piped li{
  display: inline;
  border-right: 1px solid #000;
  padding-left: 10px;
  padding-right: 7px;
}
ul#piped li.last{
  border-right: none;
}

(Realistically, you could also do border-left and class=”first.”)

Of course to get the image to be on it’s own layer, it must be set to position:absolute; but once you give it an absolute position it loses all references to being centered.

I thought I had the solution at one point, until I tested it in IE and it was all wrong. After a few hours of struggling, I finally came up with what now seems like a simple solution:

Adding styles to the image itself was my mistake. In this case I had to wrap the image with a div and give it an id. I then applied the following styles to that div in my stylesheet:

#image {
  position:absolute;
  width: 100%;
  text-align: center;
}

The image itself doesn’t need any other styles.

The problems occurs when you try to fit an extremely long table inside of a CSS layout. For example, you are designing a web based application that has a navigation bar on the left (column 1) and the main content on the right (column 2). In trying to be a good, upstanding, standards conforming citizen, you design the two column layout using css (see example).

Everything seems to be working properly, until that fateful moment in which you add a long table. The table is being used properly because it contains the budget report for this month, i.e. not for layout purposes. This long table creates a lot of problems with the typical two column CSS layout. The craziest part about this whole mess is that depending on which browser you are using completely different problems occur (see example in both IE and Firefox). As you can see from the example, our friend Internet Explorer causes the table to start below the last navigation link. Not only that, but anything above the table seems to disapear. What the devil is IE thinking you might ask? Good question. By viewing the same example in firefox, you will notice that the IE bug does not appear but the table does float right off the mainBody div, past the right border, and does not cause the mainBody to stretch with it’s contents. What the devil is FF thinking? Also a good question—fortunately I have a partial answer to this one.

Firefox, and many other standards friendly browsers will cause the table to bleed on outside the mainBody. As far as my Google research can tell me, this is a correct and standards compliant way to display our example. That’s as much as I know. So to combat the problem, if you are experiencing it, you can add a little <div> around your table and add the following style to it (see example):

overflow:auto;

Now for the IE problem. The simple solution to this problem, but the one that I cannot find documented anywhere on the web, is to place the following style on your navigation (see example):

position:absolute;

This will cause the navigation to "float" on a higher plane than the rest of the content and therefore the long table is unaffected by it. Because it appears within the container, it won’t lose it’s position unless you add other positioning styles such as top or left so you shouldn’t use them in this case.

In IE you can use height on the container, but in Firefox, once the content of that container is too long, it runs outside the borders. In Firefox, you can use min-height, but IE doesn’t recognize it. IE actually handles height the same way firefox handles min-height. So I found a “hack” to make it work in both browsers:

#container{min-height:500px}
* html #container {height:500px}

I’m not really sure why it works, but quite frankly, I don’t care.