dslreports logo


3.1 How To

Modern browsers support a "Bookmark Icon", and it's a small 16-by-16 pixel image named favicon.ico. The "favorites" icon appears in the list of bookmarks and in the address bar when the page is being viewed.

The favicon.ico works in the bookmarks of Internet Explorer 4.0 (and later). It also works in the bookmarks and address bar of Mozilla 1.0 (and later), Firefox (all), Netscape 7.0 (and later), and Opera 6.0 (and later).

To create an ICO file you should use Photoshop or some other program to save in ICO (Icon) format, which is similar to but not the same as a BMP (bitmap) file. For best cross-browser compatibility, make the icon 16x16 and use only 16 colors. To convert an image online, you can use this free service »www.html-kit.com/favicon/

Once you have your favicon.ico file, store it in the root folder of your web site. The file must be called favicon.ico, and it has to be in the root of the web site. This will make the icon appear with recent browsers (IE6, Firefox).

For best cross-browser compatibility, you also need to use the following link tag in your page's head section.
• 
 

]]>The  shortcut icon sets the type of link, and the file name really must be favicon.ico for best compatibility.

Technical information on how favicon works can be found at http://www.jamesshuggins.com/h/web1/favicon.htm.  Another excellent resource is http://www.favicon.com/.

by Steve See Profile edited by big greg See Profile
last modified: 2006-01-07 07:50:05


Tutorial available here: www.yourhtmlsource.com/stylesheets/advancedcss.html#IMPORTINGSTYLE.

by bluebearMX See Profile edited by big greg See Profile
last modified: 2004-05-30 17:47:58

It stinks. There are still a lot of people out there using Version 4 browsers. Mostly Netscape Navigator version 4 (NN4), on creaky old Windows and Macintosh systems. As web designers, we wish they would just go away. It's tough to make things work in the version 4 browsers and still build a "web standards" site with Cascading Style Sheets (CSS).

If you think cross-browser support means the maintenance headaches of multiple CSS files, you may have another option. This article shows you techniques you can use to make your site adjust to the browser bugs, all within one CSS stylesheet, all without Javascript or server side browser detection.

If you are commited to version 4, then you can use some styles, but you can't use others. You had better stick to the HTML 4.01 Transitional standard, and use Tables for the major pieces of your layout. NN4 can also use div and span to apply styles and uncomplicated layout. That's about it.

IE 6.0 and Gecko

Most of your audience is going to be using IE, and most of them will use 6.0. So the first step is getting things to look right in IE 6.0. Because the Gecko based browsers (Firefox, Firebird, Mozilla, Netscape 7) are very close to standards compliant, they should be next on your list of supported browsers.

Make it Pixel Perfect, just like you want it. Look at every page with IE 6 and Firefox, and you are covered. Make sure your HTML validates.

Most people can stop right there. But there are a lot of IE 5.5 people out there still. You should support them, and they will probably be your #2 browser (right after IE 6.0).

IE 5.5

IE 5.5 has the horrible box model problem. In most layouts you really care about the width, and the height is dictated by the content. With 5.5 the margin and padding is taken from the inside of the box dimensions. With ever other browser in the universe (including IE 6) the padding and margin are taken on the outside of the box dimensions.

This means that with 5.5, you have to adjust the width of ANYTHING with padding or margin, and the current way to do this is the "voice-family" hack. The voice-family hack uglys up the CSS, but it's operation is beautiful.
.box {
  padding: 5px;
  margin: 0;
  width: 100px;                /* for ie5 */
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 90px;                /* for compliant browsers */
  }
  html>body .box { width: 90px }  /* for opera */
 

]]>We want a box that is 90px wide, with 5 px padding on each side.  First we set the width wider for 5.5, to include the 5px padding. The first voice-family confuses the IE 5.5 parser, rendering trash which it ignores until it sees the next } which resets his parser. For all other browsers, the voice family is reset back to its inheritied value, then the correct 90px width is set. The last line is called the "be nice to Opera" rule. It resets the width back to 90px for Opera 5 which is confused by the voice-family hack (like IE 5.5) but "gets" the box model (like all the other browsers do). Newer browsers (and hopefully all future browsers) will support the html> selector and they will also use the correct (90px) width.

