0

I want words on my buttons but the words won't center. And left to right isn't the issue it's up and down. Well, here's the HTML:

<ul id="navbutton">
<li id="onpage"><a href="index.html">Home</a></li>
<li style="margin-top:5px"><a href="another.html">Name of my button<span></span></a></li>
<li style="margin-top:5px"><a href="services.html">Services</a></li>
<li style="margin-top:5px"><a href="another.html"></a></li>
<li style="margin-top:5px"><a href="another.html"></a></li>
</ul>

And here's the external css:

#navbutton a {   
display: block;   
background:  url(button.gif); 
text-decoration: none;
text-align: center;
font: 0.7em Tahoma, sans-serif;
font-size: 16px;
font-padding:5px 5px 5px 10px;
font-weight: bold;
width: 150px;
height: 45px;
}

#navbutton a:hover {   
background:  url(buttonn.gif);   
width: 150px;   
height: 45px;   
}

#onpage a {
display: block;
background: url(buttonn.gif);
width: 150px;
height: 45px;
}

And I'll add a screenshot pic as an attachment. (It's not aesthetically pleasing yet. I'll change that once I can get it to work.)

Thanks all!

Attachments Screenshot-2.png 4.8 KB
1
Contributor
1
Reply
2
Views
7 Years
Discussion Span
Last Post by mariko
0

Never mind. I added

line-height: 45px;

into my css and it works!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.