Member Avatar for Bram2

I'm trying to create a graphical button with custom images and text on it. My approach was to split the generic button image into 3 parts:

(The img tag doesn't seem to work (?) so here are links to the 3 images)
button_left.gif - button_middle.gif - button_right.gif

Then create a borderless table with these images as background, and put the desired content (text and/or images such as this random icon.gif) in the middle.

Below is what I got so far. Three questions:

  1. Am I on the right track, or should I do this completely differently?
  2. On Firefox and Opera, it looks OK. On IE6, there's two white bars in the button. How do I fix that?
  3. Is there a way to not make the table break to a new line? I.e. could I put this button thing somewhere between regular text?

Thanks a lot in advance!

Here's my current HTML:

<html><head>

<style type="text/css">
<!--
 a { text-decoration: none; } 
 table { border-spacing: 0; }
 td.ButtonMain { vertical-align: center; font-family: Arial; font-weight: bold; color: #ffffff; }
 img.ButtonImg { border: 0; vertical-align: middle; }
-->
</style>

</head>
<body text='#000000' bgcolor='#ffffff'>

<a href='some/other/page'>	
<table><tr class='ButtonRow' height='68px'>
<td background='button_left.gif' width='36px'></td>
<td background='button_middle.gif' class='ButtonMain'>

<img src='icon.gif' class='ButtonImg'> Click here for something wonderful to happen!

</td>
<td background='button_right.gif' width='36px'></td>
</tr></table>
</a>

</body></html>
  • 3 Contributors
  • 2 Replies
  • 91 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by crisane_love

Recommended Answers

All 2 Replies

Member Avatar for blocblue

Okay, firstly, to fix the white lines in IE, I believe you'd need to add the following to your css stylesheet for the button table.

table {
[INDENT]border-collapse: collapse;[/INDENT]
}

Secondly, I think you're going about this the wrong way. The use of background images are correct, but not the table. Have a look at the following link, as I think that will answer your questions.

http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/

Best,

R.

Member Avatar for crisane_love

how to work this program in java?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.