Darby O’Toole by PVII

© Copyright 2004 Project Seven Development (PVII). All Rights Reserved.

This User Guide may not be copied without the express written permission of Project Seven
www.projectseven.com
mailto:info@projectseven.com

Darby O’Toole FastPack™ by PVII 1 of 36

Darby O'Toole by PVII................................................................................................................... 3
Overview.............................................................................................................................. 3
Before you begin ........................................................................................................... 3
What's included .............................................................................................................. 3
Extensions ........................................................................................................................... 4
Starter Pages ....................................................................................................................... 4
Editable Fireworks Images ............................................................................................ 4
CSS Files ............................................................................................................................. 5
JavaScript files ................................................................................................................... 5
Adding Content............................................................................................................... 5
Removing a Menu ........................................................................................................ 6
Remove a submenu .......................................................................................................... 6
Removing a Trigger ......................................................................................................... 8
Images .................................................................................................................................. 9
CSS Guide ....................................................................................................................... 11
The Netscape 4 CSS File .............................................................................................. 11
The main CSS File.......................................................................................................... 13
Body .................................................................................................................................... 14
logo ...................................................................................................................................... 14
wrapper ............................................................................................................................... 14
maincontent....................................................................................................................... 15
sidebar................................................................................................................................. 16
clearwrapper ..................................................................................................................... 17
footer ................................................................................................................................... 17
menu triggers .................................................................................................................... 18
IE-PC Conditional Comments .................................................................................... 20
The Netscape 4 CSS File .............................................................................................. 21
Extension Help.............................................................................................................. 25
Auto ShowHide by PVII............................................................................................... 25
AutoHide by PVII ................................................................................................................. 28
Overview ........................................................................................................................... 28
Creating an autoHide behavior ................................................................................... 28
Modifying an existing autoHide behavior............................................................... 29
The Interface: ................................................................................................................... 29
Write V4 StyleSheet by PVII ...................................................................................... 31
SUPPORT OPTIONS.............................................................................................. 36

Darby O’Toole FastPack™ by PVII 2 of 36

Darby O'Toole by PVII
Thank you for purchasing Darby O'Toole - a PVII FastPack™ Page Layout Template. Simply add your
own content and edit the logo and trigger buttons in Fireworks to make Darby your very own Home
Page.
On behalf of the PVII Team, we hope you enjoy working with Darby as much as we enjoyed making it.

Al Sparber and Gerry Jacobsen - PVII

Overview
Darby is a fixed width layout with a page-spanning masthead and navigation bar. The navigation bar
employs mouseover dropdown submenus controlled by PVII Auto Show-Hide and AutoHide behaviors
(refer to the Extension Help Files to learn how these extensions work). Page content is housed in two
floated DIVs that are fixed width and centered. Creative use of CSS allows both the main content and
sidebar to appear to be of equal height. Images are minimally used. Markup conforms to HTML 4.01
specifications.

Before you begin

Before you begin to work with your FastPack™ move the unzipped folders into a defined
Dreamweaver web site. We recommend that you backup the original zip file for safekeeping. We also
recommend that you print out this User Guide and keep it handy on your desktop as you work.

What's included
Everything you need is included. Extensions, editable Fireworks images, starter pages, CSS files, a
JavaScript file, and this User Guide.

Darby O’Toole FastPack™ by PVII 3 of 36

 Extensions
The following three extensions can be found in the Darby/local files folder:

1. P7_autoShowHide_12.mxp
2. P7_autoHide_15.mxp
3. P7_v4StyleSheet_11.mxp

Install them before you begin working on your Darby O'Toole page. If you are not sure how to install an
extension, choose:

• Commands - Manage Extensions - The Extension Manager will open

• In Extension Manager, press F1 to launch its Help System

Note: After installing, close and restart Dreamweaver to initialize your extensions.

Starter Pages
To make your job a bit easier, we've included two starter pages for you. One page contains five
submenus and the other contains seven. Based on your needs, choose one or the other before you
begin. Each starter page is in its own self-contained folder.

1. five_subs/starterpage_five.htm - this starter page contains five submenus

2. seven_subs/starterpage_seven.htm - this starter page contains seven submenus

Note: The five-menu starter page actually contains seven buttons and the seven-menu page actually
contains nine. The first button (a home icon) and the last button (a mail to icon) are static links and
have no submenus. In addition to their roles as home and mail links, these buttons also serve as
triggers that close any open submenus as you mouse off adjacent triggers to the left or the right.

Editable Fireworks Images

We've included two Fireworks documents. One relates to the five_subs folder and the other relates to
the seven_subs folder. The following editable Fireworks images can be found in the Darby/local files
folder:

1. local files/darby_five.png - this image is associated with the five-submenu Darby page
located in the five_subs folder
2. local files/darby_seven.png - this image is associated with the seven-menu Darby page in
the seven_subs folder

Darby O’Toole FastPack™ by PVII 4 of 36

 CSS Files
There are four included CSS files. Two are related to the five_subs page and the other two are related
to the seven_subs page:

1. five_subs/darby_five.css - Used by version 5 and higher browsers

2. five_subs/darby_n4_five.css - Used by Netscape 4
3. seven_subs/darby_seven.css - Used by version 5 and higher browsers
4. seven_subs/darby_n4_seven.css - Used by Netscape 4

JavaScript files
Both the five_subs and seven_subs folders contain a JavaScript file that is linked to its respective
starter page. This file contains the scripts that power your drop down menu as well as a Netscape 4
resize fix:

1. five_subs/darby_five.js
2. seven_subs/darby_seven.js

Note: Both script files are less than 3K.

Adding Content
Adding content is as simple as opening starterpage_five.htm (or starterpage_seven.htm) and
adding your own content. Everything is set up and waiting for you!

Darby O’Toole FastPack™ by PVII 5 of 36

 Removing a Menu
There may be times you would want to remove a submenu and its trigger - or perhaps you just want to
remove the submenu, keeping the trigger as a simple button that links to a page but has no submenu.

