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 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    68
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Problem with bulleted list of images

    Hello

    I am trying to get rid of bullets from a UL list but can't seem to figure out how. I can't edit the HTML, only the CSS.

    Code:
    <style>
    #GalleryThList { list-style: none; background-color: orange; margin: 0px; padding: 0px; }
    #GalleryThList li { list-style: none; margin-right: 20px; padding: 0px; float: left; }
    </style>
    
    <ul id="GalleryThList">
    	<li style="clear:both">
    		<span id="galleryItem">
    			<div class="GalleryGImg">
    				<a href="#" rel="lightbox[Logos]" ><img src="image.jpg" border="0" title="" alt="" /></a>
    			</div>
    		</span>
    	</li>
    </ul>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello nickburrett,
    Your snippet of code does not reproduce your problem. You should have no bullet when you use list-style: none; , that's what gets rid your bullets.
    You could post a code that recreates the problem or, since we don't have your image, a link to the test site would probably work best
    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

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    68
    Thanks
    22
    Thanked 0 Times in 0 Posts
    The link to the offending page is here:
    http://www.helenquartley.com/portfolio

    Also I would love to know why the link entitled "Adverts" disapeers after it is clicked, whilst "Banners", "Leaflets", "Logos" and "Posters" remain?

  • #4
    Regular Coder
    Join Date
    Dec 2009
    Posts
    173
    Thanks
    24
    Thanked 1 Time in 1 Post
    Use

    Code:
    ul#GalleryThList {list-style:none;}

    eidt 2
    Take off that background of li
    Last edited by sorlaker; 02-03-2012 at 12:53 AM.

  • #5
    New Coder
    Join Date
    Jun 2009
    Posts
    68
    Thanks
    22
    Thanked 0 Times in 0 Posts

  • #6
    Regular Coder
    Join Date
    Dec 2009
    Posts
    173
    Thanks
    24
    Thanked 1 Time in 1 Post
    Quote Originally Posted by nickburrett View Post
    In some part of your code its written
    Code:
    .content . box4 .txt1 li{
    padding:0px 0px 10px 10px;
    backgorund:url(../images/iconD.gif) no-repeat 0px 5px;
    }
    change that for this
    Code:
    .content . box4 .txt1{
    padding:0px 0px 10px 10px;
    backgorund:url(../images/iconD.gif) no-repeat 0px 5px;
    }

  • Users who have thanked sorlaker for this post:

    nickburrett (02-04-2012)

  • #7
    New Coder
    Join Date
    Jun 2009
    Posts
    68
    Thanks
    22
    Thanked 0 Times in 0 Posts
    That's great, thank you.

    Do you have any idea why the "Adverts" link disappears when you click on it?

    http://www.helenquartley.com/portfolio

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Odd. After a click on any link the element's top is actually hidden under the preceeding element. The .txt1 element no longer fits within the parent .box4 and is not visible because of the overflow:hidden on the parent.

    Adding 20px padding-top to
    Code:
    .content .box4
    works around the problem but I can't immediately see why it's happening only after the element is clicked. It's not javascript-related because the same thing happens with js disabled.

    [Much, much later] You have several occurrences of this in your code:

    Code:
    <div style="clear:both;height:1px;">&nbsp;</div>
    Remove the height:1px from all these, or remove the &nbsp; and the issue disappears. Not quite sure I understand why, but this is causing the .txt1 element to shift upwards when any link is clicked, resulting in the first link being hidden.

    An alternate solution might be to remove that clearing div entirely and clear your floats on the containing div using overflow:auto.

  • #9
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    display:inline; will also remove list bullets


  •  

    Tags for this Thread

    Posting Permissions

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