Centering text on generic button background

[eclipsme]

I have a page I am working on:

http://www.eclipsme.com/rockledge/city_council.html

I have a gif called button.gif that I would like to use as a generic
button background, and would like to be able to put whatever text I want
on top of it, so I don't have to create a separate button for every
instance. I have tried to do this on the left side of the table, but as
you can see, without success. Is this even possible?

On the right side of the table, I have created a style to format the
cell as a button. This works reasonable well except the client doesn't
like this approach. They want rounded corners.

I have tried various ways of doing this, but the gif is either cut off
or the text isn't centered, or something else is off.

Also, I am using the table to position the buttons, but this seems
clumsy. Is there a better way to go about this as well?

Thanks,
Harvey

 

[Trevor L.]

I have a page I am working on:

http://www.eclipsme.com/rockledge/city_council.html

I have a gif called button.gif that I would like to use as a generic
button background, and would like to be able to put whatever text I
want on top of it, so I don't have to create a separate button for
every instance. I have tried to do this on the left side of the
table, but as you can see, without success. Is this even possible?

I can't see any style named buttonbackground in styles.css. Have you
modified the code since you posted this?

Is "buttonbackground" meant to be something like
..buttonbackground { background-image: url("button.gif") ; } ?

On the right side of the table, I have created a style to format the
cell as a button. This works reasonable well except the client doesn't
like this approach. They want rounded corners.

I think your style "button" is a great simulation of a button. What's so
special about rounded corners. OK, so I use them a bit, but they can be very
fiddly to implement.

But if you have to do what the client asks, what can you do (shrugs
shoulders)? Except maybe try to convince them that it is not possible with
the current state of HTML/CSS - would that be a white lie?

Clearly you can create separate buttons in an image editor, but that is more
work for you, so don't let the client know that !!

I have tried various ways of doing this, but the gif is either cut off
or the text isn't centered, or something else is off.

Is this using a background-image?
I have the feeling that you can't resize a backgrouind-image, so you would
have to resize the image itself to the size that you will be using for the
button

Have you tried the CSS align statements
td {text-align: center;
vertical-align: middle;}

I assume that these will align the content of the cell relative to the cell
itself.

Also, I am using the table to position the buttons, but this seems
clumsy. Is there a better way to go about this as well?

I think this is a good way to do it. You could try absolutely postioned
<div>s, but you may run into trouble when people resize their browser page.

 

[eclipsme]

Trevor,

You are sharp. Evidently I did not publish the style sheet - oops! It is
now, but here is the relevant part:

..buttonbackground {
background-image: url('images/button.gif');
background-repeat: no-repeat;
}

..buttonbackground td {
text-align: center;
vertical-align: middle;}

..buttonbackground a {
color: #FFFFFF;
text-decoration: none;
background-color:transparent;
}

The background image is 16px x 60px. I have tried making sure the cells
are big enough to hold the graphic, even tried padding the names with
spaces to make sure they are long enough to expose the entire image.

The buttons are different in FF and IE. They look better in IE - more
centered, but still cut off. I suspect that background images applied to
a cell is just not well supported. Is that true?

Harvey

 

[Trevor L.]

Trevor,

You are sharp. Evidently I did not publish the style sheet - oops! It
is now, but here is the relevant part: [snip]
The background image is 16px x 60px. I have tried making sure the
cells are big enough to hold the graphic, even tried padding the
names with spaces to make sure they are long enough to expose the
entire image.
The buttons are different in FF and IE. They look better in IE - more
centered, but still cut off. I suspect that background images applied
to a cell is just not well supported. Is that true?

In IE they look fine. There are no cutoffs for me - using 1024 *768

Well, Smith and Phillips looks OK - they have rounded corners - the others
do not. Except Forester which is almost rounded. For me, it shows in black
text with the corners not quite right.

It is strange that the code for Smith and Schultz are the same yet one has
rounded corners, the other does not
<tr>
<td width="65" height="18" align="center"></td>
<td width="65" height="18" align="center"></td>
<td width="65" height="18" align="center"></td>
<td width="65" height="18" colspan="2" align="center"
class="buttonbackground">
<a href="councilseat1.html">Smith</a></td>
...
</tr>
<tr>
<td width="65" height="18" align="center"></td>
<td width="65" height="18" align="center"></td>
<td width="65" height="18" align="center"></td>
<td width="65" height="18" align="center"></td>
<td width="65" height="18" colspan="2" align="center"
class="buttonbackground">
<a href="mayor.html">Schultz</a></td>
....
</tr>
I can't figure out how code which is identical (apart from the name of the
linked file) can prduce different results

In FF, the text does not align. I tried resizing to 800*600 and it made no
difference.

I have a memory of a post here that FF treats top margins differently to IE.
So have a look for <div>s in the code . You may have to set margin-top to a
negative value when using FF perhaps with an IE contitional comment