Today I played around with my feedback button (a button that sticks on the edges.)

The one I had worked on manually was fixed on the edge just fine, even in Internet Explorer.

Today, I felt like testing a few more things and thus tested with some HTML code. The code was very simple, a few paragraphs, one div with the feedback button, and a few more paragraphs. The style for the feedback button was in the <style> block in the header.

It worked just find in SeaMonkey and I found something of interest! (see below) but the position of the feedback button was fixed.

  ...
  position: fixed;
  ...

As you can see, it's quite usual CSS code. Nothing fancy. I also included the correct z-index, a position and a size for the box. (pretty much a complete copy from the version that worked.)

I could NOT make it work in Internet Explorer. The position was taken as static. Really weird! At first I had the info inline using the style attribute, but that does not support the anchor hover functionality which I wanted to support.

So, the position was inside the <style> block. Nope. I.E. just did not want to hear about it. The difference with the other version? Simple, the version that works has the CSS code in a separate .css file! Crazy!

So now the interesting thing I found is this... I can have a simple CSS file with the following:

  .mo-feedback {
    padding: 0;
    margin: 0;
    position: fixed;
    z-index: 1000;
  }
  .mo-feedback a {
    padding: 0;
    margin: 0;
    display: block;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: 0 0;
  }
  .mo-feedback a:hover {
    background-position: 100% 0;
  }

As you can see, I have padding, margin cleared out (so the button sticks to the edge exactly,) and a position set to fixed with a z-index that will make the button appear on top of the other items.

Next, the anchor is marked as a block so it fills the div block. It removes the text decoration so we don't see an underscore in there. And the background is set to no-repeat and position 0 0.

When hovering, we move the background 100% to see the other side. (i.e. the image is x2 wider with a sample of the button on the left which is shown when the mouse is not over the button and another sample on the right that shows the button focused.

There is such a button:

Now, you may have noticed that I did not specify the image in the CSS file. That's because I want my users to be able to change the image on the fly and thus it is instead defined in the anchor, and so is the size of the image.

The HTML that I generate dynamically (since putting the CSS in the <style> block wouldn't work!?) goes like this:

<div class="mo-feedback" style="bottom: 0; left: 50px; width: 150px; height: 90px;">
<a href="/contact" style="width: 150px; height=90px; bakground-image: url(feedback.png);">&nbsp;</a>
</div>

This is not exactly what I have since the HREF link and the feedback.png need to be defined with the correct path, etc. but it gives you a good idea.

Now notice the position in the <div> tag... This example places the button on the bottom edge 50 pixels away from the left edge. Depending on the button, you can place it at the top, on the left, on the right or on the bottom edge. You can also have buttons that fit corners.

Then the anchor includes a background-image entry. This defines the image as shown in the sample up there. The width of 150px is the width of one button. The CSS file background position of 100% will switch between the image on the left to the one on the right. This gives you a great visual effect when moving the mouse over the button (i.e. the button grows and the text becomes orange.)

So... here we go for the lesson:

1) Always put a position: fixed; in your CSS files.

2) Use the background-image style on your anchor to be able to dynamically define it (with the sizes and position as required by your theme.)

By the way, there is another thing to know about CSS 2.x. You are supposed to be able to specify hover (and any other modifier) inline. It just isn't supported by any browser. The syntax goes like this:

  style="{color: red;} hover: {color: blue;}"

Maybe it will be supported with the next version.