CSS Novice - Problem with wide-screen display

stclair · Oct 30, 2007

I manage this web site: www.skillsforchange.org using FrontPage 2003.

I purchased a FrontPage template from a web design company that is now defunct. My old monitor was set to 800x600. I was blissfully happy with it until I purchased a wide-screen LCD monitor. Much to my dismay my web pages now stretches painfully from edge to edge. Visitors to my website who use a wide-display monitor must recoil in horror.

I''ve seen web sites like the one I am about to describe, but haven't any idea how to make the change - if possible.

I'd like the site to be a fixed (static?) width of 800 px. regardless of resolution or monitor type. It should be centered hortizontally.

There is a file called master.css in the root of the web. the contents of which I have pasted below.

Any help would be much appreciated.

Bill in Toronto, Canada

BODY {
font-family : Verdana, Arial, sans-serif;
font-size :13px;
color: #333333;
margin-top: 10px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
background-color:#ffffff;
}
p, tr, td, li, ul, table{color: #333333;font-family : Verdana, Arial, sans-serif;font-size : 13px;}

A:LINK {color: #006699;text-decoration: underline;}
A:VISITED {color: #006699;text-decoration : none;}
A:HOVER {color: #ff9900;text-decoration : underline;}
A:ACTIVE {color: #006699;text-decoration : none;}

.header {background: #ffffff;}

h1 {font-size : 15px;letter-spacing: 2px;font-weight : bold;color : #006699;}

h2 {font-size : 13px;font-weight : bold;color : #ff9900; border-bottom: 1px solid #ff9900;}
h3{text-transform: lowercase;padding: 2px;font-size: 13px;font-weight: bold;color: #006699;
letter-spacing: 1px; padding: 2px; border-bottom: 1px solid #006699;}

h4, h5, h6 {font-size : 13px;font-weight : bold;color : #ff9900;}

.topnav {font-size: 11px; color: #006699;text-align: right;background: #ffffff; padding: 3px;}

.topnav2 {font-size: 11px; color: #006699;text-align: left;background: #ffffff; padding: 3px;}

.headerbar {text-align: left;padding: 3px; border-bottom: 1px solid #006699;}

.textarea {text-align: justify;background: #ffffff;line-height: 18px;padding: 20px;}

.leftside {text-align: center;}

.rightside {text-align: center;}

.infoheader {text-align: left;color: #ffffff;font-size: 11px;font-weight: bold;
letter-spacing: 1px;padding: 5px;background: #006699;border: 1px solid #011f35;}

.infoheader2 {text-align: left;color: #ffffff;font-size: 11px;font-weight: bold;
letter-spacing: 1px;padding: 5px;background: #ff9900;border: 1px solid #011f35;}

.info {text-align: left;font-size: 11px;line-height: 15px;padding: 5px;
color: #333333;background: #eeeeee;border-right: 1px solid #333333;border-bottom: 1px solid #333333;
border-left: 1px solid #333333;}

.catalog {padding:3px;line-height: 18px;font-size: 11px; font-family: arial, verdana, helvetica; }
.catalogheader {font-size:11px; letter-spacing: 2px; font-weight: bold;font-family:arial,verdana,helvetica;padding:3px}
.cattext {padding: 3px;font-size: 11px;line-height: 15px;}

.copyright {font-size: 11px;color: #006699;letter-spacing: 2px;padding: 5px;border-top: 1px solid #006699;}

metweek · Oct 31, 2007

I see in your CSS you are trying to set the width on a div with an id of wrapper. Which doesn't exist. You need to wrap all your page contents within a div. See below

Add opening div tag with an id of "wrapper" on line 167

Code:

<script name="J-BotScroller" type="text/JavaScript" language="JavaScript" src="Skills%20for%20Change_files/scroller.js">
// Copyright Webs Unlimited, Inc. 1999, 2000, 2001 http://www.websunlimited.com
</script></head><body>
<div id="wrapper">
<table style="border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%">
	<tbody><tr>

Add closing div tag at line 538

Code:

urchinTracker();
</script>
</div>
</body></html>

CSS Novice - Problem with wide-screen display

stclair

metweek

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Welcome to Tech Support Guy!

Latest posts

Members online