View Full Version : Problem with bulleted list of images

02-01-2012, 10:37 PM

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.

#GalleryThList { list-style: none; background-color: orange; margin: 0px; padding: 0px; }
#GalleryThList li { list-style: none; margin-right: 20px; padding: 0px; float: left; }

<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>

02-02-2012, 04:30 AM
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

02-02-2012, 11:43 PM
The link to the offending page is here:

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

02-02-2012, 11:50 PM

ul#GalleryThList {list-style:none;}

eidt 2
Take off that background of li

02-02-2012, 11:57 PM
I still see the bullets?


02-04-2012, 07:10 PM
I still see the bullets?


In some part of your code its written

.content . box4 .txt1 li{
padding:0px 0px 10px 10px;
backgorund:url(../images/iconD.gif) no-repeat 0px 5px;

change that for this

.content . box4 .txt1{
padding:0px 0px 10px 10px;
backgorund:url(../images/iconD.gif) no-repeat 0px 5px;

02-04-2012, 07:35 PM
That's great, thank you.

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


02-05-2012, 11:24 AM
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
.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:

<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.

02-05-2012, 08:11 PM
display:inline; will also remove list bullets