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 3 of 3
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    fixing the top margin on a bullet

    Hi all,

    I have what should be a very simple question: I'm trying to drop down the green bullet seen on the link below by 1px so that it vertically aligns with the middle of the text (cross-browser, or course).

    http://www.cbd.int/business/tools-an...n-bolivia.aspx

    i pasted the code below (not my CSS). I've spent 30 mins trying to do this and i'm at my wits end. Someone told me that using negative margins was a bad idea, but that's where i'm headed unless someone can spot the error.

    Code:
    #middle ul li {
    		background:url(../App_Themes/CBD/Images/green_bullet_shadow.png) 0px 4px no-repeat;
                    padding-left: 20px;
                    margin-left: 20px;
                    margin-bottom: 4px;
                    list-style-position:outside;
    		}
    Thanks,



    Jay

    p.s: I know there's a problem with the grey BG not filling the box - but that's another issue entirely =(
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You can control the position via pixels like this:

    Code:
    #middle ul li {
        background: url("../App_Themes/CBD/Images/green_bullet_shadow.png") no-repeat scroll 0 5px transparent;
        list-style-position: outside;
        margin-bottom: 4px;
        margin-left: 20px;
        padding-left: 20px;
    }
    to move it down by 1px (I think having it set to 6px looks slightly better) or you can set the bakground image to be vertically centred like this:

    Code:
    #middle ul li {
        background: url("../App_Themes/CBD/Images/green_bullet_shadow.png") no-repeat scroll 0 center transparent;
        list-style-position: outside;
        margin-bottom: 4px;
        margin-left: 20px;
        padding-left: 20px;
    }

  • Users who have thanked SB65 for this post:

    canadianjameson (05-23-2012)

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thanks! The 6px was perfect! And I managed to fix the BG problem too =)
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

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