Note: While you can remove a submenu and leave its trigger to act as a static link, when you delete a
trigger you should also delete its submenu.

Remove a submenu
-Open your Layers panel and visually confirm the submenu you wish to delete

Darby O’Toole FastPack™ by PVII 6 of 36

 As an example, you'll remove p7sub6
-Select the <body> tag on Dreamweaver's Tag Selector bar, which runs along the bottom edge of your
Dreamweaver window
-Open your Behaviors panel
-Double-click autoHide by PVII

The autoHide window will open

-Select the ID of the submenu you wish to remove (in this case, p7sub6)
-Click the De-Select Element button
-Click OK
-Open your Layers panel
-Select p7sub6
-Press your delete (del) key

Darby O’Toole FastPack™ by PVII 7 of 36

 Removing a Trigger
You just removed p7sub6 submenu and now you also want to remove its related trigger p7trig6.
-Open your Layers panel
-Select p7trig6

-Press your delete key

Reposition the remaining triggers and submenus

If you removed a trigger, you will need to reposition one or more adjacent triggers (and their
associated submenus) - unless you removed the last trigger. In this example, you've removed p7sub6
and its trigger p7trig6. You'll need to reposition (to the left) the triggers and submenus (if applicable)
that are to the right of the removed objects. The distance to be moved is equal to the width of the
trigger image you removed. In this case, using the five_subs page, p7trig7 needs to be moved left a
distance equal to the width of p7trig6 - which is 111 pixels. The width property for the triggers is
contained in your CSS file.

-Open darby.css and locate this rule:

#p7trig7 {left: 626px; width: 90px;}
Subtract 111 pixels from its left value so the rule looks like this:
#p7trig7 {left: 515px; width: 90px;}
-Open darby_v4.css and locate the same rule
-Make the same change to its left value
-Close and save both CSS files

Note: if p7trig7 had a submenu, you would also need to subtract 111 pixels from the submenu's left
value. If p7trig7 had a submenu, the rule you would need to edit would be p7sub7.

Darby O’Toole FastPack™ by PVII 8 of 36

 Images
The two included Fireworks files are commented to assist you in making edits. Before you edit these
files, you should make a backup in case you make an error or wish to revert back to the original. Once
you've made your edits, all you need to do to get your revised images into your page is to run the
Export command in Fireworks. Follow these instructions from inside Fireworks:
-Make your edits
-Choose File: Export
-In the Save in box, browse to the assets folder in the appropriate Darby folder. That is, if you are
working with the five_subs page, browse to five_subs/assets
-Select and open the assets folder by double-clicking it

