I have a problem that I can’t resolve I have container and ul list which will contain links. At the end of each link will be an image arrow. I can’t see to get the image arrow to display at the end of the text in the list. Sometimes I can get it to display correctly in IE7 by changing the position of the link_arrow to absolute, but FF pukes on it.
So I starte off my container css like so
/*from the stylesheet */
.nav_container {
position: absolute;
top:305px;
left:0px;
background-image: url('../images/new_career_images/nav_background.jpg');
width: 572px;
height: 395px;
margin: 0px 0px 0px 0px; /*top-right-bottom-left*/
padding: 0px 0px 0px 0px;
}
.nav_container ul {
list-style-type: none;
margin: 5px 0px 0px 13px; /*top-right-bottom-left*/
padding: 0px 0px 0px 0px;
}
.nav_container li {
position: relative;
margin: 0px 0px 0px 0px; /*top-right-bottom-left*/
padding: 0px 0px 0px 0px;
}
.link_arrow {
position: relative;
background-image: url('../images/new_career_images/arrow.jpg');
background-repeat: no-repeat;
width: 8px;
height: 9px;
margin: 3px 0px 0px 5px; /*top-right-bottom-left*/
padding: 0px 0px 0px 0px;
}
.nav_container #searchJobs {
font-family: Arial;
font-size: 11px;
color: #2c2976;
margin: 53px 0px 0px 67px; /*top-right-bottom-left*/
padding: 0px 0px 0px 0px;
/*background-color: gray;*/
width: 200px;
}
and my page code is thus
<div class="nav_container">
<div id="searchJobs">
<ul>
<li>Browse Open Jobs & Apply Online<div class="link_arrow"></div></li>
<li>Search Open Jobs & Apply Online<div class="link_arrow"></div></li>
<li>View Application Status<div class="link_arrow"></div></li>
<li>Create a Profile for Future Jobs<div class="link_arrow"></div></li>
<li>Edit Your Profile<div class="link_arrow"></div></li>
<li>Hiring Process<div class="link_arrow"></div></li>
</ul>
</div>
</div>
link to my web page http://dev-westfield.virtualhorizons.com/careers/work_westfield.jsp
Any help appreciated.:sigh: