Icons in css-file?
Johannes Reese
*.css-file?
Regards,
Jan
SpaceGirl
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" />
Steve Pugh
>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 <st...@pugh.net> <http://steve.pugh.net/>
Andy Dingley
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.
Toby Inkster
> 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
SpaceGirl
> You'd have to reference the image in a division or an <a> tag with an ID or
> class.
>
>
> <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.
SpaceGirl
> 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
> SpaceGirl <NOtheSpac...@subhuman.net> wrote:
>
>
>><style ...>
>>#icon { background:url(myimage.gif);
>></style>
>>
>>
>>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.
>
>
>
> Steve
>
I missed a caveat "and have it work in IE" :)
Steve Pugh
><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
--
Steve Pugh
>I missed a caveat "and have it work in IE" :)
It will work for some ICO files but not others in IE.
#icon { background:url(http://www.yahoo.com/favicon.ico);} works but
#icon { background:url(http://www.ebay.com/favicon.ico);} doesn't.
Typical.
SpaceGirl
> SpaceGirl <NOtheSpac...@subhuman.net> wrote:
>
>>Steve Pugh wrote:
>>
>>>SpaceGirl <NOtheSpac...@subhuman.net> 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.
>
>
>>I missed a caveat "and have it work in IE" :)
>
>
> It will work for some ICO files but not others in IE.
> #icon { background:url(http://www.yahoo.com/favicon.ico);} works but
> #icon { background:url(http://www.ebay.com/favicon.ico);} doesn't.
>
> Typical.
>
> Steve
>
Yeah... I tried it on two of the icons we use on our sites as well...
didn't work on either. Maybe it's something to do with colour depth or
something.
Johannes Reese
> SpaceGirl <NOtheSpac...@subhuman.net> 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 am not sure if I was really understood. What I meant was the element that
appears to the left of the address in the browser. It is to be introduced
like this.
<link rel="shortcut icon" href="some_picture.ico">
I didn't want to introduce this line to any document in a directory, so I
thought of putting it in a css-file.
Jan
Steve Pugh
>I am not sure if I was really understood. What I meant was the element that
>appears to the left of the address in the browser. It is to be introduced
>like this.
>
><link rel="shortcut icon" href="some_picture.ico">
No we understood (well except Richard, but he's an idiot so ignore
him). Look at the earliest replies and you'll see that very issue
addressed. Things evolved a bit from there.
>I didn't want to introduce this line to any document in a directory, so I
>thought of putting it in a css-file.
Nope. Can't be done with CSS2.x. I think it may be on the cards for
CSS3 but that's no use at the moment.
If you call the file favicon.ico and place it in the root directory
then some browsers will use it without there needing to be any link to
it from the HTML.
JDS
> As usual, RtS spouts irrelevant rubbish.
It's like he's answering a question for another thread or something!
OP: How do you build a birdhouse?
RtS: The square root can be determined by putting the topsoil down after
the sand, then coat with varnish.
Huh???
--
JDS | jef...@example.invalid
| http://www.newtnotes.com
DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/
Toby Inkster
> Browsers really only support jpeg, gif and png images.
Nonsense. XBM is supported by nearly all browsers. Has been for years and
years.
SpaceGirl
> SpaceGirl wrote:
>
>
>>Browsers really only support jpeg, gif and png images.
>
>
> Nonsense. XBM is supported by nearly all browsers. Has been for years and
> years.
>
:) Not really a common or relevant format, whatever it is... nit picker!
Toby Inkster
> :) Not really a common or relevant format,
XBM is actually a very useful format as far as server-side scripting is
concerned.
It is incredibly easy to manipulate using Perl or PHP without even loading
any image modules like ImageMagick or GD, and supported by virtually all
graphical browsers.
> whatever it is...
XBM = X11 BitMap. Basically the UNIX equivalent of BMP, but it's
restricted to monoschrome. (There is a colour version of XBM, XPM, but
it's less well supported in browsers.)
Steve Pugh
>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. ;-)
Only realised today that whilst these work in experiments we've been
using the wrong selector. a[href|=foo] selects only href="foo" or
href="foo-bar" it doesn't select href="foo/bar" which is what was
really wanted. The selector should have been a[href^=foo] which
selects any value of href that starts with foo. But that selector is
CSS3 and doesn't seem to be supported by Opera at all.
Also, in your example above is the :before needed? I can see that
without it we end up with problems when the link wraps onto a second
line but with it I seem to get other problems (understatement - it
stops working in Firefox).
Anyway, implemented a version of this on my blog.
http://www.stevepugh.net/VTT/?p=177