-Enter darby in the File name box (if it's not already there)
-For Save as type, select Images Only
-HTML should be grayed out (unavailable) and None will be displayed
-For Slices, select Export Slices
-Selected slices only, Current frame only, and Include areas without slices should all be unchecked
-Click the Save button

Darby O’Toole FastPack™ by PVII 9 of 36

 A dialog will pop up warning you that you are about to overwrite (replace) existing image files.

-Click OK
All the images contained in your Fireworks document (including the ones you edited) will be exported -
overwriting your existing images and reflecting all of your changes.

Darby O’Toole FastPack™ by PVII 10 of 36

 CSS Guide
Your PVII FastPack™ is powered by CSS. There are two CSS files per starter page. One file is read
by version 5 and higher browsers only. The other is read by Netscape 4 only.

The Netscape 4 CSS File

The Netscape 4 style sheet is served only to Netscape 4 via the P7_v4StyleSheet command, which
places this script in your page:
function P7_v4StyleSheet(a,b){ //v1.0 by PVII-www.projectseven.com
var m=false,tS='<l'+'ink re'+'l="sty'+'lesheet" t'+'ype="tex'+'t/css"
hr'+'ef="'+b+'">';
m=(a==0)?(!document.getElementById):(document.layers);
if(m){document.write(tS);}
}
P7_v4StyleSheet(1,'darby_n4_five.css');
This technique allows you to maintain a completely separate style sheet for Netscape 4. Since modern
browsers never see this style sheet, you do not have to worry about styles cascading from one sheet
to another or of using cumbersome and complicated filter hacks. Your Netscape 4 style sheet contains
only rules that are safe for that browser.

In order for Netscape 4 to be able to find your CSS file in all scenarios, you will need to adjust the path
so that it is absolute or site relative. The path in the above script example is: href="darby_n4_five.css".

Absolute Path Example

http://www.mysite.com/darby_n4_five.css

Site Relative Path Example

/darby_n4_five.css

Darby O’Toole FastPack™ by PVII 11 of 36

 To change the path:
-Choose Commands: Studio VII: Write v4 Style Sheet by PVII
The Command window will open

Note: Since the starter page already contained the command, the window will open in "modify" mode
with the original document-relative path we set. You'll know you are in "modify" mode because the
window will display Apply and Remove buttons.

-Enter an absolute or site relative path in the Path to version 4 Style Sheet box
-Make sure the Apply for Netscape 4.x browsers only box is checked
-Click the Apply button

Previewing in Netscape 4
Once you change the Netscape 4 style sheet path to absolute (or site relative) you will not be able to
preview the page locally in Netscape 4 unless you temporarily change the path back to document
relative. the PVII Write V4 Style Sheet command allows you to do this easily:
-Choose Commands: Studio VII: Write v4 Style Sheet by PVII
The Command window will open in Modify mode

-Use the Browse button to locate your n4 style sheet or type in the document relative path
-Click Apply

IMPORTANT! Make sure you set the path back to absolute or site relative before publishing the page
to the Internet.

Darby O’Toole FastPack™ by PVII 12 of 36

 The main CSS File
Below is a rule-by-rule analysis of the main CSS file. To maintain the integrity of this file, we
recommend that your edits take place in the actual file. If you are using a version of Dreamweaver
older than MX, we recommend that you use a dedicated CSS Editor such as TopStyle (PC) or
StyleMaster (Mac) - or a simple text editor. Before you edit the CSS file, make a backup copy of the
original in case you need or want to revert back to it.

Imported CSS
To hide your main CSS file from older browsers, we use the @import directive:
<style type="text/css" media="screen,tv">
<!--
@import "darby_five.css";
-->
</style>
The media attribute is used for two purposes:

1. Setting media type to screen,tv means that the style sheet is designed for browser and for
television screens only. The style sheet is not used by printer drivers. To test this, open your
FastPack™ page in a modern browser and use that browser's Print Preview option. You'll see
that the page is very print-friendly. This technique also allows advanced CSS authors to more
easily deploy a special style sheet for printing (using media="print").
2. Dreamweaver MX2004 has a quirky behavior. When you preview in your browser using the
Temporary file option, it parses the contents of imported and linked style sheets into the
document's head, thereby exposing it to all browsers. Using a combined media type
(screen,tv) ensures that Netscape 4 will not process the CSS within the style tag, whether it's
external or parsed. Netscape 4 will understand the styles if you use just the screen media type
alone, so it's important to use the combined media type.

Note: The default @import syntax used by Dreamweaver is a bit different:

@import url(../test.css);
The Dreamweaver syntax will hide CSS from all version 4 browsers except for some later versions of
IE4 that shipped with Windows 98. If you use Dreamweaver to Import your style sheet, you will need to
edit the @import directive manually. If you subsequently move an HTML or CSS file using
Dreamweaver's site or files panels, Dreamweaver will overwrite your syntax and you'll need to edit it
again.

Darby O’Toole FastPack™ by PVII 13 of 36

 Body
Sets the page background image to repeat left to right along the x-axis. Sets the page background
color (which fills all areas of the page not covered by the background image). Sets the global font and
base font size. Font-size of 101% may seem odd, but it serves to address some cross-browser font
rendering anomalies. We also set margin and padding to zero.
body {
background-image: url(assets/otoole_bgp.jpg);
background-repeat: repeat-x;
background-color: #EDECDA;
font-family: Arial, Helvetica, sans-serif;
font-size: 101%;
margin: 0;
padding: 0;
}

logo
Sets your logo to align right. Since the logo is contained within a level 1 heading <h1>, we set that
element's margins. The margin values are expressed in CSS shorthand, which are ordered clockwise
from the top: top - right - bottom - left. The bottom margin is set to 25px, which is the height of the
trigger images. Since the trigger images are in absolutely positioned containers, they are out of the
page flow - so if we did not set a bottom margin, the page content would overlap the triggers.
#logo {text-align: right;}
#logo h1 {margin: 0 0 25px 0;}

wrapper
This DIV is the container for the maincontent and sidebar DIVs - which are nested inside it. By placing
a background image in this DIV, provide a background for both the maincontent and sidebar. By
designing the image with a left side that is green and a right side that is tan, we create the illusion that
both the maincontent and sidebar are the same height.
We set a background color, which is optional, so that a color other than the page background is
rendered because there may be a very slight delay when the page is loading until the background
images come in.
We set borders on the right, bottom, and left sides and color them to simulate a raised effect.
Margin is set to zero top and bottom, and auto left and right. By giving an element a fixed width (in this
case 736 pixels) and setting its left and right margins to auto, the element is centered.
#wrapper {
background-image: url(assets/otoole_bgmc.jpg);
background-color: #E9E8D6;
border-right: 1px solid #828282;
border-bottom: 1px solid #828282;
border-left: 1px solid #fff;
margin: 0 auto 0 auto;
padding: 0;
width: 736px;
}

Darby O’Toole FastPack™ by PVII 14 of 36

 maincontent
We set the maincontent DIV to float: left, which takes it out of the normal page flow and allows us to
position it as a "column". We set font size to .8em, which is calculated based upon the base font size
set in the body selector: .8em relative to 101% is the same as saying 80% of 101%. We set line-height
to 1.4em to provide a comfortable and more readable spacing between lines. Padding is set to 20px.
When there is one value expressed for a property that has 4 possible values, then that one value
relates to all 4 - so a single padding value of 20px assigns 20px of padding to all 4 sides of this DIV.
We set text to align justified. Since default text alignment is left, simply remove the entire line to set
your text left aligned.
Width is set to 494px. Note the comment to the right of the declaration /*536*/. This is a note to remind
you how modern browsers render an element's box. The true rendered width of a box is determined by
adding its declared width plus its left and right padding and its left and right borders. Here is the math:
494 (declared) + 20 (left padding) + 20 (right padding) = 534
OOPS - we're 2 pixels short! The wrapper has a left border and a right border that equal 2 pixels. That
2 pixels must be accounted for somewhere and here is where we are accounting for it.
534 + 1 (wrapper left border) + 1 (wrapper right border) = 536
This calculation is very important as you'll see later when you get to the sidebar DIV. The rendered
width of the maincontent DIV plus the rendered width of the sidebar DIV must equal the declared width
of the wrapper DIV.
#maincontent {
float: left;
font-size: .8em;
line-height: 1.4em;
padding: 20px;
text-align: justify;
width: 494px; /*536*/
}
The level 2 and level 3 maincontent headings are declared using a combined descendant selector. A
descendant selector describes an element contained inside another. In this case, we are describing
<h2> and <h3> elements that are within the #maincontent element. All other <h2> and <h3> elements
that are outside the #maincontent DIV are unaffected. When two selectors share the same properties
and values, they can be combined into a multiple selector separated by commas.
#maincontent h2, #maincontent h3 {
color: #676767;
font-weight: normal;
letter-spacing: 0.3em;
margin: 24px 0 0 0;
}
#maincontent h2.topheading is a descendant class selector. It tells the browser to look for <h2>
elements inside the maincontent DIV, but only if the <h2> has been assigned the .topheading class.
We do this so that the first <h2>, which is at the top of the maincontent DIV has no top margin, while
all other <h2> elements have a top margin of 24px.
#maincontent h2.topheading {margin-top: 0;}
The maincontent paragraphs have their margin set with this descendant selector.
#maincontent p {margin: 6px 0 12px 0;}
The maincontent and footer links are set with this combined selector.
#maincontent a:link, #footer a:link {
border-bottom: 1px solid #666;
color: #7E8A62;
text-decoration: none;
}

