2 replies [Last post]
tebk77
Offline
Regular
Last seen: 7 years 17 weeks ago
Timezone: GMT-4
Joined: 2009-05-16
Posts: 42
Points: 49

Hello,
something mysterious has happened to my web page!! It looked fine on the web for many months and now it's looking very strange. The left blue bar and grn bar next to it down't show. The pics are HUGE. The text is flush left with nothing behind it. (the left blue bar should show behind it). And the green bar is behind the pics. The header bar (has logo and button) seems to be okay.

I re-validated it and it says it's fine! What happened? I haven't changed the coding in months! I did delete some files from the server. But I thought these were the latest files...

Here is the URL address:
http://www.frankfordhistoricalsociety.org/fame1.html

Here is the coding (XHTML):

<!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>
	<title>Northeast Philadelphia Hall of Fame</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="description" content="4 Column CSS Demo - Equal Height Columns with Cross-Browser CSS" />
	<meta name="keywords" content="4 Column CSS Demo - Equal Height Columns with Cross-Browser CSS" />
	<meta name="robots" content="index, follow" />
    <!-- this was in original file:	
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	<style media="screen" type="text/css">
     -->
	<link href="HOF1styles.css" rel="stylesheet" type="text/css" />
</head>
 
 
<body>
 
 
<div id="wrapper">
 
<div id="branding">
	<a name="top"></a>
	<img src="art/NEHF-upleft.gif" alt="Northeast Philadelphia Hall of Fame" 
    style="height:100%; float:left;" />
    	<a href="fame2.html"><img src="art/suggest_button_SM.gif" alt="Click here to suggest someone"
    	style="height:93%; border:none; float:right; margin-top:3px; margin-right:7em;" 
        title="Click here to suggest someone" /></a>
</div>
 
<div id="bluebar">
&nbsp;
</div>
 
<div id="greenbar">
&nbsp;
</div>
 
 
<div id="container4">
	<div id="container3">
		<div id="container2">
 			<div id="container1">
 
 			<div id="col1">
				<!-- Column one start -->
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
						<p class="col1grn">Sponsored by</p>
                        <p>&nbsp;</p>
                        <p class="col1white">
                        	Historical Society of Frankford</p>
                        <p>&nbsp;</p>
						<p class="col1grn">
                        	in partnership with</p>
                        <p>&nbsp;</p>
                        <p class="col1white">
                            Holy Family University<br />
						  	<br />
                            The Northeast Times<br />
                        </p>
                        <p>&nbsp;</p>
                    	<p class="col1grn">
  							and</p>
                        <p>&nbsp;</p>
                        <p class="col1white">
                    		State Representative<br />
							Dennis M. O&#146;Brien</p>
               	<!-- Column one END -->
                </div>
 
 
                <div id="col2">  <!-- portraits are in this column -->
					<!-- Column two start -->
						<p class="right">Benjamin Rush&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
                        	<img src="portraits/BenRush_test.gif" width="95%" 
                        	alt="Benjamin Rush" />
                        </p>
							<br />
						<p class="left">&nbsp;&nbsp;Robert Purvis<br />
                    		<img src="portraits/RobertPurvis.gif" width="83%" alt="Robert Purvis" /> 
                        </p>
							<br />
						<p class="right">Katherine Drexel&nbsp;&nbsp;&nbsp;<br />
                    		<img src="portraits/KatherineDrexel.gif" width="90%" alt="Katherine Drexel" /> 
                   			</p>
							<br />
						<p class="left">&nbsp;Henry Disston<br />
                    		<img src="portraits/HenryDisston.gif" width="81%" alt="Henry Disston" /> 
                   			</p>
							<br />
						<p class="right">Stephen Decatur&nbsp;&nbsp;&nbsp;<br />
                    		<img src="portraits/StephenDecatur.gif" width="90%" alt="Stephen Decatur" /> 
                   			&nbsp;&nbsp;&nbsp;
                            </p>
							<br />
					<!-- Column two end -->
				</div>
 
				<div id="col3">
					<!-- Column three start -->					
 
                    <p>The goal of the Northeast Philadelphia Hall of Fame is to foster the develop&shy;ment of civic values and a sense of community in Northeast Phila&shy;delphia, along with a greater aware&shy;ness and appreciation of the area&#146;s rich history, by honoring the lives and accomplish&shy;ments of its most distinguished citizens.</p>  
					<p>&nbsp;</p>
					<p>To that end, the Northeast Philadelphia Hall of Fame will honor those North&shy;east Phila&shy;delphia resi&shy;dents past and present whose lives or careers have been marked by high achieve&shy;ment or those individuals who have had a last&shy;ing, significant, and positive impact on the North&shy;east Phila&shy;delphia community.</p>
				<p>&nbsp;</p> 
 
                    <img src="art/HoFlogo.gif" alt="Hall of Fame" width="90%" />
 
              		<p>Inaugural induction ceremonies will be held 
					Sunday, October 18, 2009 at 1:00 pm Holy Family&nbsp;University.
                    </p> 
 
 
					<!-- Column three end -->
				</div>
 
                <div id="col4">
					<!-- Column four start -->
					<p class="synopsis">Often called &#147;the Great Northeast,&#148; 
					Northeast Philadelphia is an area of approximately forty-four square 
                    miles bounded by the Delaware River to the east, Bucks County to the 
                    north, Montgomery County to the west, and the Tacony and Frankford Creeks 
					to the south. It is an area with a distinguished history that has 
                    been enriched by the contributions of countless individuals who have 
					lived and worked here over the&nbsp;years.<br />
					<br />
					The Northeast Philadelphia Hall of Fame, sponsored by the Historical Society 
                    of Frankford in partnership with Holy Family University, the Northeast Times, 
                    and State Representative Dennis M. O&#146;Brien, will honor those Northeast 
                    Philadelphia citizens whose contributions and achievements have been 
                    particularly noteworthy. 					</p>
 
     				<!-- Column four end -->
				</div>
			</div>
		</div>
	</div>
</div>
 
<div id="footer">
	<p><a href="fame2.html">How Do I Suggest Someone?</a>
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  		<a href="#top">Return to Top</a>  
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
    	<a href="index.html">Historical Society of Frankford</a>
    </p>
    	<br />
    	<br />
</div>
 
</div><!-- end of wrapper -->
 
</body>
</html>

Here is the .css style sheet:

/* HOFstyles3.css */
 
/* Universal style rule */
*{
/* Block all browser default margins and padding */
  margin: 0;
  padding: 0;
}
 
 
/* THIS FILE WORKS WITH COL.2 PIC's right side HANGING OVER COL.3 */
 
body {
	background:#ccf url(art/cyprbk_pattern.jpg); /* same bkgrd pattern as HSF */
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.833em; /*was 0.833em;=10 pt.  --- 1em=12 pt. */
	color:#000;
}
 
#wrapper{
	width:51em;
	/* background-color:#fff; */
	margin:20px auto; /* centered horizontally */
}
 
 
/***** major layout divisions ****/
#branding{
	height:4.75em;
	background-color:#339; /*matches column 1 bkgrd color --changed to match HSF blue */
}
 
 
/*this goes directly under branding bar and above column 1 */
#bluebar{
	/* height:0.625em;  --don't use height and width BOTH so that layout is elastic */
	width:13%;
	font-size:0.667em; /* 8 points */      
	background-color:#339; /* matches column 1 bkgrd color --changed to match HSF blue */
	clear:both;
	float:left;
}
 
/*this goes directly under branding bar and above columns 2,3,4  */
#greenbar{
	/* height:0.625em;  --don't use height and width BOTH so that layout is elastic */
	margin-left:13%;  /* margin width must match left column's (bluebar's) width */
	font-size:0.667em; /* 8 points */
	width:87%;   
	background-color:#696; /* matches col2 bkgrd color */
}
 
/** CLICK HERE text **/ /* goes under Suggest Someone button */
.click{
	float:right; 
	margin-right:7em;
	font-size:0.75em; /* 9 points */
	text-align:center;
}
 
/** TEXT in column 1 **/
.col1grn{
	font-family:'Times New Roman', Times, serif;
	font-size:0.833em; /* 10 points --was 9 points-Megan found it too small */
	line-height:1.25em; /* 15 points leading */
	color:#9c9; /* light green text */
	text-align:center;
}
/* sponsors' names */
.col1white{
	font-family:'Times New Roman', Times, serif;
	font-weight:bolder;
	font-size:0.833em; /* 10 points --was 9 points-Megan found it too small */
	line-height:1.25em; /* 15 points leading */
	color:#fff; /* white text */
	text-align:center;
}
/** END of column 1 text **/
 
 
 
/** CAPTION TEXT in column2 **/
 
.left{
	/* originally font-size:0.542em; -- 6.5 points */
	font-size:0.625em; /* 7.5 points */
	text-align:left;
	clear:both;
}
 
.right{
	/* originally font-size:0.542em; -- 6.5 points */
	font-size:0.625em; /* 7.5 points */
	text-align:right;
	clear:both;
}
/** end of column2 text **/
 
 
 
/** TEXT - main body copy in column 3 */
p.main{
	font-size:0.833em; /*was 0.833em;=10 pt.  --- 1em=12 pt. */
	color:#000;
}
/** end column3 text **/
 
 
 
/*** TEXT in column4 ***/
p.synopsis{
	font-family:'Times New Roman', Times, serif;
	font-size:0.917em; /* 11 pt. */
	line-height:1.25em;   /* 15 pt.? */
	text-align:center;
	padding-top:12px;
	padding-bottom:12px;	
}
/*** end of column4 text ***/
 
 
/*** FOOTER section ***/
#footer {
	clear:both;
	float:left;
	width:100%;
}
#footer p {
	margin-top:10px;
	margin-left:2%;
	padding-right:2%;
	font-size:0.667em;  /* 8 points */
	text-align:center;
}
/*** end of footer section ***/
 
 
 
 
/***** START OF 4 COLUMNS SETUP ******/
#container4 {
	/* MIGHT NOT NEED THIS -->clear:left;  */
	float:left;
	width:100%;
	background:#fff url(art/gradation-sm.gif) repeat-x top;
	display:block;
	overflow:hidden;
    position:relative;
}
 
#container3 {
	float:left;
	width:100%;
	background:#fff; /* white */
	position:relative;
	right:26%; /*was 29*/
}
#container2 {
	float:left;
	width:100%;
	background:#696; /* green */
	position:relative;
	right:48%;  /*was 45*/
}
#container1 {
	float:left;
	width:100%;
	background:#339; /* blue */
	position:relative;
	right:13%;
}
#col1 {
	float:left;
	width:11%; /* changed column gap from 4% total to 2% total */
	/*was 9%-if container is 13% then reduce width to allow for 2% gap on left&right side so 13-4=9% */
	position:relative;
	left:88%;  /*was 89*/
	overflow:hidden;
}
#col2 {
	float:left;
	width:13%; /* was 9% - changed column gap from 4% total to 2% total */  
	/* changed col width to allow for pics' right side to hang over white area */
	position:relative;
	left:90%; 
	/* originally 93% ---95% had pic in this column hanging over white area */
	overflow:hidden;
}
#col3 {
	float:left;
	width:44%;   
	position:relative;
	left:91%;  /* originally 95, before that it was 97% */
	padding-top:12px;
	padding-bottom:12px;	
	overflow:hidden;
}
#col4 {
	float:left;
	width:22%;  
	position:relative;
	left:95%; /* was 99, before that it was 101% */
	overflow:hidden;
}

Thank you very much! I can stand some help asap!

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 6 years 46 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Your html is referencing

Your html is referencing http://www.frankfordhistoricalsociety.org/HOF1styles.css which doesn't appear to exist.

tebk77
Offline
Regular
Last seen: 7 years 17 weeks ago
Timezone: GMT-4
Joined: 2009-05-16
Posts: 42
Points: 49

reply to downtap

:bigoops:

Many thanks!!!