Category Archives: CSS

Websafe Fonts and Other Options

[quotes_right]

  • Arial, Helvetica, sans-serif;
  • ‘Arial Black’, Gadget, sans-serif;
  • ‘Bookman Old Style’, serif;
  • ‘Comic Sans MS’, cursive;
  • Courier, monospace;
  • ‘Courier New’, Courier, monospace;
  • Garamond, serif;
  • Georgia, serif;
  • Impact, Charcoal, sans-serif;
  • ‘Lucida Console’, Monaco, monospace;
  • ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
  • ‘MS Sans Serif’, Geneva, sans-serif;
  • ‘MS Serif’, ‘New York’, sans-serif;
  • ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
  • Symbol, sans-serif;
  • Tahoma, Geneva, sans-serif;
  • ‘Times New Roman’, Times, serif;
  • ‘Trebuchet MS’, Helvetica, sans-serif;
  • Verdana, Geneva, sans-serif;
  • Webdings, sans-serif;
  • Wingdings, ‘Zapf Dingbats’, sans-serif;

[/quotes_right]

Websafe Fonts

If you don’t use an HTML editor that readily reminds you of all available websafe fonts it can be hard to remember those. Here is a list of several sites that have some good reference info on this.

www.ampsoft.net/webdesign-l/WindowsMacFonts.html
www.w3schools.com/cssref/css_websafe_fonts.asp
www.fonttester.com/help/list_of_web_safe_fonts.html
web.mit.edu/jmorzins/www/fonts.html

Font Hosting Sites

Another thing to note is that if you need something a little more specific than the typical websafe font and don’t want to embed it all in a graphic, there are several font services — some free and some paid — that will serve the fonts to your website on demand.

Essentailly, all you do is put a link tag in the header of each page on which you use the font (<link href=”” />) and pull in the font as people visit your pages. Then you just call out the font in your CSS class (in your style sheet, within the <style></style> tags on your page, or inside of the style=”” attributes) like you normally would. Here are some places to find these.

Google.com/webfonts (www.google.com/webfonts)
Fonts.com (new.fonts.com/)
TypeKit.com (typekit.com/)

HTML Conditional Statements (IF IE)

IF conditions are allowed in HTML and can be a very powerful way to quickly eliminate cross-browser issues. The IF IE set of conditionals is great to have on hand and can save hours of frustration when trying to wrap up projects quickly.

Here they are:

<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
</p>

Note that they are only allowed in HTML and not in CSS. IF you want to load a whole separate CSS file for IE for one reason or another you can put the link tag into the conditional as follows:

<html>
  <head>
    <title></title>

    <!--[if IE]>
      	<link rel='stylesheet' href='stylesheet.css' type='text/css' />
    <![endif]-->

  </head>
  <body> ... 

[quotes]Reference:

  1. quirksmode.org/css/condcom.html
  2. css-tricks.com/how-to-create-an-ie-only-stylesheet/

[/quotes]

Printing HTML with Page Breaks

A common need for a web developer is to be able to design a web page that is intended to be printed by an end-user. Printing through the web browser’s “print” button or the JavaScript window.print feature is not too difficult, particular with the CSS properties: “page-break-before” and “page-break-after“.

div {
  page-break-before: always;
}

OR

div {
  page-break-after: always;
}

[quotes_right]
Here are some references:

[/quotes_right]

Here are the property options:

Value Description
auto Default. Insert a page break after the element if necessary
always Insert a page break after the element
avoid Avoid inserting a page break after the element
left Insert page breaks after the element until it reaches a blank left page
right Insert page breaks after the element until it reaches a blank right page
inherit Specifies that the value of the page-break-after property should be inherited from the parent element

(table content from w3schools.com)

NOTE: Keep in mind that if you have the page-break-after: always; set on a page element, even if nothing follows it on that particular page, there will always be a second page printed each time you print. If you want to stop that second page from always printing, use the page-break-before: always; property instead. Use that property any place you want the new page to START.

ie9-pic2

Cross-browser Testing Old Versions of IE on Mac

I run a Mac and for all of my web development work and for years had used any old PC that I could get my hands on for my cross browser / cross platform testing for my HTML, CSS, and Javascript work.

I had always been under the impression that, even though I was running IE9 on Windows 7 through my VM Ware Fusion software and could just do my IE9 testing right on my Mac, that I still had to keep that old PC around for my older versions of the browser.

One day not too long ago I stumbled across a solution that I didn’t even know was available to me.  Moreover, I already had it in place and didn’t even know it. Internet Explorer 9 has this functionality built right into it.

On any copy of IE9, click on the “Tools” icon in the upper-right corner of the browser and look for the selection that says: “F12 Developer Tools”.

When you click on that you will either get a split window in your browser that shows both your website view along with the resources available to you in the developer tools app; or, yours will show up in an entirely new window all to itself.

When the Developer Tools window appears, look through the main menu for the “Browser Mode” drop down menu.

There you have it. All the late-model IE testing that your little heart can handle right in one place.