Hi guys,

 

I'm trying to style a jquery image slider and for some reason I cannot get the bullet points to display on my ul element, i'm sure I must be missing something obvious.

Here is my CSS code, would appreciate your help guys.

 

.stContainer {
   position:relative;
   left:1%;
   font: normal 12px Verdana, Arial, Helvetica, sans-serif;
   color:              #5A5655;
   background-color:   #F8F8F8;
   width:985px;
}
.stContainer div {
   position: relative;
   border:             1px solid #CCC;
   padding:            10px;
   border-left-width: 0 !important;
   /*height: 300px;     */
   width:755px;
   height:280px;
   font: normal 12px Verdana, Arial, Helvetica, sans-serif; 
   color:              #5A5655;
   background-color:   #F8F8F8;
   text-align:left;
   overflow:auto;   
   float: left;

}
.stContainer ul {
   display:block;
   list-style-type: circle;
   float: left;
   position: relative;
   padding: 0px;
   margin: 0;
   width: 205px;
   height: 300px;
   clear: both;
   border: 1px solid #CCCCCC;
   background: #EEEEEE;

}
.stContainer ul li{
   display: block;
   height: 30px;
   margin-top: 0px;
   padding-bottom: 15px;
   /* border-bottom: 0px solid #E0E0E0 !important; */
   float: left;
}
.stContainer ul li a { 
 display:block;
 padding-left:35px;
 padding-top: 15px;
 text-decoration: none;
 height: 30px;
 width:206px;
 color:#0464BB;
 outline-style:none;
}

.stContainer ul li a:hover {
 color:#FFF; 
 background: #EA8511;
}
.stContainer ul li a.sel {
 height:30px;
 color:#EA8511;  
 background: #F8F8F8;  
 cursor:text;
}
.stContainer ul li a.dis {
 color:#CCCCCC;
 background: #F8F8F8;  
 cursor:text;
}

Your li tags float: left and it isn't usual to have bullets with a horizontal menu. If you do want them, they are default outside so there needs to be space for them so you need to add a margin-left;

Try these edits for a start but in my test IE7 refused to show the bullets but Firefox does if you delete display: block.

You have the ul tag width: 205px but each li a style is 206+35 = 241px so temporarily delete the ul width or work out how much you want.

.stContainer ul {
   display:block;
   list-style-type: circle;
   float: left;
   position: relative;
   padding:0px;
   margin:0; 
   /*width: 205px;*/
   height: 300px;
   clear: both;
   border: 1px solid #CCCCCC;
   background: #EEEEEE;

}
.stContainer ul li{         margin-left: 20px; 
   /*display: block;*/ 
   height: 30px; 
   margin-top: 0px;
   padding-bottom: 15px; 
   /* border-bottom: 0px solid #E0E0E0 !important; */
   float: left;
}

Firefox now shows the li tags horizontally with the circle bullets but IE refuses to show them (perhaps it automatically deletes them for a horizontal menu).

Strange one this when you float an li left in ie it no longer sees it as a list so you can use the property display:list-item but it won't work on anything floated left

 

a way round it

 

.stContainer ul { 
display:block; 
list-style-type: none;/*stops some browser displaying two list-styles*/
float: left; 
position: relative; 
padding:0px; 
margin:0;  
/*width: 205px;*/
height: 300px; 
clear:both; 
border: 1px solid #CCCCCC; 
background: #EEEEEE; 

} 
.stContainer ul li{         
height: 30px;  
margin-top: 0px; 
padding-bottom: 15px;  
/* border-bottom: 0px solid #E0E0E0 !important; */ 
float: left;
}
.stContainer ul li a{
list-style-type: circle; 
display:list-item;
margin-left:20px;	}

 

Only tested with a basic list

 

<div class="stContainer">
<ul>
<li><a>test1</a></li> 
<li><a>test2</a></li>
<li><a>test3</a></li>
<li><a>test4</a></li>
<li><a>test5</a></li>
</ul>
</div>

