<% Response.ContentType = "text/css" %> <% Dim headerHeight, subheader1Height, subheader2Height, footerHeight, subfooter1Height, ContentWidth, LeftWidth, LeftHeight, LeftColMarginWidth, FloatWrapLeftMargin, MainWidth, RightWidth headerHeight = 253 subheader1Height = 103 'Sub Header 1 height subheader2Height = 150 'Subheader1 + subheader2 must equal HeaderHeight footerHeight = 100 ' Footer Height subfooter1Height = 100 ContentWidth = 435 ' Width of main content column LeftWidth = 243 LeftHeight = 400 'Height of left col content LeftColMarginWidth = - 280 FloatWrapLeftMargin = 37 MainWidth = 800 'Remember to set in Template #fullheightcontainer file as well to stop jumping out on Load. RightWidth = 0 %> /* CSS Document */ /****************************************** 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.