FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY

You are invited to Log in or Register a Frihost Account!

Conditional styling

Frihost Forum Index -> Scripting -> Html, CSS and Javascript

Hi
I have a number of tables containing links to various types of documents (docs, pdfs, xls's, ...):

Code:

<td width="25%"><ul>
<li ><a href="test.pdf">Test1.pdf</a></li>
<li ><a href="test.doc">Test2.doc</a></li>
<li ><a href="test.xls">Test3.xls</a></li>
</ul></td>

Now I want to apply consitional styling.
When I use

Code:

a[href $=".pdf"] {
background-image: url(Images/myico_PDF.gif);
background-repeat: no-repeat;
padding-left: 10px;}

I get my little pdf icon as background. But I really want to have the little icon as list-style-image, something like

Code:

ul li[a[href $=".pdf"]] {
list-style: outside url(/Images/myico_PDF.gif);}

So, if there is a list item containing a <a> that contains a <href> ending in ".pdf", I want the list-style-image to be myico_pdf.gif.

But my browser doesn't understand me. Where do I go wrong?

I'd just write different CSS classes, and use one class by filetype. Like :

Code:

<li class="pdffile"><a href="test.pdf">Test1.pdf</a></li>
<li class="docfile"><a href="test.doc">Test2.doc</a></li>
<li class="xlsfile"><a href="test.xls">Test3.xls</a></li>

Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.