6 replies [Last post]
akster
Offline
newbie
Last seen: 14 years 31 weeks ago
Joined: 2007-06-14
Posts: 4
Points: 0

I am trying to get a dynamic css menu to display correctly in a layout created with clevatreva's piefecta pagemaker but I am having trouble getting the sub-menu items in the Header to display over top of the main columns. I have tried modifying the z-index withouth any success. Hopefully I am missing something simple...any help would be appreciated. Here is example code which includes a pretty raw version created from the pagemake with a simple css menu added....

Your Page Title Here

activateMenu = function(nav) {

/* currentStyle restricts the Javascript to IE only */
if (document.all &&
document.getElementById(nav).currentStyle) {
var navroot = document.getElementById(nav);

/* Get all the list items within the menu */

var lis=navroot.getElementsByTagName("LI");
for (i=0; i

DL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DT {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DD {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu {
Z-INDEX: 900; LEFT: 0px; WIDTH: 100%; POSITION: relative; TOP: 2px
}
#menu DL {
FLOAT: left; WIDTH: 12em
}
#menu DT {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; FONT-WEIGHT: bold; BACKGROUND: #ccc; MARGIN: 1px; BORDER-LEFT: gray 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid; TEXT-ALIGN: center
}
#menu DD {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; DISPLAY: none; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid
}
#menu LI {
BACKGROUND: #fff; TEXT-ALIGN: center
}
#menu LI A {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #000; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
#menu DT A {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #000; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
#menu LI A:hover {
BACKGROUND: #eee
}
#menu DT A:hover {
BACKGROUND: #eee
}
#site {
BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 5px; Z-INDEX: 1; LEFT: 10px; PADDING-BOTTOM: 5px; BORDER-LEFT: gray 1px solid; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; TOP: 70px; BACKGROUND-COLOR: #ddd
}
.mentions {
LEFT: 10px; COLOR: #000; POSITION: absolute; TOP: 300px; BACKGROUND-COLOR: #ddd
}

@import url("css/noodle_real.css");

/******************************************
Copyright Notice: Parts of these notes are
(c) Owen Briggs @ www.thenoodleincident.com
(for the font css file) (c) Big John @
www.positioniseverything.net and (c) Paul
O'Brien @ www.pmob.co.uk, all of whom
contributed significantly to the design of
the css and html code.
All other content is (c) ClevaTreva Designs
******************************************/
/***XXXXXXXXXXXXXXX Primary layout rules XXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX

To change many of the widths/heights requires that other certain values must
also be changed at the same time. For this reason, beside these critical
attributes (or nearby if comment hacks do not allow) are comments with the
calculations as to how to adjust them.

These guidance comments start with /*** and end with ***/

/***
You can delete these if you want, but do not delete MAC Hack comments (see
below).

To change the width of the entire layout, adjust the columns that make up the
total, remembering the borders. Remember, even one small mistake will degrade
or even break the layout, so be very careful!

For spacing within the cols, it's best to apply margins on content elements
inserted into the cols, because padding directly on those col elements will
change their widths, breaking the layout.

Certain hiding hacks have been used extensively in this layout, so here is a
quick explanation of them.

The Safari escape tab hack:
***************************

(used on wrapper, and the 3 backgrounds for Moz
and Opera).

Puts an escape in front of a valid number in the style name to replace a
letter in that name, e.g. \65 is an e. A tab is then inserted (not a space).
The purpose of this hack is to hide some code from Safari. Unfortunately,
some other browsers (like IE) see it for what it should be (but NOT Safari),
and so we must undo the code for those browsers by other hacks.

The Tan hack:
*************

* html .anyelement {rules read only by IE/Win and IE/Mac}

The MAC hack:
*************

(first the active comment you are reading now must be
closed...) ***/

/* \*/

/* */

/***...Back in comment mode now. Anything between those two comment lines
will be hidden from IE/Mac. Don't use any comments within this hack or it will
close prematurely and IE/Mac will begin reading before it should.

The above two hacks are combined so as to feed rules only to IE/Win.

The Holly Hack:
***************

Proper use of backslash escape characters inside property names used in the
Holly hack can further segregate rules to be read by only IE6 from rules for
IE5.x/Win.

These hiding hacks, along with several other fixes, make possible this formerly
impossible layout. It is highly unlikely that new browsers will have any
problem with these valid hiding hacks, and we will have to wait for Microsoft
to release IE7.

If enabled in the PageMaker, the 100% height in the html and body styles makes
the design full height. It also breaks Moz because you should use min-height,
but that doesn't work! Note
how these 100% heights are hidden from IE Mac with
the MAC Hack, otherwise they break it.

XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX ***/
html,body{
margin:0; /*** Do NOT set anything other than a left margin for the page
as this will break the design ***/
padding:0;
border:0;
/* \*/
height:100%;
/* Last height declaration hidden from Mac IE 5.x */
}
body{
background:#EEEEEE;
min-width:782px; /*** This is needed for moz. Otherwise, the header and footer will
slide off the left side of the page if the screen width is narrower than the design.
Not seen by IE. Left Col + Right Col + Center Col + Both Inner Borders + Both Outer Borders ***/
text-align:center; /*** IE/Win (not IE/MAC) alignment of page ***/
}
.clear{
clear:both;
/*** these next attributes are designed to keep the div
height to 0 pixels high, critical for Safari and Netscape 7 ***/
height:1px;
overflow:hidden;
line-height:1%;
font-size:0px;
margin-bottom:-1px;
}
* html .clear{height:auto;margin-bottom:0} /*** stops IE browsers from displaying
the clear div/br in the page, as these are for Moz/Opera and
Safari only. If IE 5.x Win DID display these, the page is too high ***/
#fullheightcontainer{
margin-left:auto; /*** Mozilla/Opera/Mac IE 5.x alignment of page ***/
margin-right:auto; /*** Mozilla/Opera/Mac IE 5.x alignment of page ***/
text-align:left; /*** IE Win re-alignment of page if page is centered ***/
position:relative; /*** Needed for IE, othewise header and footer aren't contained
directly above and below the body ***/
width:782px; /*** Needed for Moz/Opera to keep page from sliding to left side of
page when it calculates auto margins above. Can't use min-width. Note that putting
width in #fullheightcontainer shows it to IE and causes problems, so IE needs a hack
to remove this width. Left Col + Right Col + Center Col + Both Inner Border + Both Outer Borders ***/
/* \*/
height:100%;
/* Last height declaration hidden from Mac IE 5.x */
/*** Needed for Moz to give full height design if page content is
too small to fill the page ***/
}
#wrapper{
min-height:100%; /*** moz uses this to make full height design. As this #wrapper
is inside the #fullheightcontainer which is 100% height, moz will not inherit heights
further into the design inside this container, which you should be able to do with
use of the min-height style. Instead, Mozilla ignores the height:100% or
min-height:100% from this point inwards to the center of the design - a nasty bug.
If you change this to height:100% moz won't expand the design if content grows.
Aaaghhh. I pulled my hair out over this for days. ***/
/* \*/
height:100%;
/* Last height declaration hidden from Mac IE 5.x */
/*** Fixes height for non moz browsers, to full height ***/
border-right:1px solid #000000; /*** Sets the external right side border. ***/
border-left:1px solid #000000; /*** Sets the external left side border. ***/
background:#FFCCCC; /*** Set background color for side columns for Safari & IE ***/
}
#wrapp\65 r{ /*** for Opera and Moz (and some others will see it, but NOT Safari) ***/
height:auto; /*** For moz to stop it fixing height to 100% ***/
}
/* \*/
* html #wrapper{
height:100%;
}
/* Last style with height declaration hidden from Mac IE 5.x */
/*** Fixes height for IE, back to full height,
from esc tab hack moz min-height solution ***/
#outer{
z-index:1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/
position:relative; /*** IE needs this or the contents won't show outside the parent container. ***/
margin-left:150px; /*** Critical left col dimension value = left col width ***/
width:478px; /*** Critical left and right col/divider dimension value (moves inversly) = center col width ***/
border-right:1px solid #000000; /*** Sets the internal right side border. ***/
border-left:1px solid #000000; /*** Sets the internal left side border. ***/
background:#ADD8E6; /*** Sets background of center col***/
/* \*/
height:100%;
/* Last height declaration hidden from Mac IE 5.x */
/*** Needed for full height inner borders in Win IE ***/
}
/*** The next style hack for widths are NOT needed if no internal side borders are needed ***/
* html #outer{ /*** IE5.x/win box model fix ***/
width:480px; /*** Critical left and right col/divider dimension value
(moves inversly) = Center Col Width + Both Inner Borders ***/
w\idth:478px; /*** Critical left and right col/divider dimension value (moves inversly) = Center Col Width ***/
}
#float-wrap{
width:478px; /*** Critical left and right col/divider dimension value (moves inversly) = Center Col Width ***/
margin-right:-1px; /*** Static fix, doesn't change ***/
float:left;
display:inline;
}
#left{
width:152px; /*** Critical left col/divider dimension value = Left Col Width + 1px + One Internal Border Width ***/
float:left;
display:inline;
position:relative; /*** IE needs this or the contents won't show
outside the parent container. ***/
margin-left:-151px; /*** Critical left col/divider dimension value = left col width + one internal border width ***/
}
*>html #left{width:151px;} /*** Fix only for IE/Mac = left col width + one internal border width ***/
#container-left{
width:150px; /*** Critical left col dimension value = left col width - 1px ***/
}
#right{
float:left;
display:inline;
width:152px; /*** Critical right col/divider dimension value = right col width + 2px ***/
margin-right:-150px; /*** Critical right col/divider dimension value = negative right col width ***/
margin-left:-1px; /*** Static fix ***/
position:relative; /*** IE needs this or the contents won't show
outside the parent container. ****/
}
/* \*/
* html #right{
width:152px;
margin-left:0px;
margin-right:-500px;
mar\gin-right:-152px;
}
/* Above style hidden from Mac IE */
/*** These commented-out rules below are there to explain the "Critical" info
for the rules above, because comments must not appear within the Mac-hack.
The "rules" below are not active, they are just for teaching purposes.

* html #right{
width:152px; Critical right col/divider dimension value = right col width + one internal border width + 1px ***
margin-left:0px; *** Critical right divider dimension value = a static 0px ***
margin-right:-500px; *** IE5.x/win fix, must be above a critical number, but very high values appear okay ***
mar\gin-right:-152px; *** Critical right col/divider dimension value = negative (right col width + one internal border width + 1px) ***
}
***/
#container-right{
/* \*/
width:150px;
/* Above hidden from IE-Mac */
/*** Critical right col dimension value = right col width ***/
margin-left:3px; /*** Critical right divider dimension value = one internal border width + 2px ***/
}
/* \*/
* html #container-right{
fl\oat:right;
di\splay:inline;
margin-left:2px;
mar\gin-left:0px;
}
/* Above style hidden from Mac IE */
/*** Above margin left set to = one internal border width + 1px ***/
/*** Static fixes ***/

/*** a Note on the Holly hack: if IE/Win shows bugs it's a good idea to apply the height:1%
hack to different elements and see if that fixes the problem. Sometimes it may be
necessary to use "position: relative;" on certain elements, but it's hard to tell in
advance which elements will need such fixes. ***/
/*** This is a STATIC fix for IE5/Win at the largest text size setting. ***/
/* \*/
* html #left{margin-right:-3px;}
/* Above style hidden from Mac IE */
/*** All the IE fixes that are inside seperate "Mac-hacks" may be grouped within
just one Mac-hack for convenience if desired. However, each fix must come
later than the rule it is fixing or the fix itself will be overridden. ***/
#center{
width:478px; /*** Set to = center col width ***/
float:right;
display:inline;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
/*** clearheader heights are made from header height + borders +
any sidebar box height, less any sidebar intrusion.
Similar calcs for footers. ***/
#clearheadercenter{
height:72px; /*** needed to make room for header in center column ***/
overflow:hidden;
}
#clearheaderleft{
height:72px; /*** needed to make room for header in left column ***/
overflow:hidden;
}
#clearheaderright{
height:72px; /*** needed to make room for header in right column ***/
overflow:hidden;
}
#clearfootercenter{
height:52px; /*** needed to make room for footer in center column ***/
overflow:hidden;
}
#clearfooterleft{
height:52px; /*** needed to make room for footer in left column ***/
overflow:hidden;
}
#clearfooterright{
height:52px; /*** needed to make room for footer in right column ***/
overflow:hidden;
}
#footer{
z-index:1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/
position:absolute;
clear: both;
width:782px; /*** Set to Left Col + Right Col + Center Col + Both Inner Borders +
Both External Borders ***/
height:52px; /*** = Bottom Margin + One Outer Border + body to footer divider depth +
subfooter1 height + any other subfooter heights ***/
overflow:hidden;
margin-top:-52px; /*** negative height ***/
}
#subfooter1{
background:#FFFFCC; /*** Background Color of Sub-footer #1 ***/
text-align:center;
margin:0 1px; /*** Margin to show left and right External Borders - all sub-headers and sub-footers ***/
height:50px; /*** sub-footer row height ***/
}
#header{
z-index:1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/
position:absolute;
top:0px;
width:782px; /*** Set to Left Col (not if left sidebar fully intrudes into header or left sidebar is off)
+ Right Col (not if right sidebar fully intrudes into header or right sidebar is off) + Center Col + Both Inner
Borders (not if any sidebar intrudes into header or footer, or Inner Borders are off) + Both External Borders
(not if external borders are off) ***/
height:72px; /*** = Top Margin + One Outer Border + header to body divider depth +
subheader1 height + any other subheader heights ***/
overflow:hidden;
}
.outer_horiz_border, .sb_outer_horiz_border{
background:#000000;
height:1px;
overflow:hidden;
font-size:0px
}
#subheader1{
background:#FFFFCC; /*** Background Color of Sub-header #1 ***/
text-align:center;
margin:0 1px; /*** Margin to show left and right External Borders - all sub-headers and sub-footers ***/
height:70px; /*** sub-header row height ***/
}
#gfx_bg_middle{
top:0px;
position:absolute;
height:100%;
overflow:hidden;
width:478px; /*** = Center Col Width ***/
margin-left:150px; /*** = Left Col Width ***/
background:#ADD8E6; /*** Set background color for center column for Mozilla & Opera ***/
border-right:1px solid #000000; /*** Sets the internal left side border.
Remove border styles if no Internal Borders. ***/
border-left:1px solid #000000;
border-left:1px solid #000000;
}
* html #gfx_bg_middle{
display:none; /*** Hides the moz fix from IE ***/
}