Darby O’Toole FastPack™ by PVII 15 of 36

 The maincontent and footer visited links are set with this combined selector.
#maincontent a:visited,#footer a:visited {color: #616161;}
The maincontent and footer hover, active, and focus links are set with this combined selector.

Note: Focus is used by modern browsers when the keyboard tab key is used.

#maincontent a:hover,#footer a:hover,#maincontent a:active,

#footer a:active,#maincontent a:focus,#footer a:focus {
border-top: 1px solid #666;
color: #000000;
}

sidebar
The sidebar is set to float left. Since the maincontent DIV is also set to float left, the DIV whose markup
comes first in the source code wins the left position.

Advanced Tip: If you reverse the order of the source code - that is, if you move the sidebar DIV's
markup ahead of the sidebar DIV's, then the sidebar will move to the left. If you do that, the wrapper
DIV's background image will need to be edited so that the wider part is on the right.

Font size is set smaller than the maincontent DIV and line height is made a bit tighter.
Declared width is 160px and we add left and right padding (160 + 20 +20 = 200) to arrive at the
rendered width of 200px. This width, when added to the rendered width of the maincontent DIV must
equal the declared width of the Wrapper DIV:
536 (maincontent rendered) + 200 (sidebar rendered) = 736 (wrapper declared).

IMPORTANT - If you change any of these values you need to redo the math because if you are off by
even 1 pixel, the sidebar will sink below the maincontent DIV.

#sidebar {
float: left;
font-size: .75em;
line-height: 1.2em;
padding: 20px;
width: 160px; /*200*/
}
We set sidebar headings using a combined descendant selector.
#sidebar h2,#sidebar h3 {
color: #606060;
font-weight: normal;
letter-spacing: .2em;
margin: 24px 0 0 0;
}

#sidebar h3.firstheading {margin-top: 0;}

We set sidebar paragraphs.
#sidebar p {margin: 12px 0 0 0;}
We set sidebar links.
#sidebar a:link {color: #616161;}
#sidebar a:visited {color: #7D7D7D;}
#sidebar a:hover,#sidebar a:active,#sidebar a:focus {color: #000;}

Darby O’Toole FastPack™ by PVII 16 of 36

 clearwrapper
This rule describes a <br> tag that is placed between the end of the sidebar DIV and just before the
wrapper's closing </div> tag:
<br id="clearwrapper">
This tag and the style rule below serve to clear (or close) both floated elements that come before it
(maincontent and sidebar) allowing the <br> to span the entire width of the wrapper. Doing this, forces
modern browsers to render the space that the <br> occupies - and since that space is below and
outside of the floated DIVs, the wrapper is able to display its background color and image. Why?
Floated elements are outside the normal page flow. So even though maincontent and sidebar are
nested inside the wrapper, the wrapper itself has nothing inside it that is within the page flow and,
hence, nothing to render. By wedging an element below the floated elements, but still inside the
wrapper, and setting that element to clear floats on both sides, the wrapper renders all the way down
to the <br>.
#clearwrapper {clear: both;}

footer
We set the font size. Margin is set to 24px all around to create a bit of white space.
#footer {
font-size: .7em;
margin: 24px;
}
We set the footer paragraphs.
#footer p {margin: 0 0 6px 0;}

Darby O’Toole FastPack™ by PVII 17 of 36

 menu triggers
This class selector assigns properties common to all triggers. It turns them into absolutely positioned
elements (sort of like Dreamweaver Layers, even though they are assigned to paragraphs). It sets
each trigger's top position to 63px, which allows them to nestle inside the dark gray band created by
the page background image. And it sets all margins to zero.
.p7triggers {position: absolute; top: 63px; margin: 0;}
While each trigger is assigned the .p7triggers class to address common properties, each individual
trigger must have a discrete width and left position. To accomplish this, each trigger paragraph is
assigned its own ID, which relate to the seven selectors below.

Note: The left position of a trigger is determined by taking the left position of the previous trigger plus
the previous trigger's width.

#p7trig1 {left: 0; width: 91px;}

#p7trig2 {left: 91px; width: 101px;}
#p7trig3 {left: 192px; width: 101px;}
#p7trig4 {left: 293px; width: 111px;}
#p7trig5 {left: 404px; width: 111px;}
#p7trig6 {left: 515px; width: 111px;}
#p7trig7 {left: 626px; width: 90px;}
We set the common trigger link styles. Since the trigger images are transparent (except for the text
label) the background color and image assigned to the <a> "shows through". We turn off link
underlining (text-decoration) and set the <a> to display as a block - which causes the link to fill up the
entire width and height of its containing box.
.p7triggers a {
background-image: url(assets/otoole_bgtrigs.jpg);
background-color: #E4DFBF;
text-decoration: none;
display: block;
}
We set a different background color and image for hover, active, and focus. In this manner, we have a
trigger that behaves like a traditional JavaScript swap image but we do not need the extra JavaScript
or event handlers. This also serves to simplify the Fireworks document because only one image is
needed per trigger and two background images serve to create a default and rollover state for all the
triggers.
.p7triggers a:hover, .p7triggers a:active, .p7triggers a:focus {
background-image: url(assets/otoole_bgtrigsover.jpg);
background-color: #E3E2CE;
}

Darby O’Toole FastPack™ by PVII 18 of 36

 submenus
