Forum Moderators: not2easy
<a class="button" href="z.htm">
<span class="buttonLabel">Delete</span>
</a>
Is it possible to make an image with the text under the image? Like this:
#######
# image #
#######
Delete
I can get the image and the text no problem, but I can't figure out how to position the text below the image. I've tried the following, and other variations like vertical-align, to no avail:
.button{
display:inline;
height:24px;
width:24px;
margin:0px 10px 0px 0px;
background:transparent url('delete.png') no-repeat top center;
}
.buttonLabel{
font-size:9px;
margin-top:25px;
}
Unfortunately I have to use the transitional doctype.
Thanks for the help!
try it like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css"><style type="text/css">
[blue]
#container {
width:100px; [/blue][red] /*change this value to suit your requirements*/[/red][blue]
text-align:center;
}[/blue].button {
display:block; [red]/*inline;*/[/red]
height:24px;
width:24px;
margin:0 auto 4px auto; [red]/*margin:0 10px 0 0;*/[/red]
background:transparent url(delete.png) no-repeat top center;
}.buttonLabel {
font-size:9px;
[red]/*margin-top:25px;*/[/red]
}
</style></head>
<body><div id="container">
<a class="button" href="z.htm"></a>
<span class="buttonLabel">Delete</span>
</div></body>
</html>
No problem, you're very welcome. ;)