Your li tags float: left and it isn't usual to have bullets with a horizontal menu. If you do want them, they are default outside so there needs to be space for them so you need to add a margin-left;

Try these edits for a start but in my test IE7 refused to show the bullets but Firefox does if you delete display: block.

You have the ul tag width: 205px but each li a style is 206+35 = 241px so temporarily delete the ul width or work out how much you want.

.stContainer ul {
   display:block;
   list-style-type: circle;
   float: left;
   position: relative;
   padding:0px;
   margin:0; 
   /*width: 205px;*/
   height: 300px;
   clear: both;
   border: 1px solid #CCCCCC;
   background: #EEEEEE;

}
.stContainer ul li{         margin-left: 20px; 
   /*display: block;*/ 
   height: 30px; 
   margin-top: 0px;
   padding-bottom: 15px; 
   /* border-bottom: 0px solid #E0E0E0 !important; */
   float: left;
}

Firefox now shows the li tags horizontally with the circle bullets but IE refuses to show them (perhaps it automatically deletes them for a horizontal menu).

 

Many thanks for your help. After adding the margin-left both firefox and IE8 display the bullets, but for some reason IE7 doesnt!.

Maybe I could add soemthing that overides the browsers stylesheet. The other problem is because I now have a margin the background colour behind the bullet is different to the bg colour for the li a.

I'm now thinking all this really isnt worth it and I should just scrap the bullets altogether. I will have to see how it looks when the whole page is done.

 

Thankyou again for the help though.

Strange one this when you float an li left in ie it no longer sees it as a list so you can use the property display:list-item but it won't work on anything floated left

 

a way round it

 

.stContainer ul { 
display:block; 
list-style-type: none;/*stops some browser displaying two list-styles*/
float: left; 
position: relative; 
padding:0px; 
margin:0;  
/*width: 205px;*/
height: 300px; 
clear:both; 
border: 1px solid #CCCCCC; 
background: #EEEEEE; 

} 
.stContainer ul li{         
height: 30px;  
margin-top: 0px; 
padding-bottom: 15px;  
/* border-bottom: 0px solid #E0E0E0 !important; */ 
float: left;
}
.stContainer ul li a{
list-style-type: circle; 
display:list-item;
margin-left:20px;	}

 

Only tested with a basic list

 

<div class="stContainer">
<ul>
<li><a>test1</a></li> 
<li><a>test2</a></li>
<li><a>test3</a></li>
<li><a>test4</a></li>
<li><a>test5</a></li>
</ul>
</div>

 

Hehe, u replied just as I was writing a reply to wickham. I just tried ur code, and again it works in FF and IE8, but not IE7, I think it must be the browsers built-in stylesheet over-riding it.

The answer is to have list-style-type: none to get rid of the circles in all browsers, keep the float: left; for the li tags (margin-left or padding-left can be what you want or nil) then have an image for the circle placed before the link text. You can do this as a background-image for the li or "a" tag positioned top left. To avoid the link text overlapping the circle background-image, use padding-left for the li tag.

The answer is to have list-style-type: none to get rid of the circles in all browsers, keep the float: left; for the li tags (margin-left or padding-left can be what you want or nil) then have an image for the circle placed before the link text. You can do this as a background-image for the li or "a" tag positioned top left. To avoid the link text overlapping the circle background-image, use padding-left for the li tag.

 

Thanks for this. I actually considered using an image at the beginning, but then thought whats the point in doing that when it could 'easily' be done with code.....haha how wrong I was.

Hehe, u replied just as I was writing a reply to wickham. I just tried ur code, and again it works in FF and IE8, but not IE7, I think it must be the browsers built-in stylesheet over-riding it.

 

Like I said I only tried it with a basic list just to try and work out what was happening, I've learned something new today

 

Wickham has the best plan use an image saves the problem of different browsers not displaying list styles the same