PDA

View Full Version : White Gaps


ikandesign
06-27-2008, 04:17 AM
I am trying to develop a web site that will have many different product pages that are essentially a reproduction of their respective page in the product catalog. I have designed a sample page but am encountering a problem where, in some browsers, I have white gaps appearing between the images (specifically on the left hand side of the page). The page looks great in Safari but IE and Firefox add white gaps.

Any help is appreciated. I don't know CSS yet and am primarily a print and web "designer" NOT programmer so please be gentle.

Many thanks in advance.

Please see the webpage I am speaking about below:

http://www.arcadiaproducts.com/Test/series500.html

davidj
06-27-2008, 06:47 AM
your not a web designer without a thorough knowledge of CSS

CSS is not a programming language

Rob_Che
06-27-2008, 12:22 PM
As DJ says... CSS IS web design...

You need to look at the CSS - margins and padding...

ikandesign
06-27-2008, 01:25 PM
Thank you gentlemen for your reply. What I meant was I do more of the look and feel of the site rather than actually the work behind the scenes to make the site function properly and am just getting into that part of it. CSS also does require some knowledge of programming which is my weak point.

By the way, I was trained as a print designer so I am doing my best to muddle through and will research this in more detail when time allows - I just had a deadline to meet and was hoping someone could point me in the right direction. Thanks again.

Corrosive
06-27-2008, 01:50 PM
CSS also does require some knowledge of programming which is my weak point.

No it doesn't but, hey, we could argue this for hours and I take it you need help rather than conflict :wink: .

By the way, I was trained as a print designer so I am doing my best to muddle through and will research this in more detail when time allows - I just had a deadline to meet and was hoping someone could point me in the right direction.

It is usually quite difficult to make this step from print to web as when you produce a design it is on the page as it looks on the screen. Web design has a lot more 'quirks' to deal with. As Rob Che said in an earlier post, look at your margins and have a play with them to see if you can overcome your problem. It is more than likely something to do with this. You can always post your code/css here and someone can take a look for you. This makes it a lot easier to diagnose the problem.

ikandesign
06-27-2008, 02:42 PM
Thank you Corrosive for your reply.

Obviously, yes I don't want conflict and could really use the help/ Thank you for understanding.

This is the code I have at the moment. As a quick fix, I forced image at the bottom of the left column to be a set height which pushed everything up and filled in the gaps (at least it appears to have done so on my Mac - I am waiting for someone to look at it in Windows). Obviously, i would rather correct the problem rather than "cheat" my way through making the page display properly. I appreciate any help you or anyone else can offer.

