Assigning a width to an li

Assigning width to an li

[batgrrrl]

Hi,

I'm having trouble assigning a width to an li. I have tried a variety of different things but the widths never change. I have an inline navigation across the top of the page. Can you see what I'm missing? Has it got something to do with the positioning or are my other tags breaking it?

Cheers and many thanks,
Batty :)

My code is:

<div id="topnav">
<ul>
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</div>

And the css is

#topnav {
background-image: url(images/topnav.gif);
background-repeat: no-repeat;
position: absolute;
visibility: visible;
width: 620px;
height: 22px;
left: 125px;
top: 60px;
z-index: 2;
}
#topnav li {
position: relative;
display: inline; 
margin: 0; 
padding: 10px;
background-image: url(images/spot.gif);
background-repeat: no-repeat;
background-position: 0 50%;
width: 400px;
}
#topnav li a {
color: #ff4bae; 
text-decoration:none;
padding: 5px;
}

[your_store]

You can't declare a width for an inline object. Try floating your li's instead.

[Kicking Designs]

Try assigning the width to the <a> tag instead of <li>...see if that works. What browser are you having issues with?

Ah, I missed the inline declaration....

[your_store]

Anchor tags are inline by default. You can set their display to block to set a width, but that will break your nav too. It's best to use floats for horizontal nav bars made from lists.

[batgrrrl]

WOO HOO! :)

Thanks guys :)

I changed it to:

display: block;
float: left;

and altered some of the other values (pxs) and it works great.

Can you tell me what float means? :)

Cheers
Batty!

[Purple Martin]

Can you tell me what float means?

These two articles explain it better than I ever could:
[positioniseverything.net...]
[positioniseverything.net...]

[batgrrrl]

Thanks!

Those references are great :)

That site will be a valuable tool for me :)