Hi,

 

For some reason the bullet points are doubling up for each <li> in my <ul>

 

I think its to do with the padding on the <li> (.block li) but when i take this out it messes the space up between the bullet point image and the text.

 

Unless its another style further up the css messing it up?

 

Heres the link: - (scroll to bottom)

http://www.pbwebdesign-warrington.co.uk/kelly/

 

 

Heres the CSS:

 

.block{
background-image:url(images/blockborder2.png);
background-position:top left;
background-repeat:no-repeat;
width:695px;
height:281px;
margin:18px 0 30px 11px;
padding-left:20px;
padding-top:0;
float:left
}

.block h3{
display:block;
/*text-indent:-1000000000000000000000;*/ /* replace with image wedding text */
background-image:url(images/pt.png);
background-position:top left;
background-repeat:no-repeat;
line-height:44px;
padding:0 0 40px 50px;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#1c1c1c;
font-weight:normal;
margin-bottom:25px;
}

.block li{
list-style-type:none;
background-image:url(images/next.gif);
background-position: top left;
background-repeat:no-repeat;
padding:0 0 13px 30px;
line-height:17px;
width:140px;
}

.block ul{
float:left;
margin-top:-30px;
padding:0px;
}

.block li a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#58594c;
text-decoration:none;
font-weight:bold;
}

.block li a:visited{text-decoration:underline}
.block li a:hover{text-decoration:underline; color:#000;}

 

 

Heres the HTML: -

 

<div class="block"> 
  <h3>Quick References</h3> 
<ul> 
	<li><a href="#">My Agenda</a></li> 
	<li><a href="#">My Budget</a></li> 
	<li><a href="#">My Calendar</a></li> 
	<li><a href="#">My Music</a></li> 
	<li><a href="#">My Hotels</a></li> 
</ul> 
<ul> 
	<li><a href="#">My Flowers</a></li> 
	<li><a href="#">My Guestlist</a></li> 
	<li><a href="#">My Registries</a></li> 
	<li><a href="#">My Contacts</a></li> 
	<li><a href="#">My Food</a></li> 
</ul> 
<ul> 
	<li><a href="#">My Gifts & Favors</a></li> 
	<li><a href="#">My Floor Plan</a></li> 
	<li><a href="#">My Wedding Party</a></li> 
	<li><a href="#">My Photographers</a></li> 
	<li><a href="#">My Transportation</a></li> 
</ul> 
</div> 

 

Any help would be great! Cheers

anyone?

You may need to specify list-style on the UL tag...

 

.block ul{
list-style: none; /* add this */
float:left;
margin-top:-30px;
padding:0px;
}

 

You may need to specify list-style on the UL tag...

 

.block ul{
list-style: none; /* add this */
float:left;
margin-top:-30px;
padding:0px;
}

 

 

No luck mate, doesn't do the job, tried:

 

list-style:none;

list-style-type:none; also?

 

any other ideas?

try adding background:none; to .block li a

 

as you've got "a tags to inherit:background" earlier in your style sheet

This does get rid of the second arrow; it's repeating in the 30px left padding of the li tag (don't know why, perhaps it's a Firefox bug edit: I've just seen mteam's reply which has found the cause ? why didn't IE do the same repeat?):-

.block li {
list-style-type:none;
/*background-image:url(images/next.gif); background image deleted*/
/*background-position: top left;*/
/*background-repeat:no-repeat;*/
padding: 0 0 13px 0; /*0 0 13px 30px; padding left 0*/
line-height:17px;
width:140px;
}
.arrow { vertical-align: middle; padding-right: 3px; } /*added style*/

 

<li><img class="arrow" src="images/next.gif" alt="arrow"/><a href="index.html">My Agenda</a></li>
<li><img class="arrow" src="images/next.gif" alt="arrow"/><a href="#">My Budget</a></li>

 

and the same for the others. Image is changed from a background to a normal image in every li tag. Works in Firefox and IE7.

Thanks mteam and wickham, thats done the job, i knew it was to do with the padding 30px or something further up in the css, just needed a new pair of eyes as mine were knackered trying to sort this out! All ok now, thanks :-)