Liquid Anchor Button

I can’t cover every detail, however I will cover the nuts and bolts of how I got this div based layout to get liquid, keep the rounded corners at all times, and act like a table.

Code Example:

Explination:

What is going one here is that I have made a button with three divs inside. When you look at "a.button" you will notice that it floats left and every div inside will float left too. The floating will stack all the internal divs side by side. I have also asaigned the background image height to 31px. This will keep the anchor open and I have deliberately told the anchor not to display as block. The last thing I did to the anchor was to use a holly hack ("*") which tells all IE browsers to change the cursor to a pointer, "*cursor:pointer;" when the cursor is over the anchor.

For the ".left" and ".right" divs I am using a sprite to display both the left and right divs. I set the height to be 31px of the image (button-edge-blue.png). Next, notice that the image width is 34px, but I have set both the left and right divs to have a width of 17px which is half that of 34px. Next look at "a.button:link .left{float:left;height:31px;width:17px;background:transparent url(images/button-edge-blue.png) top left;}." Notice that I have set the background image to be "top left" where on "a.button .right" I set the image to "top right." What is going on is that I have a larger image that 17 x 31 and I am telling the browser to move the image around inside of that div. So for the left div, I am telling the image to move to the top left of the image and on the right div I am telling it to move to the top right corner of the image.

The next thing I want you to notice is that I have not defined the width of "a.button:link .mid." This will allow the div to become liquid and expand to whatever is put in it. Next I tell any text that is placed within that div to align center, "text-align:center;." The last thing you need to notice in the "a.button:link .mid" div is that I have told "a.button:link .mid." to repeat horizontally ("repeat-x." ) no matter how wide it becomes.

Next I want you to notice that I have assigned a roll-over effect that changes the background on the hover. All that is going on here is that I am telling the hover state of each div to move to the "bottom" of the image.

The last thing you need to notice is where I tell the div inside of the div named mid to move down 8px, "a.button:link .mid div." This simply puts the text in the middle of the anchor.

The next section labeled " /*___ BUTTON IE6 __*/" is a serious of over-rides that make IE6 behave. Basically, IE6 can't cope with the sprites, consequently I cut them into separate images.