Each submenu <ul> is assigned the class .p7submenus, which carry styles that are common to all the
submenus. The submenus are absolutely positioned. This makes them behave like Dreamweaver
Layers even though they are actually unordered lists - so that they can be positioned to align with their
associated triggers. The top position is common to all submenus, so we set it here. We also set
common border styles (to simulate a raised effect), as well as a background color and image. Width is
set to 172px. Visibility is set to hidden.
.p7submenus {
font-size: .8em;
position: absolute;
top: 88px;
background-color: #E3DEB8;
border-right:1px solid #7d7d7d;
border-bottom:1px solid #7d7d7d;
width: 172px;
background-image: url(assets/otoole_submenubg.jpg);
visibility: hidden;
}
We set the common submenu properties in the .p7submenus class selector. But each submenu needs
to have an explicitly declared left position so that it can align with its associated trigger. The left
position of each submenu corresponds with the left position of its trigger.

Note: If you wanted one or more submenus to have a different width, setting it on these selectors will
override the width declared in the p7submenus class. Just append a width declaration after the left
position like this: #p7sub2 {left: 91px; width: 200px;}.

#p7sub2 {left: 91px;}

#p7sub3 {left: 192px;}
#p7sub4 {left: 293px;}
#p7sub5 {left: 404px;}
#p7sub6 {left: 515px;}
We turn off margins and padding for both <ul> and <li> elements within the submenus. We also turn
off bullets (list-style-type).
ul.p7submenus {margin: 0; padding: 0;}
.p7submenus li {list-style-type: none; margin: 0; padding: 0;}
We set the base link <a> element styles for the submenus. Padding is set to 2px top, 6px right, 2px
bottom, and 16px left. This creates some space around the links. Setting display to block allows the
link to fill up its entire box - including the padding - making it behave much like an image.
.p7submenus a {
color: #626262;
text-decoration: none;
padding: 2px 6px 2px 16px;
display: block;
}
We set the submenu hover, active, and focus styles. When a submenu link is hovered over, pressed,
or tabbed into, the text and background colors change.
.p7submenus a:hover, .p7submenus a:active, .p7submenus a:focus {
color: #E4DEBA;
background-color: #5D5D5D;
}

Darby O’Toole FastPack™ by PVII 19 of 36

 IE-PC Conditional Comments
There are a few issues specific to IE5x and IE6 (Windows only) that need to be addressed. While
some CSS authors use complex filter hacks to hide and show various rules to several different
browsers, we prefer a cleaner and more orderly approach. Conditional Comments are a Microsoft
feature built into Explorer versions 5.0 and higher. They allow you to include code targeted at browser
specific versions. Using this technique to serve "curative" style rules to Internet Explorer allows your
main style sheet to remain clean and devoid of all manner of hacks.
We use two Conditional Comments. The first uses the version vector <!--[if IE 5]>, which targets all
versions from 5.0-5.99. IE5x gets the box model backwards - that is, it adds padding to the inside of
the box, rather than to the outside. So, the first fix is to add the wrapper borders back to its declared
width: 736 + 2 = 738.
For maincontent and sidebar, we use the rendered widths of 536px and 200px because we need to
add back the padding, which IE5x renders on the inside of the box.
IE5x does not support auto margins to center elements, but it will center anything if the body's text
alignment is centered. However, we also need to set the text alignment within all other elements to left
or the everything will be centered. Setting div, ul, and li elements cover everything in the page.

Note: Should you add another type of element, such as <ol> or <table>, to your page, simply append
those elements to the combined div, ul, li selector:
div, ul, li, ol, td (text-align: left;}

IE5x has problems with list items that are links when they are also displayed as blocks. To fix that, we
float them left, then clear them in both directions, then assign a width of 100%.
The final fix sets a height of 1em on the submenu <a> elements. This fix enables the link to fill the
entire box. Without it, only the text part of the link would be active.
<!--[if IE 5]>
<style>
#wrapper {width: 738px;}
#maincontent {width: 536px;}
#sidebar {width: 200px;}
body {text-align: center;}
div, ul, li {text-align: left;}
.p7submenus li {float: left; clear: both; width: 100%;}
.p7submenus a {height: 1em;}
</style>
<![endif]-->
The second Conditional Comment targets only IE6-6.99. IE 6 only needs this one fix to ensure that the
link fills its entire box.
<!--[if IE 6]>
<style>
.p7submenus a {height: 1em;}
</style>
<![endif]-->
The Conditional Comments must be on every page. If you are using Dreamweaver Templates, make
sure they are in a locked region of the Template. You can also deploy them via includes.

Darby O’Toole FastPack™ by PVII 20 of 36

 The Netscape 4 CSS File
The Netscape 4 style sheet is simplified and was created to minimally style the page without causing
bugs, instability, or crashes.

body
The body selector carries the background color, image, and sets margins. Top is set to 88px (the sum
of the logo and button heights) so that the page content clears the navigation bar.

IMPORTANT: In order for Netscape 4 to find your background images, change the path to the image
to either Absolute or Site Relative before publishing your site.

body {
background-image: url(assets/otoole_bgp.jpg);
background-repeat: repeat-x;
background-color: #EDECDA;
margin: 88px 0 0 0;
}

Multiple Tag Selector

Netscape 4 does not support font styles on the body tag so we need to explicitly declare a base font
family using a multiple selector that covers the most likely tags you'll be using. Feel free to append
additional tags as the need arises.
div, p, ul, li {font-family: Arial, Helvetica, sans-serif;}

logo
The only stable way to position the logo in Netscape 4 is to position it absolutely. Even though text is
aligned right, NN4 does not quite render it all the way over, but close enough - all things considered.
#logo {
position: absolute;
top: 0;
left: 0;
text-align: right;
}

headings
Netscape 4 does do very well with proportional font sizes (em or %) so we set the headings to a fixed
pixel size.
h1, h2, h3 {margin: 0; font-size: 18px;}

Darby O’Toole FastPack™ by PVII 21 of 36

 maincontent
We can use half of our cool background image in the maincontent DIV - which cannot be reliably
floated and must be statically positioned.

IMPORTANT: In order for Netscape 4 to find your background images, change the path to the image
to either Absolute or Site Relative before publishing your site.

#maincontent {
padding: 12px 20px;
width: 536px;
border: 1px solid #7d7d7d;
font-size: 14px;
background-image: url(assets/otoole_bgmc.jpg);
background-repeat: repeat-y;
}

