list-style-type not showing 1

[1DMF]

I have the following...

.finstat {
margin: 0 auto;
width: 350px;
min-height: 140px;
padding: 5px 5px;
border:1px;
border-style:solid;
}

.finstat p {
text-align:center;
}

.finstat ul {
margin: 0 auto;
width:150px;
}

.finstat ul li {
padding: 0.1em 0;
color: #D9DB9C;
list-style-type: square;
}

with ...

<div class="finstat">
<ul>
<li>Employed</li>
<li>Self Employed</li>
<li>Credit Problems</li>
<li>Bankruptcy</li>
<li>IVA</li>
<li>Shared Ownership</li>
</ul>
<p>The overall cost for comparison is x% APR.<br /> The actual rate available will depend upon your circumstances. Ask for a personalised illustration.</p>	
</div>

why doesn't the bullet style show ?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

ok correction , why has I.E. stopped showing the square bullets?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

Well, funny unsurprising enough (since it is a very strange issue), it only happens in IE. FF has no problems rendering bullets as they are. IE however has stopped rendering them as soon as the element had width defined or margins nullified. The latter makes a bit of sense, since IE generates the indentation via the margin, but still. After a bit of testing, the solution that works is a bit of a change to the appearance of the list, but provided the list items don't span two lines, nobody will notice. Add [tt]list-style-position: inside;[/tt] to your declarations (list item or list) and you should be home free.

 

[1DMF]

thanks man, it was doing my head in one minute they were there, then poof, vanished!

The only thing though is it's made the UL a rigid design which falls apart if font size is changed, but it's the only way to make an unordered list center and be able to apply margin:0 auto;

hmm, all i want to do is have a simple list, centered in the middle of the screen, why is it such a pain in the backside?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

You could give your ul a size of 10em (if you need sizing of the element according to the font size) or 40% (if you need it to size according to the screen size). Both will work, as both are sizes other than 100%. The second option seems to be out of the question for you because of the fixed container, but you could look into the first.

 

[1DMF]

spot on, I should have realised that from reading your other post you made regarding someone asking what 'Flexible' vs 'Fluid' meant (yes it was me who gave you the star ;-) )

so if i want a fixed but 'flexible' design use em rather than px not just on fonts but physical widths.

good idea!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.