Lists, Floats and invisible list-style-image

https://testbed.odysseyshipping.com/

In the footer, I am having problem with the list-style-image statement
in my CSS

1) In Firefox, my custom image shows in front og all list items EXCEPT
the first column

2) In IE 7, they don;t sow any where

I suspect it has to do with floats. Can anyone assist?

Thanks,
Don

Don't know if you van View CSS source but below is my CSS code for the
footer:

#footer {
padding: 0;
margin: 0;
clear: both;
}

#footer_headers {
width: 100%;
margin: 0;
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
float: left;
background-image: url(../images/menurest.jpg);
background-repeat: repeat;
color: white;
font-weight: bold;
}

#footer_headers:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #footer_headers { height: 1%; } /* for IE5+6 */
*:first-child+html #footer_headers { min-height: 1px; } /* for IE7 */

#footer_headers .footer_header_title {
margin: 0;
padding: 0;
padding-left: 1%;
width: 24%;
float: left;
font-weight: bold;
}

#footer_links {
width: 100%;
margin: 0;
padding: 0;
float: left;
color: black;
text-align: left;
}

#footer_links:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #footer_links { height: 1%; } /* for IE5+6 */
*:first-child+html #footer_links { min-height: 1px; } /* for IE7 */

#footer_links .footer_links_title {
float: left;
width: 25%;
padding-top: 10px;
}

#footer_links .footer_links_title ul {
margin: 0;
padding: 0;
list-style-image: url(../images/acc_arrow.gif);
}

#footer_links .footer_links_title li {
color: #993300;
text-align: left;
}

Ben C

Guest

n/a Posts

June 27th, 2008
07:19 PM
#2

Re: Lists, Floats and invisible list-style-image

On 2008-06-03, donpro <donpro-2003@rogers.comwrote:

Quote:

The images are there, they're just off the left of the page, because you
gave the ul zero left margin and padding.

Usually uls have 40px left margin (or left padding in some browsers)
from the default stylesheet, which leaves plenty of space for the
bullet.

The bullet is positioned off to the left of the li's block box, usually
about 8px off its port bow as it were. If the li is flush to the left of
the viewport as in your page, the bullet image ends up off-screen. You
would be able to scroll to it except browsers don't usually allow left
scrolling (long story).

Either make some space for it or use list-style-position: inside.

Quote:

2) In IE 7, they don;t sow any where

Can't help you there, I don't have IE.

bluantinoo@gmail.com

Guest

n/a Posts

June 27th, 2008
07:19 PM
#3

Re: Lists, Floats and invisible list-style-image

try to apply display:inline to the ul element, sometimes it helps.
by

donpro ha scritto:

Quote:

https://testbed.odysseyshipping.com/
>
In the footer, I am having problem with the list-style-image statement
in my CSS
>
1) In Firefox, my custom image shows in front og all list items EXCEPT
the first column
>
2) In IE 7, they don;t sow any where
>
I suspect it has to do with floats. Can anyone assist?
>
Thanks,
Don
>
Don't know if you van View CSS source but below is my CSS code for the
footer:
>
#footer {
padding: 0;
margin: 0;
clear: both;
}
>
#footer_headers {
width: 100%;
margin: 0;
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
float: left;
background-image: url(../images/menurest.jpg);
background-repeat: repeat;
color: white;
font-weight: bold;
}
>
#footer_headers:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #footer_headers { height: 1%; } /* for IE5+6 */
*:first-child+html #footer_headers { min-height: 1px; } /* for IE7 */
>
#footer_headers .footer_header_title {
margin: 0;
padding: 0;
padding-left: 1%;
width: 24%;
float: left;
font-weight: bold;
}
>
#footer_links {
width: 100%;
margin: 0;
padding: 0;
float: left;
color: black;
text-align: left;
}
>
#footer_links:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #footer_links { height: 1%; } /* for IE5+6 */
*:first-child+html #footer_links { min-height: 1px; } /* for IE7 */
>
#footer_links .footer_links_title {
float: left;
width: 25%;
padding-top: 10px;
}
>
#footer_links .footer_links_title ul {
margin: 0;
padding: 0;
list-style-image: url(../images/acc_arrow.gif);
}
>
#footer_links .footer_links_title li {
color: #993300;
text-align: left;
}