Unable to see bullets in IE

Hi,

I am unable to get IE to show some graphic bullet points on my left hand mneu....can anyone point me in the right direction? I am sure it si something I simple I have missed.

http://www.mytesting.co.uk/Stock/template.php

 

There might be something wrong in your implementation or CSS code. Can you post the corresponding code here?

Edit: I just took a look at your code and I think I see the problem:

<ul id="menuleft">
         
 <li>estimating</li> 
 <li>lamination</li>
 <li>UV coating (overall)</li>  
 <li>UV coating (spot)</li> 
 <li>latex scratch off</li> 
 <li>remiost gumming</li> 
 <li>screen printing</li> 
 <li>die making</li> 
 <li>cutting & creasing</li>  
<li>perfect binding</li> 
 <li>folding (& miniature)</li> 
 <li>foil blocking</li> 
 <li>embossing</li> 
 <li>engineering</li> 

         </ul>

Code (markup):

You used ID for ul. Try using class instead. Change your CSS from #menuleft to .menuleft. Your code should then be:

<ul class="menuleft">
         
 <li>estimating</li> 
 <li>lamination</li>
 <li>UV coating (overall)</li>  
 <li>UV coating (spot)</li> 
 <li>latex scratch off</li> 
 <li>remiost gumming</li> 
 <li>screen printing</li> 
 <li>die making</li> 
 <li>cutting & creasing</li>  
<li>perfect binding</li> 
 <li>folding (& miniature)</li> 
 <li>foil blocking</li> 
 <li>embossing</li> 
 <li>engineering</li> 

         </ul>

Code (markup):

 

I have tried changing to a class, rather than a ID...but nothing changes

 

You will need to give us the CSS rule for the class "menuleft".
Most probably it is a padding, margin problem

 

This is the complete CSS for the left hand menu

.menuleft {

font:12px Verdana, Arial, Helvetica, sans-serif;
width: 174px;
margin-top: 55px;
margin-left: 0px;
}

.menuleft h1 {
font:15px Verdana, Arial, Helvetica, sans-serif;
padding: 3px 0 3px 3px;
border-bottom: 1px solid #000000;
color: #333333;
margin-top: 0px;

}

.menuleft li {
list-style-image: url(gfx/roller7.gif);
color: #f7941d;
padding-bottom: 10px;
}

 

You likely have the same problem in Opera, also. IE and Opera have a default left margin on ul of 40px, to indent the list and to make room for the list markers. Firefox and Safari do the same with left padding.

You have zeroed margin-left, presumably to rid yourself of the indention, which removed the space for the markers in IE and Opera.

To get rid of the indention, you must set both margin-left and padding-left to zero and set list-style-position to inside.

cheers,

gary

 

Hey that's great thanks for that. The trouble is now I have the bullet points sitting to the immediate left of the text.

I need to be able to place some space between the bullet points and the start of the text?

Any ideas?

And with FF the menu seems to sit indented further from the left

 

For more control over the bullet placement, make it a background-image of li. Give li a bit of left padding, and set the image left, with no-repeat.

cheers,

gary

 

Thanks for that, they are now showing, but they are also showing the standard bullet point, how do I remove that?

 

ul {list-style: none;}

cheers,

gary

 

Um, when IE (but not Opera) ate my bullets, I had to do something terrible-- add bullshit markup. I was NOT floating the li's and I was NOT floating the list itself (popular IE problems) but rather was using margins to either center the list OR using a left margin to just push the list a bit away from the left edge of the container.

No matter how much left padding or left margin I added, it never gave me back my bullets in IE. Friggin IE. I ended up wrapping the list in a div (gah! extra BS markup!) which used the list's class (so the list ended up with no class, just the div) and then any margins or padding I added to the left side of the list was good to make bullets appear in IE.

<div class="bull****">
<ul>
<li>blah</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
</ul>
</div>

div.bull**** {
all the margins I originally wanted on the list itself;
}
.bull**** ul {regular list styles afterwards, etc}

A ul should almost never need extra wrappers, being a proper block already itself, but this guaranteed me bullets in IE no matter what I did with sidemargins or sidepadding.

This was for actual HTML bullets and not the background images... Gary's solution is fine for those (and background images are generally a better idea because you have more control and fewer problems from IE), but I've become rather fond of the circles for making dull lists look a little better. I used them extensively on two pages recently.