list question

[Davey_M]

below is the css i am currently using for my "modules" list...

#modules ul {list-style-type:none; line-height:1.4; padding: 0; margin: 0;}
.modules li {background-image:url(images/bullet_arrow_orange.gif); background-repeat: no-repeat; background-position: 0 .4em; padding-left: .6em;}

i am trying to, instead of showing lil bullets to show images to replace them like in the box below for "search" and "advanced"... hope that makes sense... cant seem to figure out wot i'm missing

the URL to my site is http://dance-global.com

thanks in advance

[Davey_M]

ok i managed to get the list to display with my bullets. however, i cant seem to align the bullets with the text in IE so they display correctly like they do in FF

any suggestions?

thanks

[KDLA]

I'm not sure what you're asking - they look aligned to me, but to make sure that the text is horizontally centered to the image, apply a line-height the height of the image.

KDLA

[Centauri]

you have a syntax error - missing closing bracket on backround url. This plus some padding and background position :li
{
background:url(images/bullet_arrow_orange.gif);
background-repeat:no-repeat;
background-position: left center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
vertical-align:top;
padding: 0 0 0 10px;
}

[Davey_M]

i just took a screenshot of wot i mean in both IE and FF - hopefully will make clearer wot i mean... in IE the bullets are higher than the text, where in FF they are perfectly in line

[Davey_M]

sorry Centauri, i never saw ur comment earlier when i posted...

here's my current code for the list..


ul
{
list-style-type:none;
margin: 0 0 0 0;
}
li
{
background:url(images/bullet_arrow_orange.gif);
background-repeat:no-repeat;
background-position: left center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
vertical-align:top;
padding: 0 0 0 10px;
}


now it is displaying fine in IE but in FF the list looks as tho it has been centered n the column for some reason - anybody got any ideas?

[KDLA]

Move the two <ul> settings to the <li> and see if that takes care of it.

[Centauri]

The list indents are done differently between IE and FF - one uses margins while the other uses padding. To get cross-browser display, take control of both margins and padding for both the ul and li :ul
{
list-style-type:none;
margin: 0;
padding: 0;
}
li
{
background:url(images/bullet_arrow_orange.gif);
background-repeat:no-repeat;
background-position: left center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
vertical-align:top;
padding: 0 0 0 10px;
margin:0;
}

[Davey_M]

thnx for all the input Centauri & KDLA, it appears i have my lists sorted now and also learnt something for future reference :)