...

View Full Version : Problem with bulleted list of images



nickburrett
02-01-2012, 10:37 PM
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.


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

Excavator
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

nickburrett
02-02-2012, 11:43 PM
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?

sorlaker
02-02-2012, 11:50 PM
Use



ul#GalleryThList {list-style:none;}



eidt 2
Take off that background of li
http://i41.tinypic.com/23hrsrp.png

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

http://www.helenquartley.com/modules/gallery/gallery.css

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

http://www.helenquartley.com/modules/gallery/gallery.css

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

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

http://www.helenquartley.com/portfolio

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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum