Question

i’m failing miserably trying to work out how to create a toolbar in css. “all” i’m trying to do is create a 22×22 button toolbar of 4 buttons.

I have this png: and this code:

<style>
#nav {background: url(content/images/crtoolbar.png) no-repeat;height: 22px;width: 88px;}
#nav span {display: none;}
#nav li {list-style-type: none;float: left;width: 22px;}
#nav a {height: 22px;display: block;}
</style>

<ul id="nav">
    <li id="b1"><a href="#"><span>b1</span></a></li>
    <li id="b2"><a href="#"><span>b2</span></a></li>
    <li id="b3"><a href="#"><span>b3</span></a></li>
    <li id="b4"><a href="#"><span>b4</span></a></li>
</ul>

Which displays the bitmap ok, but the selection/hrefs are offset to the left by, roughly, 2 buttons and I can’t work out how to “push” the buttons over or “drag” the hrefs back.

TIA

Answer 1

Browser might have a default padding for ul.

#nav { padding: 0; }