J
Johannes Reese
Is it possible to give information about an *.ico-file to include in a
*.css-file?
Regards,
Jan
*.css-file?
Regards,
Jan
S
SpaceGirl
Johannes said:
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" />
R
Richard
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>
S
Steve Pugh
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.
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
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.
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
A
Andy Dingley
As usual, RtS spouts irrelevant rubbish.
T
Toby Inkster
Steve said:
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. ;-)
S
SpaceGirl
Richard said:
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.
S
SpaceGirl
Toby said:
Dont you just LOVE IE?
S
Steve Pugh
SpaceGirl said:
Yes you could. Try it. It works.
Steve
S
SpaceGirl
Steve said:
I missed a caveat "and have it work in IE"
S
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.
Steve
S
SpaceGirl
Steve said:
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.
J
Johannes Reese
Steve said:
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
S
Steve Pugh
Johannes Reese said:
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.
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.
Steve
J
JDS
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???
T
Toby Inkster
SpaceGirl said:
Nonsense. XBM is supported by nearly all browsers. Has been for years and
years.
S
SpaceGirl
Toby said:
Not really a common or relevant format, whatever it is... nit picker!
T
Toby Inkster
SpaceGirl said:
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.
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.)
S
Steve Pugh
Toby Inkster said:
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
Steve