maincontent headings
#maincontent h2, #maincontent h3 {color: #676767;}

maincontent links
Netscape 4 only supports link and visited classes - and not hover, active, or focus.
#maincontent a:link,#footer a:link {color: #7E8A62;}
#maincontent a:visited,#footer a:visited {color: #616161;}

sidebar
Sidebar is positioned absolutely (like a Dreamweaver Layer) with its left position set 10px off the right
edge of the maincontent DIV. Netscape 4 supports borders, but does not support different values on
different sides.
#sidebar {
position: absolute;
top: 96px;
left: 546px;
padding: 12px 20px;
width: 200px;
background-color: #E0D8A9;
border: 1px solid #7d7d7d;
font-size: 12px;
}

sidebar link styles

#sidebar a:link {color: #616161;}
#sidebar a:visited {color: #7D7D7D;}

Darby O’Toole FastPack™ by PVII 22 of 36

 footer
#footer {font-size: 12px; margin: 24px 0 0 0;}

footer paragraphs
#footer p {margin: 0 0 6px 0;}

common triggers styles

We use a proprietary Netscape 4 property (layer-background-color) because a DIV without a border
will not render a background color using the standard property (background-color).
.p7triggers {
position: absolute;
top: 63px;
background-color: #D5CD8E;
layer-background-color: #D5CD8E;
z-index: 100;
}

trigger paragraphs
p.p7triggers {margin: 0;}

specific trigger styles

#p7trig1 {left: 0; width: 91px;}
#p7trig2 {left: 91px; width: 101px;}
#p7trig3 {left: 192px; width: 101px;}
#p7trig4 {left: 293px; width: 111px;}
#p7trig5 {left: 404px; width: 111px;}
#p7trig6 {left: 515px; width: 111px;}
#p7trig7 {left: 626px; width: 90px;}

common submenu styles

.p7submenus {
position: absolute;
top: 87px;
margin: 0;
padding: 0;
background-color: #E3DEB8;
layer-background-color: #E3DEB8;
border: 1px solid #7d7d7d;
width: 172px;
visibility: hidden;
z-index: 10;
}

Darby O’Toole FastPack™ by PVII 23 of 36

 specific submenu styles
#p7sub2 {left: 91px;}
#p7sub3 {left: 192px;}
#p7sub4 {left: 293px;}
#p7sub5 {left: 404px;}
#p7sub6 {left: 515px;}

submenu link styles

.p7submenus a {
color: #626262;
text-decoration: none;
padding: 2px 6px 2px 14px;
font-size: 12px;
}

Darby O’Toole FastPack™ by PVII 24 of 36

 Extension Help
Use this file as a reference for the PVII Extensions and scripts used in your FastPack™.

Note: All scripts necessary to the functioning of your FastPack™ product are contained in an external
JavaScript file linked to your page. This file can be found in the externals folder.

Auto ShowHide by PVII

Auto ShowHide by PVII is a perfect solution for Showing and Hiding page elements in a list-based
(UL) or div-based (DIV) DHTML menu system and significantly reduces the number of steps that would
be necessary with the standard Dreamweaver Show-Hide layer behavior. Of course, Auto ShowHide
by PVII is not limited to producing menus and can be applied anywhere you want to show and/or hide
a series of page elements.
Auto ShowHide by PVII is very similar to our popular Auto Layers by PVII extension and extends its
functionality to work with any page element that has been assigned an id attribute.

Overview
Auto ShowHide by PVII allows you to select element on your page that has been assigned an id or
series of these page elements to become visible. You can use any elements you like, you can even
use mixed elements, the only prerequisite is that the element must have an id assigned. Here are
some typical examples:

• <div id="myDiv">
• <ul id="menu1">
• <li id="sub1">
• <p id="f1">
• <h2 id="an2">
• <table id="tb1">
• <td id="row14">

Each page element that has been processed by Auto ShowHide will be remembered. The next time
Auto ShowHide is run, all of the elements that were previously made visible will now become hidden,
and only the element(s) selected to show in this instance will remain visible. In essence, think of Auto
ShowHide as running a Show-Hide behavior to show the selected element(s) and hiding all of the
other elements at the same time.
There are cases when you want to hide all of the elements that were previously shown, like when we
mouse off a menu button. Auto ShowHide makes this very easy, since all we have to do is apply an
"empty" instance of Auto ShowHide... telling Auto ShowHide to show nothing also means that it will
hide every other element!

Darby O’Toole FastPack™ by PVII 25 of 36

 Auto ShowHide can be applied to any image or text link on the page. It can also be placed on other
tags that fire events, such as <body> onLoad.

Note: Auto ShowHide will be "grayed" out and un-selectable if there are no elements with an id on the
page.

Check the Tutorial Section at the Project Seven Web Site for the latest Auto ShowHide/Auto Layers
Tutorials.

Creating an Auto ShowHide by PVII behavior

1. Select (click) an image or null link that will act as the trigger for the behavior.
2. Click the plus button (+) on the Behaviors Panel.
3. Choose Studio VII - Auto Layers by PVII to open the interface.
4. To make an element visible, Click the Show Element button to make the
selected element visible.
5. To hide the element, Click the De-Select Element button to make this
element hidden.
6. Click OK to apply the behavior.

Modifying an existing Auto ShowHide by PVII behavior

1. Select the image, link or event that contains an existing Auto ShowHide by
PVII behavior.
2. Double-click the Auto ShowHide by PVII behavior in the Behavior Panel to
open the user interface.
3. Select an element and set the visibility using the "Show Element" or "De-
Select Element " buttons.
4. Click OK to apply the revised behavior.

The Interface:
The Auto ShowHide by PVII interface allows you to quickly select and set the visibility for any of the id
'd elements on your page.

Darby O’Toole FastPack™ by PVII 26 of 36

 Elements
