have been working on this for weeks. I have this nav bar which i think is cool, it is made with flash, and works fine, I have used CSS to style my web page, When I insert this nav bar and when i expanded the page it hugs the left side and when i shrink the page it gets cut off from the right. I would like it to stay centered when the page is expanded growing with the page is ok and when the page is made smaller get smaller, if this is possible. I have tried all kinds of CSS rules, tables anything i can think off, and can't get it. I have lost many night sleep and now I'm stuck. If i can't get this to work I have to abandon it and move on. I have put it back to basic design so it's not cluttered with all the stuff i have tried. Thanks for any help and suggestion

I have posted it here as this maybe a flash problem and not CSS but have posted it in the CSS thread just incase. I hope this is OK

I have posted the site here for now. It looks fine when first loaded but when you expand the page it stays on the left side. also when you shrink the page it cuts off just the right side.

http://mytestsite999.tripod.com/

Nick

Here is

See file below; Let me know if you need any other files.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #bbb;
margin: 0px;
padding: 0px;
text-align: center;
}
#wrapper {
background: #FFF;
text-align: left;
margin: 0px auto;
width: 1000px;
}
#header {
margin: 0px;
padding: 0px;
height: 400px;
background: url(assets/blackBackFade-3.png);
}
#header img {
display: block;
margin: 2em auto 3em;
}
#FlashID {
display: block;
width: 850px;
margin: 0px auto;
}
#mainContent {
background: #cf9;
margin: 0px;
padding: 0px;
height: 500px;
}
#linksLeft {
background: #c9c;
margin: 0px;
padding: 0px;
height: 300px;
width: 333px;
float: left;
}
#linksRight {
margin: 0px;
padding: 0px;
height: 300px;
background: #CC6;
width: 333px;
float: right;
}
#linkscenter {
margin: 0px;
padding: 0px;
height: 300px;
background: #6CC;
}
#footer {
background: #999;
margin: 0px;
padding: 0px;
height: 50px;
clear: both;
}
.businessHours { font-size: .9em;
color: #BDB042;
text-align: center;
margin: 0px;
padding: 0px;
}
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
<div id="wrapper">
<div id="header"><img src="assets/Stereo Shop Logo 7.png" width="827" height="231" />
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" width="850" height="35" id="FlashID">
<param name="movie" value="index.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="8.0.35.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object data="index.swf" type="application/x-shockwave-flash" width="850" height="35">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

<br />
</div>
<div id="mainContent">Content for id "mainContent" Goes Here</div>
<div id="linksLeft">Content for id "linksLeft" Goes Here</div>
<div id="linksRight">Content for id "linksRight" Goes Here</div>
<div id="linkscenter">Content for id "linkscenter" Goes Here</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>