/*** The rule below prevents long urls from widening floated cols and breaking the layout
in IE. It is not W3C valid, but if placed within a "Conditional comment" it will be hidden
from all user agents other than IE/Win, and thus validate. This fix fails in IE5/Win.
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp ***/
#outer{word-wrap:break-word;}

This is the
Main Content

This is the Left Sidebar

 
 

  • second Level menu

    • third Level menu







  •  


     


    Thanks in advance,
    -Alan

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 3 years 11 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Hi Alan That pagemaker is

    Hi Alan

    That pagemaker is quite old, and the code somewhat outdated.

    Maybe we can have a conversation here to see what you wanted, and I can quickly show you how?

    For example, if you go to the how to forum on this site, you will see a 100% height article. At the end is a much better 3 column layout using the piefecta design.

    Why not grab that and take a look?

    akster
    Offline
    newbie
    Last seen: 14 years 31 weeks ago
    Joined: 2007-06-14
    Posts: 4
    Points: 0

    Wow...thank you Trevor

    Wow...thank you Trevor for the quick response and for pointing me in the right direction.

    The code in your post is almost exacly what I'm looking for...and source ordered to boot! The only difference is that I need a fixed width layout just like the default behavior of your old tool.

    btw, I took the code from your "100% Height in CSS" post and dropped a CSS menu in the header and sure enough it displays correctly over top of the main body.

    So, what would it take to do modify that layout to be fixed width? Also...in the meantime, I will read your other post in detail and will study up some more.

    Thanks again!
    -Alan

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 3 years 11 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    I'll post up the code

    I'll post up the code tomorrow. What width for left, center and right do you want?

    akster
    Offline
    newbie
    Last seen: 14 years 31 weeks ago
    Joined: 2007-06-14
    Posts: 4
    Points: 0

    Here is how I was configuring your old tool

    Trevor,

    Here is how I was configuring your old tool:

    Left column width: 150px
    Main colunn width: 478px
    Right column width: 150px

    with an External Border Width of 3px

    But, the main/real constraint I have is two header graphics with a total width of 773px.

    I'm pretty sure I can modify with additional headers and footers, but I'll include the following in case there is some specific hack you think I should be aware of.

    Top Margin 10px
    Sub-Header #1 84px
    Sub-Header #2 34px
    Sub-Header #3 49px

    Sub-Footer #1 50px

    Thanks again Trevor!
    -Alan

    ClevaTreva
    ClevaTreva's picture
    Offline
    Guru
    A hilly place, UK
    Last seen: 3 years 11 weeks ago
    A hilly place, UK
    Joined: 2004-02-05
    Posts: 2902
    Points: 0

    Hi Alan, try

    Hi Alan, try this:

    html:

    Your Page Title Here
    @import url(style-no-clears.css);

    @import url(ie7style.css);

    This is the
    Main Content

    This is the Left Sidebar

    css:

    html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{ margin:0; padding:0; border:0; border-collapse:separate; border-spacing:0; } html,body{height:100%} body{ font-family: verdana, arial, helvetica, sans-serif; font-size:100.1%; /*** Don't change this setting. Make all other font-sizes in % (preferred) or ems ***/ color:#000000; background:#F2F6F9; /*** Background colour of page ***/ min-width:784px; /*** Content Width ***/ text-align:center; } input,select{ margin:0; padding:0; } strong,b{ font-weight:bold; } p{ font-size:90%; line-height:1.1em; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */ #fullheightcontainer{ border:3px solid black; border-width:0 3px; margin:0 auto; text-align:left; position:relative; width:778px; /*** Content Width ***/ display:table; height:100%; margin-bottom:-53px; /*** NEGATIVE TOTAL Height of Footer Rows ***/ background:#FFCCCC url(ll.gif) left top repeat-y; /*** Background colour of left AND right columns. Also has the left hand side shady border image ***/ } * html #fullheightcontainer{ width:784px; /* for IE5 broken box */ _width:784px; /* for IE6 */ } #wrapper{ display:table-cell; position:relative; } * html #wrapper{ } #outer{ position:relative; margin-left:150px; /*** Left Column Width ***/ width:478px; /*** Center Column Width (takes into account left and right shady border widths) ***/ background:#ADD8E6; /*** Background colour of center column. ***/ height:100%; } #float-wrap{ width:478px; /*** Center Column Width (takes into account left and right shady border widths) ***/ float:left; display:inline; } #center{ width:478px; /*** Center Column Width (takes into account left and right shady border widths) ***/ float:right; height:100%; /*** Needed for Mozilla ***/ display:table; /*** Needed for Mozilla ***/ padding:180px 0px 53px 0px; /*** Footer and Header heights, must use paddings because of IE collapsing margins. Margins also cause problems for all browsers with column jumping ***/ } * html #center{height:auto} #left{ float:left; display:inline; width:150px; /*** Left Column Width ***/ margin-left:-150px; /*** NEGATIVE Left Column Width ***/ position:relative; padding:180px 0px 53px 0px; /*** Footer and Header heights, must use paddings because of IE collapsing margins. Margins also cause problems for all browsers with column jumping ***/ } #right{ float:left; display:inline; width:150px; /*** Right Column Width ***/ margin-right:-150px; /*** NEGATIVE Right Column Width ***/ position:relative; padding:180px 0px 53px 0px; /*** Footer and Header heights, must use paddings because of IE collapsing margins. Margins also cause problems for all browsers with column jumping ***/ } #footer{ z-index:1; position:relative; width:100%; height:0px; } #footer-inner{ width:784px; /*** Content Width ***/ margin:0 auto; height:0px; } #subfooter1{ border:0 solid black; border-bottom-width:3px; margin:0 3px; background:#FFFFCC; text-align:center; height:50px; overflow:hidden; } * html #subfooter1{ height:53px; /* for IE5 broken box */ _height:50px; /* for IE6 */ } #header{ z-index:1; position:absolute; top:0px; left:0px; width:100%; height:0px; } #header-inner{ width:784px; /*** Content Width ***/ margin:0 auto; height:0px; } #subheader1{ border:0 solid black; border-top-width:3px; margin:0 3px; background:#FFFFCC; text-align:center; height:84px; overflow:hidden; } * html #subheader1{ height:87px; /* for IE5 broken box */ _height:84px; /* for IE6 */ } #subheader2{ margin:0 3px; background:#FFE7AA; text-align:center; height:34px; overflow:hidden; } #subheader3{ margin:0 3px; background:#E1C98C; text-align:center; height:49px; overflow:hidden; /* if you have a drop down menu in the div, remove this line */ } #centerfill,#rightfill{display:none} #topmargin{ height:10px; overflow:hidden; background:#F2F6F9; } #container-left{} #container-right{} #container-center{}

    ie7 css:

    #fullheightcontainer{height:auto;min-height:100%} #centerfill{ display:block; position:absolute; top:0px; height:100%; width:478px; background:#ADD8E6; margin-left:150px; }

    akster
    Offline
    newbie
    Last seen: 14 years 31 weeks ago
    Joined: 2007-06-14
    Posts: 4
    Points: 0

    thanks again ClevaTreva!

    Thanks again ClevaTreva! Worked like a champ. I was able to modify slightly with relative ease and this was exacltly what I was looking for. Also, from reading your Full Height post, I was able to learn quite a bit along the way.

    -Alan