list_style image wont display in menu

[fodo]

I have a simple menu that should dipslay a customised bullet against each item and change when the item is selected ( from bullet to arrow)
The images dont display.
The list is populated from a db using php and the links are made from a function.
The site link is http://217.46.159.226/e_cart22/
The menu is select e-books cataegory.
Any help appreciated.
The css is


#cats {
margin-top: 5px;
float:left;
}

#cats td.head {
text-align:center;
width:180px;
background-color: gray;
color: #FFFFFF;
font-size: 90%;
}
#cats ul {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
}

.custom {
list-style-image:url('./images/bullet_cat.gif');
}
#cats li {
list-style-type: none;
background-image: url(./'images/arrow_green.gif');
background-repeat: no-repeat;
background-position:0px 2px;
padding-left: 30px;
padding-top: 2px;
padding-bottom: 2px;
margin-bottom: 2px;


}
div#cats li a:link {
text-decoration: none;
color: #00AEED;
font-weight: bold;
}

div#cats li a:visited {
text-decoration: none;
color: #00AEED;
font-weight: bold;
}
div#cats li a:hover {
text-decoration: none;
color: #FF0000;
font-weight: bold;
}

div#cats li a:active {
text-decoration: none;
}

The mark up is


echo '<table>';/*set overall table*/
echo '<tr><td valign="top">';/*set first row and cell in overall table for cats*/
echo '<div id="cats">';
echo '<table width="180" border="1" valign="top">';/*set table for cats*/
echo '<tr><td class="head" >Select an E-Book Category</td></tr>';/*set title cell*/

echo '<tr><td>';/* set table row and cell for cats*/
echo '<ul>';
foreach ($cat_array as $row)
{
$url = 'show_cat.php?cat_id='.($row['cat_id']);
$title = $row['cat_description'];

?>
<li class="custom">
<a href="<?php echo $url; ?>"><?php echo $title; ?></a><br />

</li>
<?php
}

echo '</ul>';


the function for the link is


function do_html_URL($url, $title)
{
// output URL as link and br
?>
<a href="<?php echo $url; ?>"><?php echo $title; ?></a><br />
<?php
}

[fodo]

I have checked my access log and get the following.Http/1.1 404 332
Can anyone interpret this please.


I have checked my apache access logs and get the following which I think is an error code.
Can anyone intepret this for me please?
86.137.214.22 - - [16/Aug/2008:11:41:34 +0100] "GET /e_cart22/includes/images/bullet_cat.gif HTTP/1.1" 404 332 "http://217.46.159.226/e_cart22/" "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; FunWebProducts)"
86.

[jscheuer1]

Not sure about the error, but relative paths in css files are relative to the css file. That would mean it is looking here:

e_cart22/includes/images/bullet_cat.gif

for the image, which is a file not found. That might be the error. The image is actually here:

/e_cart22/images/bullet_cat.gif

so you could use:


.custom {
list-style-image:url('../images/bullet_cat.gif');
}

or:


.custom {
list-style-image:url('/e_cart22/images/bullet_cat.gif');
}

Also, this style is just wrong (and the path may be wrong as well):


background-image: url(./'images/arrow_green.gif');

But I think that's just a typo, it looks right in the actual stylesheet, unless it is listed in more than one place. I just checked, the path is wrong there as well. It should be:


background-image: url('../images/arrow_green.gif');

[fodo]

Thanks J,
I now see the images althought the effect is not right yet.
I want to place the bullet aganst the category and highlight with the arrow when its selected.
I guess I willhave to modify the padding in the li.
Not sure how to make the arrow appear on selection. Do I use a active?

[jscheuer1]

You could use the hover pseudo class to change the bullet. This should work in all modern browsers except IE 6, which would require a javascript onmouseover/onmouseout event pair, unless you could somehow work out the css:hover event to be over an anchor link (probably not possible with list items).


Something like (for IE 7 and non-IE):


.custom {
list-style-image:url('../images/bullet_cat.gif');
}
.custom:hover {
list-style-image:url('../images/arrow_green.gif');
}

[fodo]

hi J,
that works yet I cant get the image positioned against the category.
Should the code be in the cats li ?

[jscheuer1]

Looks like just a matter of positioning (padding, margin for the li), but first try the list-style-position property:


.custom {
list-style-image:url('../images/bullet_cat.gif');
list-style-position:inside;
}
.custom:hover {
list-style-image:url('../images/arrow_green.gif');
}

That seemed to do the trick in FF at least. You should probably edit your images though so that they are both the same width and height by either cropping and/or adding to the canvas. Otherwise, there is a jump when the images change. Or at least add a height:


.custom {
list-style-image:url('../images/bullet_cat.gif');
list-style-position:inside;
height:1.5em;
}

One final touch would be to preload the rollover image. You can do that by just adding an image tag:


<img style="position:absolute;top:-300px;left:-300px;visibility:hidden;" src="images/arrow_green.gif">

right after the opening <body> tag.

[fodo]

If I preload the image do the references change or is a function of the browser?

[jscheuer1]

If I preload the image do the references change or is a function of the browser?

An image mentioned on the page must be referenced from the page. When mentioned in the stylesheet, it must be referenced from the stylesheet. Or, you can use absolute paths in both locations. Preloading simply gets the image into the cache ahead of time so that when the rollover happens for the very first time, there is no lag.