unorder list with arrows

[mattastic]

Hi Can anyone help me create a simple list with arrows, that works in IE and FF.

I cant seem to get the arrows in the right place.

Here is my code


* { border:0;
margin: 0;
padding: 0;
}


#breadcrumb ul {
width:100%;
height: 15px;
float:left;
}
#breadcrumb li {
list-style: url(images/breadcrumb.gif) none;
float:left;
padding-right:20px;

}
#breadcrumb a {
display: block;
color:white;
font-weight:bold;

}

<ul id="breadcrumb">
<li><a href="#">home</a></li>
<li><a href="#"> title</a></li>
</ul>


Thankyou

[Webnerd]

Use a background-image on the <A> tag instead:


#breadcrumb ul {
width:100%;
list-style-type:none;
margin:0px;
padding:0px;
height: 15px;
float:left;
}
#breadcrumb li {
float:left;
padding-right:20px;
}
#breadcrumb a {
background: transparent url(images/breadcrumb.gif) no-repeat center left; // Fix these positions for your arrow
display: block;
color:white;
font-weight:bold;
padding-left:16px;

}


}

[mattastic]

Great thanks very much.

So is the general rule, to avoid padding for spacing?

Thankyou

[Kravvitz]

So is the general rule, to avoid padding for spacing?
No. It's good to use padding where appropriate. (You should keep in mind IE5.x/Win's box model issues though.) Why do you ask?

[mattastic]

CSS layouts just confuse me to bits!!

I was just after some basic guidelines.