I am cutting and pasting the code below. Please let me know if I should have posted it differently (I am new to the forum).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<head>
<title>Series 500: Sliding Window (HC/AW)</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style2 {font-size: 14px}
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 12px;
}
.style8 {font-size: 12px}
.style9 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
}
body {
background-image: url(images/logo_bevel.jpg);
background-repeat: repeat;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/series500over_04.jpg','images/series500over_07.gif','images/series500over_08.gif','images/series500over_09.gif','images/series500over_19.gif','images/series500over_11.gif','images/series500over_12.gif','images/series500over_13.gif','images/series500over_14.gif','images/series500over_15.gif','images/series500over_16.gif','images/series500over_17.gif','images/series500over_18.gif','images/series500over_10.gif')">
<!-- ImageReady Slices (arcadia.psd) -->
<table border="1" width="982" align="center" cellpadding="0" cellspacing="0" bordercolor="#1B0479">
<tr> <td>
<table width="980" height="700" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td>
<img src="images/series500_01.gif" width="215" height="129" alt="Arcadis Logo"></td>
<td colspan="2">
<img src="images/series500_02.gif" width="285" height="129" alt="Series 500"></td>
<td>
<img src="images/series500_03.gif" width="480" height="129" alt="Sliding Window (HC/AW)"></td>
</tr>
<tr>
<td colspan="2">
<a href="http://www.arcadiaproducts.com/Test/about.html"><img src="images/series500_04.gif" alt="About Arcadia" width="252" height="26" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','images/series500over_04.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td>
<td colspan="2" rowspan="17" valign="default" background="images/series500_05.gif"><table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="33%" valign="top" scope="col"><div align="justify" class="style1"><br>
<span class="style8"><em><strong>DESCRIPTION</strong></em></span><br>
<br>
<em>The Series 500 sliding window is a monumental HC or AW thermally improved product providing the very best in aesthetics and energy savings.</em> <br>
<em><strong><br>
<span class="style8">FEATURES</span></strong></em>
<ul>
<li>Fixed, two, three and four panel units (handed).</li>
<li>Transoms and sidelites available.</li>
<li>4&rdquo; Frame depth.</li>
<li>Windows are available with an interior sliding panel.</li>
<li>Standard and custom sizes &amp; configurations.</li>
<li>Single glazing with 3/16&rdquo; or 1/4&rdquo; monolithic glass and for double glazing with 1&rdquo; insulated glass.</li>
<li>The frames and panels are 100% thermally improved to ensure consistent energy savings.</li>
<li>Isolators and plastic inserts are constructed of high impact-resistant ABS plastics for the best thermal performance and strength-by far surpassing any PVC on the market.</li>
<li>Frame and panel components are assembled with stainless steel 18-8 or 410 fasteners.</li>
<li>Standard tubular stiles and heavy duty tubular interlockers as well as hi-load interlockers (optional).</li>
<li>Standard sill height 2&rdquo;. High performance sill available in 21/2&rdquo;.</li>
<li>Full stainless steel track cap and steel tandem rollers (stainless steel tandem rollers optional).</li>
<li>Frame and panel perimeters are fully weather-stripped with fin-seal and Q-Lon.</li>
<li>Hardware features an aluminum color matched extruded custom finger pull handle with a sash lock available in black, grey or white powder coat.</li>
<li>Screens are available as fixed exterior spring loaded to be located on the exterior frame of the window.</li>
<li>Options include true divided horizontal muntins, head &amp; jamb compensation receptor channels, sub-sills, flush flange perimeter framing for retrofit applications, white bronze sash hardware and mulling member to connect Series 500 window to Series 5000 door.</li></ul></div>
<div align="justify"><span class="style2"><span class="style3"><br>
SHORT FORM SPECIFICATION</span></span><span class="style1"><br>
<br>
Aluminum sliding windows shall be ARCADIA Series 500 with a 4&rdquo; depth frame.</span></div></td>
<td width="33%" valign="top" scope="col"><div align="justify">
<p><span class="style1"><span class="style2"><em><strong><br>
<span class="style8">PERFORMANCE</span></strong></em></span><br>
<br>
The ULT-500 window system has been tested in accordance to AAMA/NWWDA 101/I.S. 2-97 for the following performance levels: HC-40, HC-50, HC-60, HC-75, AW-40, AW-45 &amp; AW-55 with higher structural and water ratings possible. The ULT-500 fixed transom system has been tested to an HC/AW-75 performance level. Test reports are available upon request.<br>
<br>
<em><strong>MATERIALS</strong></em><br>
<br>
All windows shall be fabricated from aluminum extrusions of 6063-T5 alloy &amp; temper. The aluminum shall be free of defects which impair strength and appearance. Component parts and accessories shall be of aluminum alloy, stainless steel or non-metallic materials which will neither deteriorate nor promote corrosion. This thermal break barrier shall provide a continuous uninterrupted thermal separation around the entire perimeter of the frame and sash and shall not be bridged by any metal conductor at any point. The thermal barrier shall consist of a two-part, chemically curing, high strength urethane. The sill shall have a full length stainless steel track cap. All sash members shall have a minimum of 5/8&rdquo; glass penetration into the aluminum to provide extra protection against &ldquo; blow-out&rdquo; during high wind conditions.<br>
<br>
The operable sash shall be equipped with two steel tandem ball bearing rollers (all stainless steel tandem rollers &amp; housings optional).<br>
<br>
A sash lock with an extruded finger pull and a stainless steel lock strike installed in the glazing pocket of the inter-locker provides the standard locking mechanism for this window.<br>
<br>
All horizontal and vertical members shall have two contact points incorporating silicone treated woven pile with mylar center fins or Q-Lon weatherstripping. All weather seals shall be held in place with integral extruded slots and secured to prevent movement or loss while operating sash. <br>
<br>
All fixed and/or sliding sash members shall be constructed to allow for either factory or field glazing. Sash glazing shall be accomplished using a &ldquo;marine&rdquo; style reusable, wraparound black flexible polyvinyl chloride (PVC) or EPDM material without the need for separate glazing beads or putty style bedding compounds. The glazing channel shall be provided with the unit for either 1&rdquo; insulating glass or 3/16&rdquo; or 1/4&rdquo; single glass.</span></p>
</div></td>
<td width="33%" valign="top" scope="col"><br>
<p align="justify" class="style1">All assembly and installation screws shall be 18-8 stainless steel.<br>
<br>
Screens are optional. When finished, all sliding windows shall be furnished with a fixed exterior spring loaded screen that is mounted on the exterior of the frame. All screen mesh shall be 18x16 charcoal fiberglass and be secured to the sash by a vinyl spline. The frame shall be made of extruded hollow tubular aluminum.<br>
<span class="style8"><br>
<em><strong>CONSTRUCTION</strong></em></span><br>
<br>
The primary frame must be a minimum of 4&rdquo; deep. Each frame corner joint shall be secured with two stainless steel screws and must be back caulked under the frame jambs to insure a weather resistant seal. End Dams will be attached and caulked at each sill-to-jamb joinery to insure a secondary seal against air and water infilitration.The profile of the fixed jamb and the latching jamb shall include two weather-stripped pockets to receive the fixed and latching stiles. Fixed &amp; sliding panels shall have a nominal 11/2&rdquo; depth and shall have overlapped joints as well as the mortise type to provide strong interlocking, mechanically fastened hairline joints. Interlockers and latching stiles shall be heavy gauge tubular sections assuring precise alignment and to resist twisting under load conditions.<br>

<strong><br>
<span class="style8"><em>FINISH</em></span></strong><br>
<strong>Available finishes are as follows:</strong>
<ul>
<li class="style1">Clear Anodized Class I (215-R1)</li>
<span class="style1"><br>
</span>
<li class="style1">Dark Bronze Anodized Class 1 (215-R1)</li>
<span class="style1"><br>
</span>
<li class="style1">Standard finish is White baked on enamel Duracon paint PPG UC-42737</li>
<span class="style1"><br>
</span>
<li class="style1">Standard finish is Quaker Bronze baked on enamel Duracon paint PPG UC-88426<br>
<br>
</li>
</ul>
<table width="100%" border="1" cellpadding="4" cellspacing="4" bordercolor="#000000">
<tr>
<td scope="row"><div align="justify"><span class="style1">Custom colors in a baked-on enamel, Duranar (70% Kynar) or Valspar finish are also available and are subject to minimum square footage requirements.</span></div></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="50%" scope="row"><img src="500efs.gif" width="374" height="295"></th>
<td width="50%" valign="top"><div align="center"><img src="500hardware.gif" width="277" height="310"></div></td>
</tr>
<tr>
<td width="50%" scope="row"><div align="center"><span class="style1">SERIES 500 2-PANEL SLIDING WINDOW</span></div></td>
<td><div align="right" class="style9">
<div align="center">All specifications subject to change</div>
</div></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_06.gif" width="252" height="22" alt="Series 500 Sliding Window"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_07.gif" alt="Series 4000 Sliding Window" width="252" height="22" id="Image2" onMouseOver="MM_swapImage('Image2','','images/series500over_07.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_08.gif" alt="Series 5000 Sliding Door" width="252" height="22" id="Image3" onMouseOver="MM_swapImage('Image3','','images/series500over_08.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_09.gif" alt="Series 5500 Sliding Door" width="252" height="22" id="Image4" onMouseOver="MM_swapImage('Image4','','images/series500over_09.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_10.gif" alt="Series 5820 Sliding Door" width="252" height="22" id="Image5" onMouseOver="MM_swapImage('Image5','','images/series500over_10.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_11.gif" alt="Series 6000/6002/6500 Sliding Door" width="252" height="22" id="Image6" onMouseOver="MM_swapImage('Image6','','images/series500over_11.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_12.gif" alt="Series ARC 8250 Terrace/Garden Door" width="252" height="22" id="Image7" onMouseOver="MM_swapImage('Image7','','images/series500over_12.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_13.gif" alt="Register" width="252" height="22" id="Image8" onMouseOver="MM_swapImage('Image8','','images/series500over_13.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_14.gif" alt="Specs &amp; Details" width="252" height="22" id="Image9" onMouseOver="MM_swapImage('Image9','','images/series500over_14.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_15.gif" alt="Photo Gallery" width="252" height="22" id="Image10" onMouseOver="MM_swapImage('Image10','','images/series500over_15.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_16.gif" alt="Key Definitions" width="252" height="22" id="Image11" onMouseOver="MM_swapImage('Image11','','images/series500over_16.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_17.gif" alt="Links" width="252" height="22" id="Image12" onMouseOver="MM_swapImage('Image12','','images/series500over_17.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_18.gif" alt="Replacement Parts" width="252" height="22" id="Image13" onMouseOver="MM_swapImage('Image13','','images/series500over_18.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_19.gif" alt="Contact Us" width="252" height="22" id="Image14" onMouseOver="MM_swapImage('Image14','','images/series500over_19.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td colspan="2">
<img src="images/series500_20.gif" width="252" height="211" alt=""></td>
</tr>
<tr>
<td height="850" colspan="2" background="images/series500_21.gif">&nbsp;</td>
</tr>
<tr>
<td colspan="4">
<img src="images/series500_22.gif" width="980" height="17" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="215" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="37" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="248" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="480" height="1" alt=""></td>
</tr>
</table>
</td></tr></table>
<!-- End ImageReady Slices -->
</body>
</html>

domedia
06-27-2008, 03:28 PM
hi ikandesign,
if the page works cross browser for you, then you're all set. If you want us to look at the problem page, then post the code for hat page instead, or even better put somewhere on the web so we can see it with images and everything :)

Most traditional graphic designers have a really hard time making the transition to work in the web medium. There's been more than one book written on the topic of how to get print designers to understand the web :)

ikandesign
06-27-2008, 03:49 PM
domedia,

I have posted the malfunctioning page here if you want to see exactly what is happening. Thanks for your help and understanding!

http://www.arcadiaproducts.com/Test/series500a.html

domedia
06-27-2008, 04:03 PM
It's always going to work like that if you use tables in that way. All your cells will stretch vertically when the page content increases.
Only fix afaik would be to *not* have a cell for each nav item, let them all be in the same cell. Even then it's going to be tricky.

Look into web standards and use the appropriate techniques. HTML for content, CSS for layout and design, and JS for manipulating the page. The way you're going right now is a dead end (use tables meant for tabular data for design), sorry :-(

ikandesign
06-27-2008, 04:06 PM
Thanks for your help. Looks like I will have to study up and quick!

Have a great day!

Corrosive
06-28-2008, 07:45 AM
Thanks for your help. Looks like I will have to study up and quick!

Have a great day!

Hello

Dom has hit the nail on the head, I'm afraid you will always struggle when using tables for design. I used to use them when I started and agonized for hours over why my design wouldn't look how I wanted it. Look into two and three column layouts using pure CSS and Divs, do a few tutorials (there are some great ones here) and then go back and look at your site again. I know you have a deadline but I'm afraid it's quite a steep learning curve :( . Btw, to post code use the # symbol above the box where you are posting and it'll come out properly.

Let us know if/when you need any help.

Cary
06-28-2008, 08:08 AM
Try this code. Basically, it changes the left column into a single cell for the most part, and all the menu items are contained in their own table within that cell.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<head>
<title>Series 500: Sliding Window (HC/AW)</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.style2 {font-size: 14px}
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 12px;
}
.style8 {font-size: 12px}
.style9 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
}
body {
background-image: url(images/logo_bevel.jpg);
background-repeat: repeat;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/series500over_04.jpg','images/series500over_07.gif','images/series500over_08.gif','images/series500over_09.gif','images/series500over_19.gif','images/series500over_11.gif','images/series500over_12.gif','images/series500over_13.gif','images/series500over_14.gif','images/series500over_15.gif','images/series500over_16.gif','images/series500over_17.gif','images/series500over_18.gif','images/series500over_10.gif')">
<!-- ImageReady Slices (arcadia.psd) -->
<table border="1" width="982" align="center" cellpadding="0" cellspacing="0" bordercolor="#1B0479">
<tr>
<td>
<table width="980" height="700" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td> <img src="images/series500_01.gif" width="215" height="129" alt="Arcadis Logo"></td>
<td colspan="2"> <img src="images/series500_02.gif" width="285" height="129" alt="Series 500"></td>
<td> <img src="images/series500_03.gif" width="480" height="129" alt="Sliding Window (HC/AW)"></td>
</tr>
<tr>
<td colspan="2" valign="top" background="images/series500_21.gif">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td> <a href="http://www.arcadiaproducts.com/Test/about.html"><img src="images/series500_04.gif" alt="About Arcadia" width="252" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','images/series500over_04.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td>
</tr>
<tr>
<td> <img src="images/series500_06.gif" width="252" height="22" alt="Series 500 Sliding Window"></td>
</tr>
<tr>
<td> <img src="images/series500_07.gif" alt="Series 4000 Sliding Window" width="252" height="22" id="Image2" onMouseOver="MM_swapImage('Image2','','images/series500over_07.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td> <img src="images/series500_08.gif" alt="Series 5000 Sliding Door" width="252" height="22" id="Image3" onMouseOver="MM_swapImage('Image3','','images/series500over_08.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td> <img src="images/series500_09.gif" alt="Series 5500 Sliding Door" width="252" height="22" id="Image4" onMouseOver="MM_swapImage('Image4','','images/series500over_09.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td> <img src="images/series500_10.gif" alt="Series 5820 Sliding Door" width="252" height="22" id="Image5" onMouseOver="MM_swapImage('Image5','','images/series500over_10.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td> <img src="images/series500_11.gif" alt="Series 6000/6002/6500 Sliding Door" width="252" height="22" id="Image6" onMouseOver="MM_swapImage('Image6','','images/series500over_11.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td> <img src="images/series500_12.gif" alt="Series ARC 8250 Terrace/Garden Door" width="252" height="22" id="Image7" onMouseOver="MM_swapImage('Image7','','images/series500over_12.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td> <img src="images/series500_13.gif" alt="Register" width="252" height="22" id="Image8" onMouseOver="MM_swapImage('Image8','','images/series500over_13.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td> <img src="images/series500_14.gif" alt="Specs &amp; Details" width="252" height="22" id="Image9" onMouseOver="MM_swapImage('Image9','','images/series500over_14.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td> <img src="images/series500_15.gif" alt="Photo Gallery" width="252" height="22" id="Image10" onMouseOver="MM_swapImage('Image10','','images/series500over_15.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td> <img src="images/series500_16.gif" alt="Key Definitions" width="252" height="22" id="Image11" onMouseOver="MM_swapImage('Image11','','images/series500over_16.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td> <img src="images/series500_17.gif" alt="Links" width="252" height="22" id="Image12" onMouseOver="MM_swapImage('Image12','','images/series500over_17.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td> <img src="images/series500_18.gif" alt="Replacement Parts" width="252" height="22" id="Image13" onMouseOver="MM_swapImage('Image13','','images/series500over_18.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td colspan="2"> <img src="images/series500_19.gif" alt="Contact Us" width="252" height="22" id="Image14" onMouseOver="MM_swapImage('Image14','','images/series500over_19.gif',1)" onMouseOut="MM_swapImgRestore()"></td>
</tr>
<tr>
<td> <img src="images/series500_20.gif" width="252" height="211" alt=""></td>
</tr>
</table>
</td>
<td colspan="2" rowspan="1" valign="default" background="images/series500_05.gif">
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="33%" valign="top" scope="col">
<div align="justify" class="style1"><br>
<span class="style8"><em><strong>DESCRIPTION</strong></em></span><br>
<br>
<em>The Series 500 sliding window is a monumental HC or AW thermally improved product providing the very best in aesthetics and energy savings.</em> <br>
<em><strong><br>
<span class="style8">FEATURES</span></strong></em>
<ul>
<li>Fixed, two, three and four panel units (handed).</li>
<li>Transoms and sidelites available.</li>
<li>4&rdquo; Frame depth.</li>
<li>Windows are available with an interior sliding panel.</li>
<li>Standard and custom sizes &amp; configurations.</li>
<li>Single glazing with 3/16&rdquo; or 1/4&rdquo; monolithic glass and for double glazing with 1&rdquo; insulated glass.</li>
<li>The frames and panels are 100% thermally improved to ensure consistent energy savings.</li>
<li>Isolators and plastic inserts are constructed of high impact-resistant ABS plastics for the best thermal performance and strength-by far surpassing any PVC on the market.</li>
<li>Frame and panel components are assembled with stainless steel 18-8 or 410 fasteners.</li>
<li>Standard tubular stiles and heavy duty tubular interlockers as well as hi-load interlockers (optional).</li>
<li>Standard sill height 2&rdquo;. High performance sill available in 21/2&rdquo;.</li>
<li>Full stainless steel track cap and steel tandem rollers (stainless steel tandem rollers optional).</li>
<li>Frame and panel perimeters are fully weather-stripped with fin-seal and Q-Lon.</li>
<li>Hardware features an aluminum color matched extruded custom finger pull handle with a sash lock available in black, grey or white powder coat.</li>
<li>Screens are available as fixed exterior spring loaded to be located on the exterior frame of the window.</li>
<li>Options include true divided horizontal muntins, head &amp; jamb compensation receptor channels, sub-sills, flush flange perimeter framing for retrofit applications, white bronze sash hardware and mulling member to connect Series 500 window to Series 5000 door.</li>
</ul>
</div>
<div align="justify"><span class="style2"><span class="style3"><br>
SHORT FORM SPECIFICATION</span></span><span class="style1"><br>
<br>
Aluminum sliding windows shall be ARCADIA Series 500 with a 4&rdquo; depth frame.</span></div>
</td>
<td width="33%" valign="top" scope="col">
<div align="justify">
<p><span class="style1"><span class="style2"><em><strong><br>
<span class="style8">PERFORMANCE</span></strong></em></span><br>
<br>
The ULT-500 window system has been tested in accordance to AAMA/NWWDA 101/I.S. 2-97 for the following performance levels: HC-40, HC-50, HC-60, HC-75, AW-40, AW-45 &amp; AW-55 with higher structural and water ratings possible. The ULT-500 fixed transom system has been tested to an HC/AW-75 performance level. Test reports are available upon request.<br>
<br>
<em><strong>MATERIALS</strong></em><br>
<br>
All windows shall be fabricated from aluminum extrusions of 6063-T5 alloy &amp; temper. The aluminum shall be free of defects which impair strength and appearance. Component parts and accessories shall be of aluminum alloy, stainless steel or non-metallic materials which will neither deteriorate nor promote corrosion. This thermal break barrier shall provide a continuous uninterrupted thermal separation around the entire perimeter of the frame and sash and shall not be bridged by any metal conductor at any point. The thermal barrier shall consist of a two-part, chemically curing, high strength urethane. The sill shall have a full length stainless steel track cap. All sash members shall have a minimum of 5/8&rdquo; glass penetration into the aluminum to provide extra protection against &ldquo; blow-out&rdquo; during high wind conditions.<br>
<br>
The operable sash shall be equipped with two steel tandem ball bearing rollers (all stainless steel tandem rollers &amp; housings optional).<br>
<br>
A sash lock with an extruded finger pull and a stainless steel lock strike installed in the glazing pocket of the inter-locker provides the standard locking mechanism for this window.<br>
<br>
All horizontal and vertical members shall have two contact points incorporating silicone treated woven pile with mylar center fins or Q-Lon weatherstripping. All weather seals shall be held in place with integral extruded slots and secured to prevent movement or loss while operating sash. <br>
<br>
All fixed and/or sliding sash members shall be constructed to allow for either factory or field glazing. Sash glazing shall be accomplished using a &ldquo;marine&rdquo; style reusable, wraparound black flexible polyvinyl chloride (PVC) or EPDM material without the need for separate glazing beads or putty style bedding compounds. The glazing channel shall be provided with the unit for either 1&rdquo; insulating glass or 3/16&rdquo; or 1/4&rdquo; single glass.</span></p>
</div>
</td>
<td width="33%" valign="top" scope="col"><br>
<p align="justify" class="style1">All assembly and installation screws shall be 18-8 stainless steel.<br>
<br>
Screens are optional. When finished, all sliding windows shall be furnished with a fixed exterior spring loaded screen that is mounted on the exterior of the frame. All screen mesh shall be 18x16 charcoal fiberglass and be secured to the sash by a vinyl spline. The frame shall be made of extruded hollow tubular aluminum.<br>
<span class="style8"><br>
<em><strong>CONSTRUCTION</strong></em></span><br>
<br>
The primary frame must be a minimum of 4&rdquo; deep. Each frame corner joint shall be secured with two stainless steel screws and must be back caulked under the frame jambs to insure a weather resistant seal. End Dams will be attached and caulked at each sill-to-jamb joinery to insure a secondary seal against air and water infilitration.The profile of the fixed jamb and the latching jamb shall include two weather-stripped pockets to receive the fixed and latching stiles. Fixed &amp; sliding panels shall have a nominal 11/2&rdquo; depth and shall have overlapped joints as well as the mortise type to provide strong interlocking, mechanically fastened hairline joints. Interlockers and latching stiles shall be heavy gauge tubular sections assuring precise alignment and to resist twisting under load conditions.<br>
<strong><br>
<span class="style8"><em>FINISH</em></span></strong><br>
<strong>Available finishes are as follows:</strong>
<ul>
<li class="style1">Clear Anodized Class I (215-R1)</li>
<span class="style1"><br>
</span>
<li class="style1">Dark Bronze Anodized Class 1 (215-R1)</li>
<span class="style1"><br>
</span>
<li class="style1">Standard finish is White baked on enamel Duracon paint PPG UC-42737</li>
<span class="style1"><br>
</span>
<li class="style1">Standard finish is Quaker Bronze baked on enamel Duracon paint PPG UC-88426<br>
<br>
</li>
</ul>
<table width="100%" border="1" cellpadding="4" cellspacing="4" bordercolor="#000000">
<tr>
<td scope="row">
<div align="justify"><span class="style1">Custom colors in a baked-on enamel, Duranar (70% Kynar) or Valspar finish are also available and are subject to minimum square footage requirements.</span></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="50%" scope="row"><img src="500efs.gif" width="374" height="295"></th>
<td width="50%" valign="top">
<div align="center"><img src="500hardware.gif" width="277" height="310"></div>
</td>
</tr>
<tr>
<td width="50%" scope="row">
<div align="center"><span class="style1">SERIES 500 2-PANEL SLIDING WINDOW</span></div>
</td>
<td>
<div align="right" class="style9">
<div align="center">All specifications subject to change</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr> </tr>
<tr>
<td colspan="4"> <img src="images/series500_22.gif" width="980" height="17" alt=""></td>
</tr>
<tr>
<td> <img src="images/spacer.gif" width="215" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="37" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="248" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="480" height="1" alt=""></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>