<li> problem :: How to make appear list-style-image while choosing display:inline

This is a discussion on "<li> problem :: How to make appear list-style-image while choosing display:inline" within the Web Page Design section. This forum, and the thread "<li> problem :: How to make appear list-style-image while choosing display:inline are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Oct 16th, 2007, 01:33
New Member
Join Date: Oct 2007
Location: Kathmandu
Age: 28
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Question <li> problem :: How to make appear list-style-image while choosing display:inline

Dear all CSS experts,
I'm stuck in one problem. I'm not being able to make image appear[list-style-image] while choosing display:inline for horizontal menu. It works fine if I use display default.
Here's my css :
#bottom_links ul
{
margin:0px;
padding:0px;
}
#bottom_links li
{
list-style-image:url(../images/bottom_link_arrow.gif);
display:inline;
}
Here's my html :

<div id="bottom_links">
<ul><li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Sevices</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Sevices</a></li>
</ul>
</div>




Please send me a solution. Thanks in advance.
Sayamish
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Oct 16th, 2007, 02:17
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,612
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Re: <li> problem :: How to make appear list-style-image while choosing display:inline

please send us the screen shot or better host it somewhere so we can see it.

cheers..
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Oct 21st, 2007, 05:19
Junior Member
Join Date: Nov 2006
Location: Los Angeles
Posts: 25
Thanks: 0
Thanked 0 Times in 0 Posts
Re: <li> problem :: How to make appear list-style-image while choosing display:inline

Why don't you just add the image as a background and apply left padding? This gives you greater control anyways.
Code: Select all
//css
#h-list li {
    float:left;
    display:inline;
    background:url('[path to image]') top left no-repeat;
    padding-left:[width of image]px;    
}

//html
<ul id="h-list">
    <li>1</li>
    <li>2</li>
    //etc.
</ul>
Remember that display:inline; will cause the <li> to lose its block components like height, so you will be unable to force the height to fit the image. Also remember that background image position should be specified in the url declaration.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
First image problem and inline list problem konnor5092 Web Page Design 8 Dec 1st, 2007 09:08
Overriding display:inline-block gazzou Web Page Design 0 Aug 27th, 2007 12:03
Display Image Problem Matc JavaScript Forum 1 Jun 17th, 2007 23:32
List style / rollover image navigation disappears in IE on the Mac eskymo Web Page Design 5 Mar 1st, 2006 00:43
display inline ???? hessodreamy Web Page Design 3 Oct 8th, 2005 05:51


All times are GMT. The time now is 22:15.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved