Question : Bottom border of web page in middle of page

I purchased a web site from the web which I have modified to my needs but the bottom border of the site, which is about 40px high and extends to the limits of the screen left and right, appears around the middle of the web page.  I am using IE8 to test.

Obviously, since I purchased the web site, I am not very familiar with html.  I am using Expression Web version 1 running on Vista Business.

Attached is one web page's code and the Style.css sheet.  There is also a Layout.css but it has only one reference to the footer and that is its height of 42px so I didn't attach it.

This whole thing has been frustrating but I don't even know where to look for the solution to this.  I hope you can help.

merdeka
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:
425:
426:
427:
428:
429:
430:
431:
432:
433:
434:
435:
436:
437:
438:
439:
440:
441:
442:
443:
444:
445:
446:
447:
/* CSS Document */

* {
	margin: 0;
	font-size: 100%;
}

body{
	background: #f5f5f5 url(images/footer_bg.jpg) repeat-x bottom center;
	text-align: right;
}

img {
	vertical-align: top;
	position: relative;
}
a img { border:0;}

ul { list-style:none;}

.left { float:left;}
.right {float:right;}
.clear  { clear:both;}


textarea
	{
		font-family:Arial, Helvetica, sans-serif;
		font-size:13px;
		line-height:18px;
		color:#5e5c5a;
	}


input
	{
		font-family:Arial, Helvetica, sans-serif;
		font-size:13px;
		line-height:18px;
		color:#5e5c5a;
	}


html
	{
	font-family: 100%;
	font-size: 13px;
	line-height: 18px;
	color: #5e5c5a;
}

select { vertical-align:middle; font-weight:normal;}

input { vertical-align:middle; font-weight:normal;}

a {color:#cb2923; outline:none;}
a:hover{text-decoration:none;}
h4 {
	padding-top: 15px;
}
p span {font-weight:bold;}

h1 {
	font-size: 48px;
	color: #3b3b3b;
	line-height: 1.2em;
	letter-spacing: -2px;
	margin: 5 -2px 0 -2px;
	border-top: 3px solid #c9c9c9;
	padding: 34px 0 0;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
}
h2 {
	font-size: 26px;
	color: #3b3b3b;
	line-height: 1.2em;
	padding: 0 0 0 0;
	letter-spacing: -1px;
}
h3 {font-size:24px; color:#909090; line-height:1.2em; letter-spacing:-1px; margin-top:-3px;}
h4 {font-size:13px; color:#5e5c5a; padding:12px 0 3px;}
h4.extra {padding:12px 0 0; margin-bottom:-5px;}
h5 {font-size:12px; color:#3b3b3b; text-transform:uppercase; padding:10px 0;}
/* ============================= main layout ====================== */
.bg {background:url(images/header_bg.jpg) no-repeat center 273px;}

.imgindent {margin:15px 21px 0 0; float:left;}
.fright {text-align:right;}
/* ============================= header ====================== */
#header img {
	padding-left: 3px;
	margin-top: 0px;
}
#header a {text-decoration:none;}
.menu {
	padding: 15px 35px 0 0;
	width: 546;
}
.menu li {display:inline; font-size:19px; margin-right:12px;}
.menu li a {color:#909090;	letter-spacing:-1px; line-height:31px; display:inline-block;}
.menu li a span { display:inline-block;}
.menu li a span span {padding:0 19px 4px 19px;}
.menu li a:hover {color:#3b3b3b;}
.menu li a.active:hover {
	color:#d86600; 
	background:url(images/menu_bg_tail.gif) repeat-x top center;
	cursor:default;}
.menu li a.active {
	color:#d86600; 
	background:url(images/menu_bg_tail.gif) repeat-x top center;
	cursor:default;}
.menu li a.active span {
	padding: 0 19 4 19;
	background: url(images/menu_bg_right.gif) no-repeat right top;
	display: inline-block;
}
.menu li a.active span span {background:url(images/menu_bg_left.gif) no-repeat left top;}
/* ============================= content ====================== */
#content {
	border-top:1px dashed #a2a2a2; 
	padding:44px 0 39px;
}
#content ul {padding:21px 1px 8px 0;}
.footer_menu li { background:url(images/list_marker.gif) no-repeat left center; padding-left:11px; line-height:20px;}
#content li { background:url(images/list_marker.gif) no-repeat left center; padding-left:11px; line-height:20px;}
.footer_menu li a {color:#5e5c5a; text-decoration:none;}
#content li a {color:#5e5c5a; text-decoration:none;}
.footer_menu li a:hover {color:#d86600;}

#content li a:hover {color:#d86600;}

.cols h4 {padding-left:7px;}

.cols p {padding-left:7px;}
.cols img {padding:14px 0 6px; }
.cols p.extra {padding:6px 7px 13px;}
.bg_col3 {background:url(images/line_bg.jpg) repeat-y 0 0;}
.bg_col2 {background:url(images/line_bg.jpg) repeat-y 0 0;}
.bg_col1 {background:url(images/line_bg.jpg) repeat-y 0 0;}
.pad {padding:11px 0 0;}
#content ul.pad {padding:11px 0 0 7px;}
#content ul.free {padding-bottom:0;}
/*buttons*/
a.btn {
	background:url(images/btn_bg_tail.gif) repeat-x top center;
	display:inline-block;
	font-size:10px;
	font-weight:bold;
	line-height:31px; 
	color:#ee8600;
	text-decoration:none;
	text-transform:uppercase;
	cursor:pointer;
}
a.btn span{
	background:url(images/btn_bg_left.gif) no-repeat left top;
	display:inline-block;
}
a.btn span span{
	background:url(images/btn_bg_right.gif) no-repeat right top;
	padding:0 17px;
}

a.btn:hover {
	background:url(images/btn_bg_tail.gif) repeat-x bottom center;
	display:inline-block;
}
a.btn:hover span {
	background:url(images/btn_bg_left.gif) no-repeat left bottom;
	display:inline-block;
}
a.btn:hover span span{background:url(images/btn_bg_right.gif) no-repeat right bottom; color:#fff;}

.btn_color1 .btn {color:#ee8600;}
.btn_color2 .btn {color:#de6500;}
.btn_color3 .btn {color:#cb2923;}
.btn_color4 .btn {color:#a71914;}

.row2 {
	margin: 38 0 0 0;
	padding: 5 0 0 0;
	border-top: 1px solid #bdbdbd;
}
#page5 .row2 {
	margin: 10 0 0 0;
	padding: 0px 0 0;
}
#page3 .row2 {margin:27px 0 0; padding:30px 0 0;}
#page5 .row2 h2{margin:0 0 2px;}
#page3 .row2 h2{margin:0 0 2px;}
#page3 .row2 ul {padding-left:7px;}
#page3 .col3 h2 {padding-left:7px;}
#page5 .row2 ul {padding-left:7px;}
#page5 .col3 h2 {padding-left:7px;}
#page4 .row2 {margin:23px 0 0; padding:28px 0 0; border-top:1px solid #bdbdbd;}
#page4  .col1 .row2 {padding:4px 0 0; margin:17px 0 0;}
.block {padding:5px 0 0;}
.row2 .block {padding:15px 0 0;}
.first {margin-top:-14px;}

.footer_menu {margin:9px 0 34px; border-top:1px dashed #a2a2a2; padding:28px 0 0}
.footer_menu ul {padding:11px 0 0;}
.footer_menu .col-1 { font-style:italic; line-height:24px; background:url(images/comment_bg.gif) no-repeat 24px 0;}
.footer_menu .col-1 p {
	padding: 7px 0 2px 0;
}
.footer_menu .col-1 a {
	background:url(images/icon_comment.gif) no-repeat 39px 2px; 
	color:#cb2923; 
	padding-left:71px; 
	line-height:26px; 
	display:block;
}
img.extra {padding:10px 0 8px;}
.blocks {border-bottom:1px solid #bdbdbd; padding-bottom:26px; margin-bottom:13px;}
#page6 #content p {padding:12px 0 6px;}
/*phone*/
.phone span {display:inline-block; width:81px; font-weight:normal;}

/* ============================= footer ====================== */
#footer a {color:#f5f5f5; text-decoration:none;}
#footer p {font-size:12px; color:#f5f5f5; padding:0;}
#footer p a {text-decoration:underline;}
#footer a:hover {color:#d86600;}

-----------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Core Systems Ltd - Core Project Control</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="cost control, time management, procurement, receiving, warehousing, accounting, scheduling" />
<meta name="description" content="Project cost control, procurement, time management, receiviing, warehousing, accounting and scheduling" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/NewsGoth_BT_400.font.js" type="text/javascript"></script>
<style type="text/css">
.style1 {
	font-weight: bold;
}
.style2 {
	font-weight: normal;
}
.style3 {
	background-repeat: no-repeat;
	background-position: left center;
}
</style>
</head>

<body id="page3">
	<div class="bg">
		<div id="main">
			<!--header -->
			<div id="header">
				<div class="wrapper" style="height: 68px">
					<ul class="menu right">
						<li><a href="index.html"><span><span>about us</span></span></a></li>                              
						<li><a href="index-1.html" class="active"><span><span>solutions</span></span></a></li>
						<li><a href="index-2.html"><span><span>features</span></span></a></li>
						<li><a href="index-3.html"><span><span>support</span></span></a></li>
						<li><a href="index-4.html"><span><span>contacts</span></span></a></li>
					</ul>
					<a href="index.html">
					<img src="images/logo1.jpg" alt="" height="69"/></a>
				</div>
				<h1 style="width: 985px">Core Project Control&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;<img alt="Core Logo" src="images/CoreLogo.bmp" width="198" height="81" />&nbsp;&nbsp;&nbsp;&nbsp; </h1>
				<h3>Project management with the right information ...</h3>
					<div id="google_translate_element" style="width: 229px; float: none; clear: both; position: relative; left: 746px; top: 220px; height: 20px;" class="style3"></div>
			<script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en'
  }, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
			
</div>
			<!--header end-->
			<div id="content">
				<div class="bg_col1">
				<div class="bg_col2">
					<div class="wrapper">
						<div class="col1 btn_color1">
							<h2>Experience</h2>							
							<h4>Over 20 years of project controls experience 
							with some of the world&#39;s largest companies.</h4>
							<p>There is no substitute for experience.&nbsp;
							<strong>Core Project Control</strong> design is 
							based on international experience with companies</p>
							<p>
							<img src="images/page3_img3.jpg" alt="" class="extra"/></p>
							<h4 class="extra">Design based on experience</h4>
							<p class="extra">&nbsp;</p>
							<p>such as ConocoPhillips, H.A. Simons, AGRA, AMEC, Colt 
							Engineering, WorleyParsons, Hong Leong Bank, British 
							Petroleum, and others in the following countries:</p>
							<ul>
								<li><a href="#">Canada</a></li>
								<li><a href="#">United States of America</a></li>
								<li><a href="images/BrochureTimeSheet1.pdf">South Africa</a></li>
								<li><a href="#">Malaysia</a></li>
								<li><a href="#">Indonesia</a></li>
							</ul>
							<p>on oil and gas, pulp and paper, and 
							infrastructure projects ranging from a few million 
							to over a billion dollars.</p>
							<p>&nbsp;</p>
							<p>Projects ranging from Engineering to full 
							Engineer, Procure, Construct (EPC) projects in 
							varied project and cultural environments.</p>
							<p>&nbsp;</p>
							<p>his experience is reflected in <strong>Core 
							Project Control</strong> making it a solution worthy 
							of consideration for your company.&nbsp; </p>
						</div>
						<div class="col2 btn_color3">
							<h2>Core Project Control System</h2>
							<h4>A system for managing your business</h4>
							<h4 class="style2"><strong>Core Project Control
							</strong>is a complete system for managing your 
							business with original data entry screens for 
							orders, timesheets, budget, etc. unlike many systems 
							which require re-keying of data from other systems 
							and subsequent periodic reconciliation of the 
							systems.</h4>
							<div class="wrapper pad">
								<img src="images/page4_img1.jpg" alt="" class="imgindent" width="170" height="108"/>
								<h4>The system features you need</h4>
								<p>Budget, Change Control, Procurement, 
								Receiving, Warehousing, Accounting and 
								integrated Scheduling - all of the features you 
								need to run successful projects are included.</p>
								<div class="pad"><p>&nbsp;</p>
									<p><strong><em>Click an image 
									below to download pdf brochure.</em></strong></p>
									<p style="height: 194px; width: 441px">
									<a href="images/Brochure1a.pdf">
									<img alt="Core Brochure" src="images/CPCBrochure.jpg" width="161" height="197" style="top: 0px" /></a><a href="images/BrochureTimeSheet1.pdf"><img alt="" src="images/TimeSheetBrochure.jpg" width="161" height="198" style="left: 45px; top: 4px" /></a></p>
								</div>
							</div>		
							<div class="pad"><h4>Designed to go wherever you go 
								...</h4>				
							<p>Our varied project controls experience has 
							provided the foundation for a very flexible feature 
							rich product designed to perform on any engineering 
							or construction project and most other projects.&nbsp; 
							An example of flexibility is that it can be in any 
							language (including Chinese, Arabic, etc.) and can 
							produce reports for a given project in more than one 
							language (for internal use and client use).&nbsp; 
							Listed below are a few more examples:</p></div>
							<div class="wrapper pad">
									<ul class="col-1">
										<li>&nbsp;Level of Authority for 
										transactions</li>
										<li><a href="#">On-line transaction 
										approval</a></li>
										<li><a href="#">User definable codes and 
										additional fields</a></li>
										<li>Multiple coding structures allow 
										insights to i<span class="style3">dentify 
										problem areas</span></li>
									</ul>
									<ul class="col-2">
										<li><a href="#">Multi-project roll-up 
										reports</a></li>
										<li><a href="#">Restrict user access</a> 
										to features</li>
										<li><a href="#">Multi-level 
										Corporate/Project </a>Work 
										Breakdown Structures (WBS)</li>
									</ul>
								</div>
							<div class="wrapper pad">
								<img src="images/page3_img1.jpg" alt="" class="imgindent"/>
								<p><span class="style1">Secure Database</span><br/>	
								<strong>Core Project Control</strong> is built 
								on Microsoft SQL Server - a recognized industry 
								standard robust secure platform trusted by the 
								worlds largest companies. </p>
								<div class="pad"><p>&nbsp;</p></div>
							</div>			
						</div>
						<div class="col3 btn_color4  cols" style="height: 902px">								
								<h2>Internet</h2>
								<img src="images/page3_img4.jpg" alt=""/>
								<h4>Local access or site access through the 
								Internet.</h4>
								<p><strong>Core Project Control </strong>can be 
								installed on your servers or we can host the 
								system on our servers.&nbsp; In either case the 
								system can be accessed through the Internet via 
								Terminal Server so both office and field 
								personnel can be on-line.</p>
								<div class="pad">
								</div>
								<div class="row2">
									<h2>Integration</h2>
									<h4>All features in one package running on a 
									SQL Server database.</h4>
									<p>Full integration is an important success 
									factor because data is always up-to-date and 
									only entered once. This results in:</p>
									<ul class="free">
										<li><a href="#">Consistency between 
										reports</a></li>
										<li><a href="#">Reduced data entry</a></li>
										<li><a href="#">Lower overall cost</a></li>
										<li><a href="#">Reports at the click of 
										a button</a></li>
										<li style="height: 46px">Different perspectives from the same 
										data</li>
									</ul>
									<p>&nbsp;</p>
									<p>Each user entering data, such as a PR, PO, timesheet, etc., because of integration is actually entering data into the cost system.&nbsp; 
									This is a&nbsp; reduction in effort by all 
									parties. 
									</p>
									<p>&nbsp;</p>
									<p>For example PR data automatically appears 
									in PO&#39;s so purchasing doesn&#39;t re-enter data.&nbsp; 
									This is efficient and reduces errors. 
									</p>
								</div>
							</div>
					</div>
				</div>
				</div>
			</div>
			<!--footer -->
			<div id="footer">
				<p>Core Systems Ltd. &copy; 2010 &nbsp;|&nbsp;<a href="index-5.html">Privacy Policy</a></p>			
			</div>
			<!--footer end-->
		</div>
	</div>
   <script type="text/javascript"> Cufon.now(); </script>
</body>

</html>

Answer : Bottom border of web page in middle of page

it's because of the code

body{
      background: #f5f5f5 url(images/footer_bg.jpg) repeat-x bottom center;
      text-align: right;
}

in style.css file.


remove this part.. at the end of the page if u want black border then put a table or div there and set this background image there..
Random Solutions  
 
programming4us programming4us