This list will display all of the elements on your page that have an "id" attribute assigned. Each element
will be displayed with it's element tag name for easier identification and the listing is grouped by tag
name. Select one of the listed elements and then click the Show Element button. The element will now
have a "Show" next to it. This element will remain visible when this Auto ShowHide behavior is run, all
other elements previously made visible by the Auto ShowHide behavior will now be hidden. You can
set more than one element to "Show".

Note: The listing reflects all of the elements on the page which have an id assigned, but only the
elements that were previously run by Auto ShowHide (on other events) will become hidden - not all of
the elements on the page.

Show Element
Select one of the listed elements and then click the Show Element button. The element id will now
have a "Show" next to it. This element will remain visible when Auto ShowHide is run.

De-Select Element
This will allow you to remove an element that is set to "Show". Click the De-Select Element button and
the element will not be visible when Auto ShowHide is run, but only if it was previously made visible by
a Auto ShowHide behavior.

Set to Use
There are times when you may not want all of the elements to hide, you may want just one or two to
remain visible, or you may want two or more completely independent show/hide systems.
Auto ShowHide allows you to use any of ten separate "sets". For most purposes, leave this as Set
One, the default setting. To show a second group of elements without affecting the visibility of the first
group of elements apply Auto ShowHide to the second group with a Set Two setting. In this way we
can handle show/hides of either group without affecting the other group.

Note: You can use the same layer in more than one group to make for some interesting effects.

Darby O’Toole FastPack™ by PVII 27 of 36

 AutoHide by PVII
AutoHide by PVII is a behavior that allows you to select any element(s) on your page and set them so
that the element will become hidden whenever the user mouses off the element. This is especially
useful when creating UL or DIV based navigation systems or other DHTML effects. AutoHide by PVII
works by assigning a "special" event that will properly hide the specified element(s) only when the user
has actually moved his mouse past the past or outside of the element boundary.

Overview
AutoHide by PVII works by creating a list of elements on your page that you wish to have the "auto
hide" behavior. You manage the elements that are part of this list by Selecting or De-Selecting them
in the autoHide Behavior interface. The behavior is typically applied to the <body> onLoad event so
that it is run when the page first loads into the browser, and activating the special "auto hide" events
for each of the selected elements. You can use any elements you like, you can even use mixed
elements, the only prerequisite is that the element must have an id assigned. Here are some typical
examples:

• <div id="myDiv">
• <ul id="menu1">
• <li id="sub1">
• <p id="f1">
• <h2 id="an2">
• <table id="tb1">
• <td id="row14">
• <object id="myFlash">
• <select id="ddmenu1">

Note: The Auto Hide by PVII behavior will be "grayed" out and un-selectable if there are no elements
with an id on the page.

Creating an autoHide behavior

1. Select (click) the <body> tag on the lower left border of the Dreamweaver window.
2. Click the plus button (+) on the Behaviors Panel.
3. Choose Studio VII - autoHide by PVII to open the interface.
4. Select a page element that you wish to act on.
5. Click the AutoHide button to activate the autoHide feature for this element.
6. Repeat Steps 4 and 5 until you have selected all of the elements that you wish to have the
autoHide feature.
7. Click OK to apply the behavior.

Darby O’Toole FastPack™ by PVII 28 of 36

 Modifying an existing autoHide behavior
1. Select (click) the <body> tag on the lower left border of the DW window, or event that
contains an existing autoHide behavior.
2. Double-click the autoHide by PVII behavior in the Behavior Panel to open the user interface.
3. Set or de-select any of the page elements listed.
4. Click OK to apply the revised behavior.

Check the Tutorial Section at the Project Seven Web Site for the latest Auto ShowHide/Auto Hide
Tutorials.

The Interface:
The autoHide by PVII interface allows you to set the autoHide feature for any element on the page at
any time. You can also remove the autoHide feature from any element by clicking the De-Select
button.

Auto Hide
This list will display all of the elements on your page that have an "id" attribute assigned. Each element
will be displayed with it's element tag name for easier identification and the listing is grouped by tag
name. Select the page element that you wish to act on and click the AutoHide Element button. The
word "(Selected)" will appear to the right of the element name. This indicates that this layer will have
the "autoHide" feature applied to it. You can select and set as many elements as you like.

Darby O’Toole FastPack™ by PVII 29 of 36

 De-Select Layer
Select any element in the list that is already set as "(Selected)" and click the De-Select Element
button. The word "(Selected)" to the right of the element name will disappear, indicating that this
element will not have the autoHide feature applied to it.

OK
When you are finished selecting or de-selecting the elements click the OK button to apply the behavior
to your page. You can preview the page in your browser to check functionality.

Cancel
Click the Cancel button to completely abort the current AutoHide by PVII operation. This will close the
interface and no changes will be made to your page.

Help
Click the Help button to open the associated Help File in your browser. This page can remain open for
easy reference while you continue working with the AutoHide by PVII interface.
For late breaking news about our products, stop by PVII online often.

Darby O’Toole FastPack™ by PVII 30 of 36

 Write V4 StyleSheet by PVII
Write V4 StyleSheet by PVII dynamically loads a separate style sheet for version 4 browsers
(Netscape 4.x, IE 4.x) that is completely hidden from all modern browsers (version 5 and up). This
allows you to develop a specific style sheet for version 4 browsers independently from the more
advanced styles used for modern browsers. There is no need to worry about cascade issues or other
"shielding" hacks. Since the version 4 style sheet is completely hidden from modern browsers you can
easily develop a rich, full user style sheet using CSS that these older browsers support.

Overview
The Write V4 Styles by PVII command adds a script to your page that will link the style sheet you
specify if the browser is a version 4 browser. This style sheet is applied to the page before the page
loads so the styles are completely applied to all page elements before they become viewable. The
system even allows you to target only Netscape 4.x browsers for this behavior or, the default, all
version 4 browsers.

Note: Netscape 4.x browsers will disable CSS whenever JavaScript is disabled so there is no concern
about using JavaScript to load the style sheet. If the user has JavaScript disabled in Netscape 4.x the
browser will also disable all CSS, it cannot be set independently.

