How to horizontally align a list type WITH BACKGROUND IMAGES in CSS?

I would like to ask for your help regarding CSS (remember you helped me wayback about my questions?). Here's my problem, please have a look at this code:

Now, I wanted the

[*]'s to align horizontally and on each id in it i have an image (so people will click on the image instead of just the words). Here's the CSS:

#navbar {

height: 65px;

width: 819px;

display: block;

}

#navbar ul li {

list-style-type: none;

display: inline;

}

#join {

left: 0;

top: 0;

position: relative;

display: block;

height: 65px;

width: 289px;

background-repeat: no-repeat;

}

#bookmark {

bottom: 65px;

position: relative;

display: block;

left: 289px;

background-repeat: no-repeat;

height: 65px;

width: 240px;

}

#members {

bottom: 130px;

display: block;

position: relative;

right: -529px;

height: 65px;

width: 290px;

background-repeat: no-repeat;

}

So, giving my navbar ul li a display:inline attribute aligns the texts horizontally, but when I apply a background image on each li (text links), it aligns the images vertically. So what I did on each background image is i positioned them. this works on safari and firefox, but when I look at IE6, it still shows the total height the images occupied when they were aligned vertically, thus giving it an invisible margin below.

Please help me.

Thanks!

#456459

Have you tried making the LI float:left? (kinda like how the toolbar "nav at the top" is)

#456462

Is this the one to change, Tim?

from:

#navbar ul li {

list-style-type: none;

display: inline;

to:

#navbar ul li {

list-style-type: none;

display: inline;

float: left;

So if I do that, is the display attribute useless or should I still keep it as inline? And will it mess my background positioning (for id's "join" / "bookmark" / "members") since it's set to float now?

#456463

Well what I do on aqua-soft is - minus basic stuff.

li { float: left; }

li a { display: block; }

#456464

If I apply that as universal, should I remove the display attributes inside my join/bookmark/members id?

And is #navbar ul li different from #navbar li? Which is correct between these two?

#456466

Tim, your float:left suggestion worked! Thanks much!

Now kindly close this thread, admins/mods. Thanks again.

#456617

Tim, your float:left suggestion worked! Thanks much!

Now kindly close this thread, admins/mods. Thanks again.

That's definitely what I told you in my PM .

-NC

#456655

Can

tags achieve the float:left attribute?

Take a look at this setup:

Some random text here lorem ipsum blah blah some random text here lorem ipsum that has irregular lengths etc.

Basically, what I want is to put them inside the container to have a fixed width. I already managed to horizontally align the link buttons as Tim and NC suggested. But when I put a foat:left to the .description p, the buttons align next to it horizontally (which is what I'm after), but other divs in my page messes up. See the container is inside of my #main attribute (the main container of my site), when the float:left is set to the

, my #main removes the .description inside it.

Please help. Thanks!

#457062

Basically this is what i'm after:

But when I apply the float:left on the .description (to align the .buttons next to it), it gives me this:

The .container's contents gets out of the box.

I only want the .description and .buttons to align horizontally. If I don't apply a float:left to it, the .buttons are below it.

Please have a look.

#457076

You could apply a blank footer below everything that clears the border down to where you want it.

Obviously, you could assign an id/class to that div and have that declaration in a stylesheet. This is very much not semantically cool, but I'm in a rush, sorry!

-NC

#457155