Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts

    I am confused.. Why Is this working properly?

    I am really confused at the moment, I cant see what I am doing wrong.. Please someone help me!! This is driving me crazy..

    What I am trying to do is to create a list style format here is the code so far

    Code:
    #l_sidebar ul { list-style: url(/images/m10.gif) no-repeat top left;
    margin: 0px 0px 0px 15px;
    padding: 10px 0px 0px 0px;
    }
    #l_sidebar li { 
    border-bottom: 1px dashed #444;
    padding: 0px 0px 10px 0px;
    }
    
    #l_sidebar li li {
    background: #FFFFFF }
    
    #l_sidebar li a, #l_sidebar li a:visited { color: #359CBB; text-decoration: none; }
    #l_sidebar li a:hover, #l_sidebar li a:active { color: #444; }
    The problem that I am having is trying to get the border-bottom to be the full lenth, and not start from where the text is... This is what I am trying to get it to look like http://digitalresellersvault.com/blog/?p=11 Recent posts section...

    I am also having diffuclties displaying an image instead of a blue dot as the bullet format..

    This is my website http://www.supreme-host.com/web/categories.php

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    instead of "list-style" use "list-style-image"

    Code:
    list-style: url(/images/m10.gif) no-repeat top left;
    replace with
    Code:
    list-style-image:url("/images/m10.gif") no-repeat top left;
    vineet

  • #3
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    if you want the dotted line to span the whole length, add

    Code:
    #l_sidebar ul { margin:0px; padding:0px; }
    li will take up the entire width of the UL, so the border expands.

    set the LI to have the list-style-image property and add 16px of left padding if you still want an indent.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    #l_sidebar ul {/*style.css (line 367)*/
    margin:0;
    padding:10px 0 0;
    }
    #l_sidebar li {/*style.css (line 371)*/
    background:transparent url(images/dashedline.jpg) no-repeat scroll -10px bottom;
    list-style-position:inside;
    list-style-type:disc;
    padding:0 0 10px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vineet View Post
    instead of "list-style" use "list-style-image"

    Code:
    list-style: url(/images/m10.gif) no-repeat top left;
    replace with
    Code:
    list-style-image:url("/images/m10.gif") no-repeat top left;
    vineet
    Alright Vineet I have changed the above code to what you suggest but it does not look like it has had any effect...

  • #6
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by met View Post
    if you want the dotted line to span the whole length, add

    Code:
    #l_sidebar ul { margin:0px; padding:0px; }
    li will take up the entire width of the UL, so the border expands.

    set the LI to have the list-style-image property and add 16px of left padding if you still want an indent.
    Alright Met

    Do you know how to get the image /images/m10.gif to appear in the list-styles section please?

  • #7
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    Code:
    #l_sidebar ul
    {
    /* snip */
    list-style-image:url("/images/m10.gif");
    }

    else post a link

  • #8
    Regular Coder
    Join Date
    Dec 2009
    Posts
    243
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by met View Post
    Code:
    #l_sidebar ul
    {
    /* snip */
    list-style-image:url("/images/m10.gif");
    }

    else post a link
    Met

    I have no idea whats going on.. Can you please take a look http://www.supreme-host.com/web/categories.php

    Do you see a blue dot or this image http://www.supreme-host.com/web/images/m10.jpg for the bullet format?

    If not I have no idea whats going on...

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Byronwells,
    It's a blue disc on my end, in FF3.5, IE8 and IE7.
    The dashedline.jpg is showing as a dotted line under each li and runs the full length of that li.
    If you want to replace that blue disc with your m10.jpg, have a look at the source code of this demo - http://nopeople.com/CSS/li_image/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    try this. it works on my local machine

    Code:
    	
    #l_sidebar ul { 
    margin:0px;
    padding:0px;
    }
    
    .leftbox ul li{
    list-style-image:url("images/m10.jpg");
    padding:5px 2px 0px 4px;
    margin:5px 4px 0px 25px;
    background:url(images/dashedline.jpg) no-repeat;
    background-position:-5px 18px;
    }
    #l_sidebar li { 
    }
    if images dont show then add ../ before images path.

    vineet


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •