Original Attempts vs Final Product

In trying to do so many things with CSS, I've found different ways of doing things. Sometimes, I've tried to do it myself with pretty good results (I think), most of the time. Other times, I've taken one suggestion from one site (and/or discussion) and tried it. Later I found a site/discussion showing another way to do it. This page will explain the reasons for my trying, list and show examples of many of this type of situation. It may also point out some things I still want to do with the site, but have no clue of how to.

External and New Window Links

I wanted to keep the user on my site when they clicked external/off-site links, for various reasons - One being that I didn't want them to "lose their place" in the document they were reading.

However, many people liken new windows for this purpose without any warning to "pop ups", and I do NOT want people to think ill of MY site in this way! While many experienced users know that you can right-click your mouse on a link, then chose "Open link in new window", there are many users who do not know about this capability.

One suggestion I found that I liked was to make the link "normal" (no target attribute), then indicate, somehow, that it would take the user "off site" and give them another link to click to open a new window, if that's not the way their default settings were set up. This way, if they wanted to leave my site, they could, and if they wanted to remain where they were on my site, and open a new window, they'd still be able to.

I reviewed what others do.  Some use a small image of two offset boxes, similar to the minimize/maximize icon in the upper-right corner of this maximized window (ie: , ). Some use single or animated windows (ie: ). However, on many sites, these can also mean that the TEXT link opens in a new window. Others simply used text.

It's more work, and there ARE pages on my site where there's only a note (for now) that clicking the links opens a new window, but I've begun the process of providing two external off site links for each.

• The main link (underlined) will simply use the users' settings to open the new link. (Of course, they could always use the right-click option.)
• Immediately following will be something to indicate the link is off site and provide another link (this one with the target attribute set to _blank) to open in a new window.

Originally, I created a couple of "buttons" to be displayed as follows:

Sample "Normal" link - goes nowhere Off Site Click Here to open link in a New Window

The first "button" following the link is just FYI. The second "button" would open the same link in a new window.

This would work for shorter links and links in a list. However, to make my site more "user friendly" I also wanted to provide the same functionality in the middle of sentences and paragraphs, and, as you can see, this way takes up a LOT of space.

In searching for other information, I found wellstyled.com (Well-Styled) information about Inline Buttons Off Site New Window, and, as you can see, used it's information to create a smaller, single button.

However, even this was too long when included in paragraphs, and there were problems making both sides' colors work correctly. I thought about abbreviations, but didn't think they were "intuitive" enough. So I settled on a version of the Well-Styled buttons, using color-coding for the type. I will include the type, that the button opens the previous link in a new window, and the "title" attribute from the link itself. (See OFPv2 - Site - Help (New Window Links) for more. These will be turned "off" for printing.

While a little less "intuitive" than actually "spelling it out", I think it will work. I'm also thinking of adding a short description of what it does to each page (probably just under the banner).

So, now the user has the option of opening the link in the same or a different window, and I've skirted the issue of using target="_blank", causing experienced browsers to dislike my site with a passion.

Again, PLEASE NOTE: Most external links on my site currently use the target="_blank" attribute on "normal" links. I AM in the process of fixing these. During the redesign, I changed many links to be more "user friendly" (using words - usually the titles from the pages themselves, not the link itself). HOWEVER, I still need to add the Inline Buttons, above, and title attributes (appear in tool-tips) to MANY. Most of these pages are marked as still being under conversion.

Printing CSS

I made a duplicate of my site-wide CSS, set the full-sidebar ID and inline button and linkbar classes to { display: none; } and changed the site colors to use black, white and grays, which should be printable on all (color and black & white) printers (saving the colored ink), as follows:

f0fff0 (light green)  to ffffff (white)     (general background)
ffff99 (pale yellow)  to f0f0f0 (ltgray)    (hilited text bg)
ffffe1 (light yellow) to f0f0f0 (ltgray)    (blockquote rplcemt div bg)
fff2e6 (light orange) to ebebeb (medgray)   (h1,blockquote rplcmt div bg)
ffff00 (yellow)       to c8c8c8 (gray)      (blockquote rplcmt div bg)
ff0000 (red)          to a0a0a0 (meddkgray) (font color)
0000ff (blue)         to 7c7c7c (darkgray)  (font color)
005500 (dark green)   to 000000 (black)     (general font color/etc.)

These changed "just in case" the colors are used elsewhere:

009D4F (lghtst green) to f0f0f0 (ltgray)    (button border)
336600 (green)        to f0f0f0 (ltgray)    (sidebar bg)
004400 (drkst green)  to 000000 (black)     (button border)
c0dc01 (safety green) to 000000 (black)     (active button words)
feb767 (orange)       to 000000 (black)     (sidebar active color)
ff6633 (orange)       to 000000 (black)     (active link font)

Manual changes:
       remove any URL (basically background)
       change #button-sidebar,
              .linkbar,
              a.ilb (inline button) to "{ display: none; }"
              /* ilb class should cover named colors */
              a.ilb2, a.ilb2el, a.ilb2pa, a.ilb2ed,
              a.ilb2fu1, a.ilb2fu2, a.ilb2fu3, a.ilb2fu4 to "{ display: none; }"
              These inline buttons were defined, because I could not get IE to
              display the other versions right. I kept the others because:
                    1) They are the original design, based on the articles;
                    2) They are used to show the process of going from original
                       concept to final product.

leaving ONLY the pictures and graphics to print in color.

This should only print the main part of the page - the banner (where it's from), the "breadcrumbs" (so they can find it again), the relevant part of the page (the "article"), and the copyright information paragraph. (Yes, that includes a few irrelevant things, but not too many lines.) All

The margins for the main-section have been reset (replacing the spacing for the sidebar) to 3% (and COULD be changed to less or 0), however, for a time, I could not get hardly any part of the page to display in the Print Preview of IE6. (My printer's out of ink, and I don't have the money to buy any!)

From much reading on the 'net, I found that there's a problem with printing floats and some positions. In fact, many say ALL positions must be changed to static and all floats must be removed. However, playing around with MY print CSS, it appears that position: absolute; works ok for printing (from IE6, anyway), but position: relative; must be changed to position: static;. It appears that any float that did included a position: could be kept. I will await comments on this one - There MAY be a problem with other browsers. HOWEVER, if the float did not have a width or position, there were problems, and they had to be removed. It appears they print correctly, anyway.

Even so, I still have problems with margins (at least I do) with lines being split in two, meaning on many pages, the top half of a line prints at the bottom of a page, and the bottom half prints on the top of the next page. I also have pictures splitting between pages, but I believe this would require a redesign of the page, itself, and think I can accept this, at least for the ones I tested. We'll see.

Ideas for the Print CSS

Something else I would like to do is add the URLs of the links on each page. However, because of the number of pages involved, I would MUCH prefer it be something that added to the Print CSS, or, if it's an HTML statement or two, it should be at least "mass-addable" (I have well over 160 pages to add it to!).

I certainly like the idea from the article A List Apart: Articles: Improving Link Display for Print (Aaron Gustafson), about creating a footnote section for the printed page, containing numbered links, with the numbers as either superscript numbers by the links, or (more preferable for me) as bracketed and underlined numbers. HOWEVER, again, because of the number of pages involved, having to enter at the very least a line calling an external JavaScript, which could/would cause security issues (the bar at the top of the screen) to appear, on more than 160 pages, is a daunting idea ...

I could also see the possibility of adding the URLs immediately following the underlined words indicating the link as in A List Apart: Articles: CSS Design: Going to Print (Eric Meyer) - and many others, most of whom credit Eric's article ... However, it appears that FrontPage won't let me add the code to the CSS without modifying it to ... not what it should be. (FrontPage appears to only allow one set of quotes within the content of the class, and drops those between. Thus:

#main-page a:link:after, #main-page a:visited:after {
	content: " (" attr(href) ") ";
	font-size: 90%;  }

becomes:

#main-page a:link:after, #main-page a:visited:after {
	content: "attr(href";
	font-size: 90%  }

on save, apparently FrontPage keeping the first and last quote, and, for some reason, removing the close parenthesis of the attr(href). I am unsure of why. (If you know, please let me know!)

I may still try this one (it's better than none at all), making the change in NoteBook before publishing the pages.

The advantage of the former over the latter is that many pages contain links, many of which are VERY long, (therefore, they may "break" badly) and which would be MUCH easier to read in a footnote list at the end of the print than intermixed with the text. We'll see.

Send comments/questions about this page to Bill Sanders at:
 

Send email to Bill Sanders ()
with questions or comments about this page or site.

This site, all text and graphics (unless otherwise noted) on it
were designed, developed and published by Bill Sanders of Orange Frog Productions.
It and it's CSS was validated and complies with both the: CSS and HTML 4.01 validators from W3C.
NOTE: All CSS validates except the "New Window Buttons" which include some invalid code (ie: hacks),
added PicoSearch Tables, and warnings for using transparent backgrounds when color foregrounds defined.
Copyright © 2003, 2004, 2005, 2006, 2007 by Bill Sanders / Full site last modified: October 21, 2006
Any reproduction, printing, or selling of this content is prohibited without express written consent from William D. Sanders.