Darby O’Toole FastPack™ by PVII 31 of 36

 Deployment Strategy
The Write V4 StyleSheet command is best deployed when the main version 5+ style sheet is kept
hidden form older version 4 browsers. This technique provides total separation of the two styles
sheets; version 4.x browsers will not see the version 5+ style sheets and version 5+ browsers will not
see the version 4 style sheet.
You can easily hide the version 5+ style sheet from older browsers by using the @import technique to
attach the version 5+ style sheet:
<style type="text/css">
<!--
@import "externals/darbydemo.css";
-->
</style>
The @import directive is not understood by Netscape 4.x browsers and will be completely ignored,
thus hiding the style sheet form Netscape 4.x browsers.
The syntax of the @import statement can also be used to hide the style sheet from IE 4.x browsers:
@import "externals/darbydemo.css";

Note: The default @import syntax used by Dreamweaver (@import url(../test.css);) will hide CSS from
all version 4 browsers except for later versions of IE4 that shipped with Windows 98. If you use
Dreamweaver to Import your style sheet, you will need to edit the @import directive to this syntax. If
you subsequently move an HTML or CSS file using Dreamweaver's site or files panels, Dreamweaver
will overwrite your syntax.

Now that the main version 5+ style sheet is linked to the page using the @import directive you can
apply the Write V4 StyleSheet by PVII command to dynamically load the version 4 style sheet. The
result is that only one style sheet will be seen by any browser, either the version 4 or the version 5+
depending on the browser, providing complete independence and separation of the style sheets.

Adding the Write V4 StyleSheet by PVII command

1. Choose Commands - Studio VII - Write V4 StyleSheet by PVII to open the interface.
2. Enter the path to your version 4 style sheet, or click the Browse button to navigate to your
version 4 style sheet.
3. Optionally, click the Apply for Netscape 4.x browsers only box.
4. Click the Apply button to add the Write V4 StyleSheet by PVII scripts to your page. It runs
automatically when your page loads in a browser.

Darby O’Toole FastPack™ by PVII 32 of 36

 Modifying an existing Write V4 StyleSheet by PVII command

1. Choose Commands - Studio VII - Write V4 StyleSheet by PVII to open the interface. The
existing style sheet path and option will be shown in the interface.
2. Enter or Edit the path to your version 4 style sheet, or click the Browse button to navigate to
your version 4 style sheet.
3. Optionally, click the Apply for Netscape 4.x browsers only box.
4. Click the Apply button to apply the modified style sheet path and option to your page. It runs
automatically when your page loads in a browser.

Note: Modify is not supported when the scripts are located in an externally linked JavaScript file, you
must manually edit the scripts or add the scripts back to the page.

Removing the Write V4 StyleSheet by PVII command

1. Choose Commands - Studio VII - Write V4 StyleSheet by PVII to open the interface. The
existing style sheet path and option will be shown in the interface.
2. Click the Remove button to completely remove the Write V4 StyleSheet by PVII scripts from
your page.

Note: Remove is not supported when the scripts are located in an externally linked JavaScript file, you
must manually remove the scripts from the external file.

Darby O’Toole FastPack™ by PVII 33 of 36

 The Interface:
The Write V4 StyleSheet by PVII interface allows you to enter, or Browse to, the path of your version 4
style sheet.

Path to version 4 Style Sheet

Enter the path to the style sheet that you wish version 4 browsers to load. The box cannot be empty
and the path must contain a .css file extension.

Note: For maximum browser compatibility we suggest that you use a absolute url for this path in order
to allow Netscape 4 browsers to locate the style sheet if the style sheet is not in the same folder as the
current page.

Browse
Click the Browse button to navigate to the style sheet. A Select File dialog will open. Navigate to the
style sheet file you wish to use and click the OK button. The file path will then be displayed in the Path
to version 4 Style Sheet box. You can manually edit this path as you desire.

Apply for Netscape 4.x browsers only

Check this box if you wish to have the style sheet read by Netscape 4.x browsers only, all other
version 4 browsers (like Internet Explorer 4.x) will not load the style sheet. When this box is not
checked (the default) then all version 4 browsers will load the style sheet.

Apply
When you are finished entering or editing the path, and set the option, click the Apply button to apply
the Write V4 StyleSheet by PVII scripts to your page. You can preview the page in your browser to
check functionality.

Note: When using an absolute url for the path be sure that the style sheet has been uploaded to your
server and that your internet connection is available.

Darby O’Toole FastPack™ by PVII 34 of 36

 Remove
Click the Remove button to completely remove the Write V4 StyleSheet by PVII scripts from your
page.

Note: If the scripts are located in an external JavaScript file the Remove function will be unavailable,
you must manually remove the scripts from the external file.

Cancel
Click the Cancel button to completely abort the current Write V4 StyleSheet by PVII operation. This
will close the interface and no changes will be made to your page.

Help
Click the Help button to open the associated Help File in your browser. This page can remain open for
easy reference while you continue working with the Write V4 StyleSheet by PVII by PVII interface.

Darby O’Toole FastPack™ by PVII 35 of 36

 SUPPORT OPTIONS
THE PVII WEBDEV NEWSGROUP
Open 24 hours a day and seven days a week—all year long. Our newsgroup is a vital community
frequented by our customers, associates, and the PVII Team. It’s one of the most popular
Dreamweaver-related forums on the Internet and a great place to learn what you need to know - and
then some. Outlook Express users can click below to log on:
news://forums.projectseven.com/pviiwebdev
If you are using news reading software that does not respond to the above link, access its help system
to find out how to set up a new news account. The server you will need to use is
forums.projectseven.com.
After setting up the server, you should get a list of available newsgroups. Choose: pviiwebdev.
Additional help on logging on to newsgroups can be found here:
http://www.projectseven.com/support

THE PVII INFOBASE

This is our online database of technical notes, tips, tricks, and other goodies:
http://www.projectseven.com/support/support.asp

Darby O’Toole FastPack™ by PVII 36 of 36