External CSS Delay to load Bullet image

[buntyindia]

Hi ,

I have a paeg that is using an external CSS also also importing one CSS.
The CSS is applying some images bullets on UL tag.

#contentA ul {
list-style-image: url(images/icon/icon_list_bulletA_A.gif);
}
#contentA ul li {
color: #000000;
}
#contentA ul ul {
list-style-image: url(images/icon/icon_list_bulletA_B.gif);
}
#contentA ul ul ul {
list-style-image: url(images/icon/icon_list_bulletA_C.gif);
}
  

What is happening, when page loaded it load the default UL image very quick but when it is applying image to the nested UL , it is visible to user menas, users can see the Default image is being replaced with the new image....BUT it should not happen....

How can i handle this situation

Please Help

Bunty

[Marshall]

You might be better off assigning classes instead of doing this:
#contentA ul ul ul

Do this:

#contentA ul.menu1 {
list-style-image: url(images/icon/icon_list_bulletA_A.gif);
}
#contentA ul.menu2 {
list-style-image: url(images/icon/icon_list_bulletA_B.gif);
}
#contentA ul.menu3 {
list-style-image: url(images/icon/icon_list_bulletA_C.gif);
}

Marshall

[vincevincevince]

This is a great place to use the Data URL Scheme [tools.ietf.org]. You can embed the graphic directly into the CSS without having to use an external file.

Due to a lack of support in Internet Explorer, you can use conditional comments to fallback to your standard solution as above for those browsers.

[buntyindia]

Thanks Friends.
Let me try all the suggested solutions and let u know the results....

One more thing I forget to mention the CSS are nested means one CSS is importing other...will this also create any delay?

[cmarshall]

This is a great place to use the Data URL Scheme.

Sadly, this no workee in IE.

[AJAllen]

The way i do it, is to wipe the default bullets first, from the <ul> , then replace with the custom ones. Then there are no default ones to show.
This is what i have to display custom bullets.
ul {
list-style-type: none;
padding-left: 0;
margin-left: 10px;
}

li.custom {
background: url(bullet2.gif) left center no-repeat;

padding-left: 20px;
margin-bottom: 10px;

}

It works just fine. The extra padding-left is to allow for the fact that my custom bullets are a little larger than the default ones. if i dont have that, then the text will overlap the image.
Cheers, AJ