View the attached file. It's using <ul> and <li> tag. First I want to change bullet icon with a custom image. how to do that? Second Words in second line should be aligned. I mean "Same time" in second line should start just beneath the G of "Get Your..." How is it possible? Third how can I achieve same functionality using divs? Thanks in advance. greatlogix
uh, if it's a list, it really should try to stay a list. But to answer you, a div is a block and acts like a block, and so is a ul, so the basic box would be the same... you could do either div p with background image, and the text, /p p with background image, and the next text, /p /div But the list makes more sense. There are two ways to add a custom image. The way we would like to use is ul li { list-style-image: url(nameofimage.gif) left center no repeat; } but I guess IE6 or someone has issues with this manner, too bad, so most people do this: ul li { list-style: none; padding-left: however many px it takes to move the text away from your new bullet background: url(newicon.gif) left center no-repeat; } left center can be numbers instead, that might work more precisely. Left padding is to move the text of the li out of the way of the background image. Look at the list before adding padding and you'll see how much the text needs to move. Last one, getting everyone to stay in one line-- that can only happen so long as the container holding the list (this is either the ul, or the container around the ul) is wide enough to allow it. for extra security though you can try white-space: nowrap; on the li or a declaration. now if that's not valid, then I mixed it up cause I always do... maybe it's whitespace: no-wrap? One of those...