Forum Moderators: not2easy

Message Too Old, No Replies

list-style-image - not showing up in IE. Any suggestions?

what?

         

Nike

7:15 pm on May 10, 2009 (gmt 0)

10+ Year Member



I'm currently working on the footer on my new website and i'm kind of stuck.

I'm trying to get IE to display a list-style-image, but it just doesn't... Only FF and IE 8 shows it, all the other IE versions totally ignores it.

Here's the HTML code:

<div class="footer-middle-inner-box">
<h2>A random title...</h2>
<ul>
<li><a href="#">something goes here</a></li>
<li><a href="#">something goes here</a></li>
<li><a href="#">something goes here</a></li>
<li><a href="#">something goes here</a></li>
<li><a href="#">something goes here</a></li>
</ul>
</div>

And here's the CSS for the footer:

.footer-middle-inner-box {
width: 30%;
border-right: 1px solid #213B4C;
min-height: 100px;
float: left;
overflow: hidden;
display: block;
padding: 10px;
color: #506B7D;
}

.footer-middle-inner-box a {
color: #506B7D;
}

.footer-middle-inner-box h2 {
color: #6D8FA4;
background: transparent url(images/footer-li.png) no-repeat center left;
padding-left: 17px;
margin-bottom: 5px;
}

.footer-middle-inner-box ul {
/*padding-left: 18px;*/
}

.footer-middle-inner-box ul li {
float: left;
list-style-image: url(images/square.png); <----------- here's the problem!
width: 100%;
color: #506B7D;
padding: 5px 0px;
margin-left: 20px;
}

.footer-middle-inner-box ul li a {
color: #506B7D;
padding: 5px;
}

.footer-middle-inner-box ul li a:hover {
color: #0A2434;
background: #335368;
border: 1px dashed #1C4966;
outline: 1px dashed #1C4966;
}

Any help is very appreciated.

Thanks in advance.
-Nike

Old_Honky

2:59 pm on May 11, 2009 (gmt 0)

10+ Year Member Top Contributors Of The Month




list-style-image: url(images/square.png); <----------- here's the problem!

I don't believe it is the problem, straight after that line add

list-style-position:inside;

The value can be inside or outside. Then play around with your left margin and padding using a conditionally commented style sheet for IE6 and another one for IE7, by a process of trial and error you will be able to make it look OK in both. If it still doesn't work in IE 5.5 and below so what? Personally I would forget them, my view is that anyone who hasn't upgraded those by now must be well used to everything looking pretty shoddy.

Nike

3:30 pm on May 11, 2009 (gmt 0)

10+ Year Member



Thanks.

I tried positioning it to inside, but that didn't work.

I'm kind of buzy right now, but i'll play around with the margins & padding when i have time.

Thnx for your help dude. :)