IE 5.5 also has its own idea of what the font-size keywords scale your font to. What in IE 5.5 is "small" is the size of "medium" everywhere else. So, if you use font sizes by keywords (as many people do), you will also find yourself using the voice-family hack to set the font size for 5.5. This page has an excellent explanation: »diveintoaccessibility.or ··· zes.html

What a mess. But from here on it gets easier.

Safari and Konqueror

With the Mac, Safari usually takes a small bit of stylesheet changes, mostly having to do with Safari (and Konqueror) collapsing blocks when they shouldn't. Addition of a few display: blocks and setting widths on blocks floated next to each other seems to help.

IE 5.2

IE 5.2/Mac is the last release for the Mac of IE, and it's idea of the box model is somewhere between 5.5 (wrong) and 6.0 (mostly right). It just blows the width of certain text lines, and has other bugs which can cause other rendering issues for 5.2. 

Fortunately we have a CSS hack for that, which makes the style a bit uglier (avert your eyes for the voice-family plus 5.2 hack)
.box {
  padding: 5px;
  margin: 0;
  width: 110px;                / * for ie5.2 Mac */
  /* \*/
  overflow: hidden;
  width: 100px; 
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 90px ;  
  /* */
  }
  html>body .box { width: 90px }  /* 5.2 mac doesn't see  */
 

]]>First we set the width to a value that makes things look right under IE 5.2. The odd looking comment screws up 5.2: because it doesn't end the comment on that line 5.2 ignores all the rules until it sees the next */. All other browsers end the comment on that same line (comment ending characters are never quoted with backslash). Between the comments, you can set things that will not apply to 5.2, like overflow: hidden (which causes entire links to disappear in 5.2).

NN4

So the last thing you want to try to get going is NN4. They are lucky to see anything other than unstyled text. You can give them colors, but some rudiumentry elements like background images are beyond NN4's capability. 

So let's say you used tables for layout, but your page looks odd because the page has margins on NN4. There's another flavor of the comment hack just for NN4. 

To make a borderless page on anything but NN4 you just set margin: 0; this doesn't work in NN4. What does work is setting the margins to exactly -10 pixels. To make this come out the easy way just use the "NN4 comment confusion hack", which looks like this.
body
{
  margin: -10px 0px 0px -10px;
/*/*/
  margin: 0;
/* */
}
 

]]>
How it works is that that NN4 gets confused by the first comment line. It doesn't think the first comment line ends. NN4 treats everything from the first comment until the next */ as a comment. All other browsers see this as code between two comments. So the margin is set up for NN4, then reset to 0 for all other browsers.

If you don't want to mess around trying to get NN4 to work, just enclose most of your styles between the goofy-looking NN4 comments. If your markup is clean, NN4 users will get a site that still works, but looks unstyled. Don't worry, in most cases they will never notice. After all, they are probably using an antique computer.


Feedback received on this FAQ entry:
  • I tried the hacks and they work beautifully. Thank you. Nora Reed nora@fighterpigeon.com

    2008-11-18 00:53:30

by big greg See Profile
last modified: 2005-06-10 07:20:48

Maricopa Community College has an online course to teach HTML.

"WRITING HTML WAS CREATED way back in 1994 to help teachers create learning resources that access information on the Internet. Here, you will be writing a lesson called Volcano Web. However, this tutorial may be used by anyone who wants to create web pages. You can get a sense of the results by looking at our illustrious alumni and kudos or what people say about the tutorial.

By the time you have reached the end of this tutorial you will be able to construct a series of linked web pages for any subject that includes formatted text, pictures, and hypertext links to other web pages on the Internet. If you follow the steps for the Basic Level (lessons 1-14) you will develop a page about volcanoes and if you go on to the Advanced Level (lessons 15-29), you will create an enhanced volcano web site."

Start learning HTML here.

by rfhar See Profile edited by big greg See Profile
last modified: 2005-11-04 14:30:52

Here are some resources for learning JavaScript.

  1. Webmonkey JavaScript online
  2. JavaScript Guide from Netscape
  3. JavaScriptkit.com

by rfhar See Profile edited by big greg See Profile
last modified: 2005-11-04 14:29:59