Lining up text with images to create buttons using CSS

[eclipsme]

Don't know if I haven't been clear in my title or what, but I have
posted this twice with no response - unusual, to say the least! Anyway,
let's try again...

Here is part 2 of trying to create a button with text that is easily
modifiable. The link is:

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

I have created an image for the button - button.gif. It is 76px x 20px
with rounded corners and a transparent background.

I have created a table, well actually 2 tables at this point, in which I
set the background of a cell to button.gif with CSS, as well as a few
other options.

The upper table merges 2 adjacent cells, which allows the buttons to
overlap horizontally - it is perhaps easier to look at the page than for
me to explain it, I think.

I set the cell text to center and type the label for the button.

I am getting different results in IE and FF.

IE: The top table is trying to center the text on the left of the 2
merged cells, though the button.gif appears correct. The bottom table
displays as it should, except the gif appears to be slightly cut off top
and bottom.

FF: Both sets of buttons look good except that the vertical spacing of
the buttons is way off, as if there is an extra row between each cell.

Any ideas?

Thanks,
Harvey

 

[Thomas A. Rowe]

Your post has been answer a number of times. If you want the text to be centered on a button, then
you need to add the text to the button in a image editor.

Have you considered just add the names to the photo, then create a hotspot for each name.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================

 

[Steve Easton]

There are several errors in your css file where you set the padding properly.

padding-left:1;
padding-right:1;
padding-top:4;
padding-bottom:4


1 and 4 what???


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer

 

[eclipsme]

There are several errors in your css file where you set the padding properly.

padding-left:1;
padding-right:1;
padding-top:4;
padding-bottom:4


1 and 4 what???

Thanks, Steve. I am using FP 2002. Whenever I set padding, it has no
place (that I see) for setting the units, and leaves it just like that.
I forget sometimes to go back and correct the units.

I think I got all the units there now, but still no change to the page.
Any other ideas?

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

Harvey

 

[eclipsme]

Your post has been answer a number of times. If you want the text to be centered on a button, then
you need to add the text to the button in a image editor.

Have you considered just add the names to the photo, then create a hotspot for each name.

Thank you for the reply.

Sorry if I missed previous replies, but are you sure you aren't thinking
about another post with a similar subject line? Then again, perhaps my
news server has been dropping posts lately.

Anyway, yes I considered the above, as well as generating buttons
complete with names in PhotoShop, and that is probably what I will do. I
just thought that if I could do this with CSS and text, I would not have
to re-create the button each time a name changed. It seems I have gotten
close, but am having a vertical spacing problem as seen at the site:

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

When seen in IE, the bottom set of buttons is what I want, but in FF
both sets of buttons have too much vertical space.

Any other ideas?

Thanks for the help,
Harvey

 

[Steve Easton]

There's still quite a few that are incomplete.

Do you have FireFox installed??

If so, open the page in FF and then on the FF toolbar click Tools > Javascript Console.
( it does more than check javascript )

 

[Steve Easton]

Also fwiw, the bottom set works correctly in both IE and FF.


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer

 

[Murray]

Not necessarily.

Make the button image the background of a container. Make the line-height
*and* the font-size the same as the button image's height. The text will
center vertically with those adjustments.

 

[eclipsme]

Thanks Steve. I didn't know about using the Javascript console for this.
I will look at this some more!

Harvey

 

[eclipsme]

Not necessarily.

Make the button image the background of a container. Make the line-height
*and* the font-size the same as the button image's height. The text will
center vertically with those adjustments.

Thanks Murray. I think there are enough problems on the page that I need
to sort out, as are being pointed out to me. I will also look at this.

BTW - Favorite on=line store???

Harvey

 

[Murray]

BTW - Favorite on=line store???

8)

Amazon....

 

[cschiller1]

Anyway, yes I considered the above, as well as generating buttons
complete with names in PhotoShop, and that is probably what I will do. I
just thought that if I could do this with CSS and text, I would not have
to re-create the button each time a name changed.

If you use Photoshop it will be really easy to generate additional
buttons once you've designed the first one. Just save the text on a
different layer from the button, and save the whole thing in PSD format
before you flatten it into a gif file. Then for a new label you just
have to change the text layer and re-save.

 

[eclipsme]

If you use Photoshop it will be really easy to generate additional
buttons once you've designed the first one. Just save the text on a
different layer from the button, and save the whole thing in PSD format
before you flatten it into a gif file. Then for a new label you just
have to change the text layer and re-save.

Thanks, Yes, really easy... as long as you remember to save the thing as
a psd file!

Grr...

Harvey

 

[cschiller1]

Ywa, well, there's that.

Thanks, Yes, really easy... as long as you remember to save the thing as
a psd file!

Grr...

Harvey