«

Is it possible to give information about an *.ico-file to include in a
*.css-file?

Regards,

Jan

Johannes Reese wrote:
> Is it possible to give information about an *.ico-file to include in a
> *.css-file?
>
> Regards,
>
> Jan

The only place you can use .ico files on a web page are for the bookmark
icon. The way you link these is through HTML, not CSS:

<link rel="shortcut icon" href="images/vopen.ico" />

On Tue, 08 Mar 2005 16:29:31 +0100 Johannes Reese wrote:

> Is it possible to give information about an *.ico-file to include in a
> *.css-file?
>
> Regards,
>
> Jan


No.
You'd have to reference the image in a division or an <a> tag with an ID or
class.

#icon { ..... }

<div id="icon">icon.ico</div>

SpaceGirl <> wrote:
>Johannes Reese wrote:
>> Is it possible to give information about an *.ico-file to include in a
>> *.css-file?

As SpaceGirl says you can't use CSS to include your site shortcut
icon. But if you want to use .ico files elsewhere then you can, though
many of the more logical uses of such files (where an icon would be
useful) would involve CSS that is poorly supported at present.

>The only place you can use .ico files on a web page are for the bookmark
>icon. The way you link these is through HTML, not CSS:
>
><link rel="shortcut icon" href="images/vopen.ico" />

Actually, <img src="favicon.ico"> works in IE5+, Opera and Firefox, so
I would guess that specifying .ico files for backgrounds via HTML or
CSS would also work. Possibly more usefully they also work in the
list-style-image and content properties.

I don't see any reason why an ICO would be preferable to a GIF or PNG
for that sort of small icon, but I don't see many reasons why the
opposite would be true either (GIF animation and PNG alpha
transparency being the obvious ones).

Going a bit theoretical, if you had a lot of links to a particular
external site than you could do something like this:

a[href|="http://www.yahoo.com/"]:before {content:
url('http://www.yahoo.com/favicon.ico')}

Gecko only at the moment, IE doesn't support any of the above and
Opera seems a little buggy.

(It's a shame that the value of attr() isn't parsed by the CSS parser
because then you could do a more generic version such as
a[href|="http"]:before {content: url(attr(href) '/favicon.ico')}
But that won't work under CSS2.x rules.)

Steve


--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <> <http://steve.pugh.net/>

It was somewhere outside Barstow when "Richard" <Anonymous@127.001>
wrote:

>You'd have to reference the image in a division or an <a> tag with an ID or
>class.

As usual, RtS spouts irrelevant rubbish.

Steve Pugh wrote:

> a[href|="http://www.yahoo.com/"]:before {content:
> url('http://www.yahoo.com/favicon.ico')}
>
> Gecko only at the moment, IE doesn't support any of the above and
> Opera seems a little buggy.

a[href|="http://www.yahoo.com/"]:before {
background: transparent url('http://www.yahoo.com/favicon.ico')
no-repeat scroll center left;
padding-left: 32px;
}

Works nicely in Gecko and Opera.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Richard wrote:
> On Tue, 08 Mar 2005 16:29:31 +0100 Johannes Reese wrote:
>
>
>>Is it possible to give information about an *.ico-file to include in a
>>*.css-file?
>>
>>Regards,
>>
>>Jan
>
>
>
> No.
> You'd have to reference the image in a division or an <a> tag with an ID or
> class.
>
> #icon { ..... }
>
> <div id="icon">icon.ico</div>
>
>
>

Hmm... care to explain how that works? All that your example would do is
print the text "icon.ico" on the web page. Nothing else. You can however
do something along those lines for other image types:

<style ...>

#icon { background:url(myimage.gif);

</style>

....

<div id="icon">the background of this text is an image</div>


Browsers really only support jpeg, gif and png images. ico files have
limited support for bookmarking etc, and even then they dont work all
the time (IE only displays them AFTER you have bookmarked a page). You
couldn't use a .ico file in my example.

Toby Inkster wrote:
> Steve Pugh wrote:
>
>
>>a[href|="http://www.yahoo.com/"]:before {content:
>>url('http://www.yahoo.com/favicon.ico')}
>>
>>Gecko only at the moment, IE doesn't support any of the above and
>>Opera seems a little buggy.
>
>
> a[href|="http://www.yahoo.com/"]:before {
> background: transparent url('http://www.yahoo.com/favicon.ico')
> no-repeat scroll center left;
> padding-left: 32px;
> }
>
> Works nicely in Gecko and Opera.
>

Dont you just LOVE IE?

SpaceGirl <> wrote:

><style ...>
>#icon { background:url(myimage.gif);
></style>
>
><div id="icon">the background of this text is an image</div>
>
>Browsers really only support jpeg, gif and png images. ico files have
>limited support for bookmarking etc, and even then they dont work all
>the time (IE only displays them AFTER you have bookmarked a page). You
>couldn't use a .ico file in my example.

Yes you could. Try it. It works.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <> <http://steve.pugh.net/>

Steve Pugh wrote:
> SpaceGirl <> wrote:
>
>
>><style ...>
>>#icon { background:url(myimage.gif);
>></style>
>>
>><div id="icon">the background of this text is an image</div>
>>
>>Browsers really only support jpeg, gif and png images. ico files have
>>limited support for bookmarking etc, and even then they dont work all
>>the time (IE only displays them AFTER you have bookmarked a page). You
>>couldn't use a .ico file in my example.
>
>
> Yes you could. Try it. It works.
>
> Steve
>

I missed a caveat "and have it work in IE"