You never described where you wanted the footer to go and did not answer most of my other questions about the page. For the most part, I’m still guessing, aren’t I. The example page is still broken in Firefox as of this writing. I haven’t helped.
It is disingenuous to thank me for something that you do not wish to consider.
Not all. although you didn’t pinpoint the problem you did direct my attention to the table as to whether it was needed and also the two columns. I could hardly expect you to correct my code. I mentioned the footer needing to be moved, but not as a problem. Over 60 per cent of the visitors to the website use a display that’s between 1280 and 2560px. So my decision to set the website size is appropriate. I will add a stylesheet for handhelds in due course. I will also move the boxes that are overlapping to within the main boxes, as you are right the design appears to be odd. At the time of writing I have still not altered the actual website so that is why you might think the site is broken.
Were those viewport dimensions determined before you set the size, or is that figure inflated from the visitors that are returning after you set the size?
Hi Mittineague I don’t know. I use Statcounter and do not have stats over a long period of time. From web searches the most common display size has increased from 1080. 1280 is common now. As mentioned earlier I have decided to relocate boxes that were designed to overlap as they were perceived as being wrongly placed. I have modified the index page and saved it as: http://pcwebsite.org.uk/index-new.php I am pleased with that redesign. Except for the footer, colour and position needs to be improved. Possibly the linen background image is too coarse as well.
I have completed altering the website: http://www.pcwebsite.org.uk The offset boxes have been re-located into the central boxes. I have restored the original Contact page to preserve the problem I was having: [URL=“http://www.pcwebsite.org.uk/contact-table.php”]http://www.pcwebsite.org.uk/contact-table.php
Unfortunately, I have not been able to restore the old pages and CSS, so it is not possible to see the original offset layout pages - except as screen captures shown above in TechnoBear’s post #4
Hi, uked.
I took another guess, based on the last glimpse of the index page and have put together some pages for you to look at. The footers don’t match those in this morning’s post, but they will have to stay wrong for this exercise. The code is still useful as a learning tool… good and bad.
There are 8 files altogether… 3 HTML pages plus 1 ‘generic’ page with no content and 4 CSS screen files. Why so many CSS files? Well, I created 1 general file for all pages and 1 specific file for each page. Therefore, each page calls 2 CSS files: the general file and the page-specific file. That seemed like an easy way to allow you to focus on what does what.
Features?
(1) Fluid design adapts to content and user’s font size and window size.
(2) Sticky Footers.
I will include a short file with some testing instructions. The CSS is modestly commented.
I would prefer to put them in a dropbox folder, either individually or together in a zip file; whatever works best for you. The bundle will include a cropped background image.
Let me know.
PS: You have Firefox, don’t you? Have you tried zooming text-only any of the latest pages?
Hi ronpat,
I have actually completed the alterations. The website is now fine. In my last post I mentioned the old page, the one that Firefox wouldn’t render properly, even though the other browsers did; I have left that file on my server so others who might come across the thread can look at the code that was causing the issue. I was unable to recreate the old other two pages though and can’t afford to spend any more time to recreate them. It just means that if someone wants to navigate from the old contact page (contact-table.php) they won’t land on the old Home and Portfolio page, which could be quite confusing! They’ll need to look at TechnoBear’s screen clips to confirm what the site looked like.
If you are interested, these are the two files that I have for the other pages. They were downloaded on the 30th.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parish council website design portfolio</title>
<style type="text/css" media="all">
@import url('pcwebcss.css');
.style1 {
background-color: #FFFF00;
}
.style2 {
background-color: #FFFFCC;
}
</style>
<style type="text/css" media="print">
/* It is common to set printer friendly styles such as a white background with black text. */
body {
color: #000;
background-image: none;
border-color: #000; /* Sets the border color properties for an element using shorthand notation */
background-color: #fff;
}
</style>
</head>
<body>
<div id="outerWrapper">
<div id="header"><em>Parish council websites: design and hosting</em>
<div id="pagemenu" style="position:relative; top:-85px; left: 0px;">
<ul id="navigation" style="position:absolute; top: 68px; left:730px; ">
<li> <a href="index.php">Home</a> </li>
<li> <a href="portfolio.php">Portfolio</a> </li>
<li> <a href="contact.php">Contact</a> </li>
</ul>
</div>
</div>
<div id="topNavigation">
</div>
<div id="contentWrapper">
<!-- <div id="leftColumn1"><h2> </h2>
<p> </p></div> -->
<div id="rightColumn1" style="color:black"><h1>Our Portfolio </h1>
<p>pcwebsite is a new website under the control of XYZWeb.co.uk It will take some time before we can display several examples
of our work designing parish council websites. </p> </ br>
<p>In addition to desiging websites we have a member of staff who is a parish councillor
this is a distinct advantage that few of our competitors are likely to have. </p> </div>
<div id="content" ><h1>Parish council website examples</h1>
<p>Parish councils are increasingly resorting to establishing their own websites. There are two aspects to the work required.
The first is the website design's structure must enable content to be added easily. The second is the content. We can provide
the website structure including an attractive design but the website must have content added to it. We can help to provide some of the content
but the bulk of the content will need to be provided by the client. The example below is linked to the actual website.
<span class="style2"><em>Click the image to view the website</em></span><span class="style1"><span class="style2"><br />
</span></span>
</p>
<a href="http://www.westwoodparish.co.uk/index.php">
<img style= "position:relative; left:20px; top:4px; border:0" alt= "Westwood Parish council website" width= "550px" height= "372px"
src= "westwoodparish2.png"/></a></div>
<br class="clearFloat" />
</div>
<div id="footer" > <a href= "http://www.xyzweb.co.uk/"><em>© 2014 XYZWeb.co.uk for society, culture and the arts </em></a></div>
</div>
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=6695815;
var sc_invisible=1;
var sc_security="0a8731c1";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script>
<noscript><div class="statcounter"><a title="web analytics"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/6695815/0/0a8731c1/1/"
alt="web analytics"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->
</body>
</html>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parish council website design | hosting | xyzweb Ltd</title>
<style type="text/css" media="all">
@import url('pcwebcss.css');
</style>
<style type="text/css" media="print">
/* It is common to set printer friendly styles such as a white background with black text. */
body {
color: #000;
background-image: none;
border-color: #000; /* Sets the border color properties for an element using shorthand notation */
background-color: #fff;
}
</style>
</head>
<body>
<div id="outerWrapper">
<div id="header"><em>Parish council websites: design and hosting</em>
<div id="pagemenu" style="position:relative; top:-85px; left: 0px;">
<ul id="navigation" style="position:absolute; top: 68px; left:730px; ">
<li> <a href="index.php">Home</a> </li>
<li> <a href="portfolio.php">Portfolio</a> </li>
<li> <a href="contact.php">Contact</a> </li>
</ul>
</div>
</div>
<div id="topNavigation">
</div>
<div id="contentWrapper">
<div id="leftColumn1"><h2> </h2>
<p> </p></div>
<div id="rightColumn1"><h2> </h2>
<p> </p> </div>
<div id="content"><h1>The parish council website</h1>
<p>Parish councils are increasingly resorting to establishing their own website
to keep parishioners informed. Each month agendas for the next meeting of the
council need to be published and shortly after meetings the last month's minutes are
published. To enable these regular publications to be made we provide a website
that includes a content Management System (CMS) that enables updates to be made
easily, just by logging in to the CMS and copying and pasting material from MS
Word or another word processor. <br />
<br />
Minutes and agendas and other material can be added by the parish clerk or
another person or we can add the material ourselves. Our websites also include a
search facilty and an RSS feed which enables parishioners to check whether
updates have been made. <br />
<br />
Our intial charges for setting up a PC website are very reasonable. We host the
website for you and make a moderate charge for that service. The hosting charge
includes maintenance. Our costs are lower than other companies that provide
websites for parish councils because website pages will not need to be updated
by our company by accessing the website off-line. which is always more time
consuming than using a CMS to add material.<br />
<br />
Unlike other companies that offer a CMS based publishing service using a
database like MySQUL we do not have to pay the usual annual fee which is
currently about £200 to pay for a database, so your parish council will be
saving at least £200 a year, every year </p>
</div>
<br class="clearFloat" />
</div>
<div id="footer" > <a href="http://www.xyzweb.co.uk/copyright.php"><em>© 2014 XYZWeb.co.uk for society, culture and the arts All rights reserved TOS</em></a></div>
</div>
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=6695815;
var sc_invisible=1;
var sc_security="0a8731c1";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script>
<noscript><div class="statcounter"><a title="web analytics"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/6695815/0/0a8731c1/1/"
alt="web analytics"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide --></body>
</html>
This CSS file, pcwebcss.css, was copied on the 22nd.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
body {
background-color: #666;
background-image:url('canvas0005.jpg');
line-height: 18px;
font-size: 14px;
color:#000;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
h1 {
line-height: 14px;
color: #000;
font-size: 16px;
font-weight: bold;
}
h2 {
line-height: 14px;
color: #000;
font-size: 12px;
font-weight: bold;
}
a, a:link {
color: #000;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #000;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
a:focus {
color: #000;
}
a:active {
color: #000;
}
#outerWrapper {
background-color: #fff;
background-image:url('pcwebsite960x710.jpg');
border-style:solid;
border-width: 5px;
border-color:white;
width: 960px;
/* height:580px;*/
height:712px;
text-align: left;
margin: 25px auto 5px auto;
}
#outerWrapper #header {
background-color: #ddd;
/*line-height: 25px;*/
font-size: 26px;
padding: 10px 10px 10px 10px;
font-weight: bold;
font-family:"Times New Roman", Times, serif ;
border-bottom: solid 1px #666;
}
#outerWrapper #topNavigation {}
#header #navigation {
list-style:none; display:inline;
font-size:14px;
font-style:italic;
margin:0px;
}
#navigation ul {
display:inline;
}
#navigation li {
float:left;
padding:0 10px 0 0;
}
#outerWrapper #contentWrapper #leftColumn1 {
float: left;
border-right: solid 0px #666;
width: 150px;
height:500px;
padding: 10px 10px 10px 10px;
}
#outerWrapper #contentWrapper #rightColumn1 {
float: right;
border-left: solid 0px #666;
width: 150px;
height:500px;
padding: 10px 10px 10px 10px;
}
#outerWrapper #contentWrapper #content {
padding: 10px 10px 10px 10px;
margin: 50px 170px 0 170px;
height:390px;
position:relative;
top:-15px;
left:-245px;
background-image:url('whitetrans60.png');
border-style:outset;
border-color:#ffffcc;
border-width:5px;
font-family:Verdana;
font-size:12px;
}
#outerWrapper #contentWrapper .clearFloat {
display: block;
clear: both;
}
#outerWrapper #footer {
border-top: solid 1px #666;
padding: 10px 10px 10px 10px;
font-size:18px;
font-family:"Adobe Caslon Pro";
text-align:center;
position:relative;
top:0px;
left:0px;
border-style:solid;
border-width:0px;
}
Thanks ronpat,
I have checked and do have the earlier html files but my CSS files have been altered so I can’t replicate the original problem.
Original, unaltered, pcwebcss.css file from July 22. (Same as posted above.)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
body {
background-color: #666;
background-image:url('canvas0005.jpg');
line-height: 18px;
font-size: 14px;
color:#000;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
h1 {
line-height: 14px;
color: #000;
font-size: 16px;
font-weight: bold;
}
h2 {
line-height: 14px;
color: #000;
font-size: 12px;
font-weight: bold;
}
a, a:link {
color: #000;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #000;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
a:focus {
color: #000;
}
a:active {
color: #000;
}
#outerWrapper {
background-color: #fff;
background-image:url('pcwebsite960x710.jpg');
border-style:solid;
border-width: 5px;
border-color:white;
width: 960px;
/* height:580px;*/
height:712px;
text-align: left;
margin: 25px auto 5px auto;
}
#outerWrapper #header {
background-color: #ddd;
/*line-height: 25px;*/
font-size: 26px;
padding: 10px 10px 10px 10px;
font-weight: bold;
font-family:"Times New Roman", Times, serif ;
border-bottom: solid 1px #666;
}
#outerWrapper #topNavigation {}
#header #navigation {
list-style:none; display:inline;
font-size:14px;
font-style:italic;
margin:0px;
}
#navigation ul {
display:inline;
}
#navigation li {
float:left;
padding:0 10px 0 0;
}
#outerWrapper #contentWrapper #leftColumn1 {
float: left;
border-right: solid 0px #666;
width: 150px;
height:500px;
padding: 10px 10px 10px 10px;
}
#outerWrapper #contentWrapper #rightColumn1 {
float: right;
border-left: solid 0px #666;
width: 150px;
height:500px;
padding: 10px 10px 10px 10px;
}
#outerWrapper #contentWrapper #content {
padding: 10px 10px 10px 10px;
margin: 50px 170px 0 170px;
height:390px;
position:relative;
top:-15px;
left:-245px;
background-image:url('whitetrans60.png');
border-style:outset;
border-color:#ffffcc;
border-width:5px;
font-family:Verdana;
font-size:12px;
}
#outerWrapper #contentWrapper .clearFloat {
display: block;
clear: both;
}
#outerWrapper #footer {
border-top: solid 1px #666;
padding: 10px 10px 10px 10px;
font-size:18px;
font-family:"Adobe Caslon Pro";
text-align:center;
position:relative;
top:0px;
left:0px;
border-style:solid;
border-width:0px;
}
This is the contact.php page that was also download on the 22nd. (Even though you already have it.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>parish council website design | contact XYZWeb Ltd</title>
<style type="text/css" media="all">
@import url('pcwebcss.css');
</style>
<style type="text/css" media="print">
/* It is common to set printer friendly styles such as a white background with black text. */
body {
color: #000;
background-image: none;
border-color: #000; /* Sets the border color properties for an element using shorthand notation */
background-color: #fff;
}
</style>
</head>
<body>
<div id="outerWrapper">
<div id="header"><em>Parish council websites: design and hosting</em>
<div id="pagemenu" style="position:relative; top:-85px; left: 0px;">
<ul id="navigation" style="position:absolute; top: 68px; left:730px; ">
<li> <a href="index.php">Home</a> </li>
<li> <a href="portfolio.php">Portfolio</a> </li>
<li> <a href="contact.php">Contact</a> </li>
</ul>
</div>
</div>
<div id="topNavigation">
</div>
<div id="contentWrapper">
<div id="leftColumn1">
</div>
<div id="rightColumn1"><h2> </h2>
<p> </p> </div>
<!-- <table id="table1" style="position:relative; top:-500px; left:-40px"> id not used -->
<table style="position:relative; top:-500px; left:-40px">
<tr>
<td>
<div id="content" style="height:500px; width: 630px"><h1><em>The parish council website</em></h1>
<form method="post" action="sendemailpcwebsite.php">
<input type="hidden" name="ip" value="98.221.152.173" >
<input type="hidden" name="httpref" value="http://www.sitepoint.com/forums/showthread.php?1218032-Firefox-not-rendering-my-website-other-browsers-OK&p=5684279" >
<input type="hidden" name="httpagent" value="Mozilla/5.0 (Windows NT 5.1; rv:30.0) Gecko/20100101 Firefox/30.0" >
Your Name: <br >
<input type="text" name="visitor" size="45" >
<br >
Your Email:<br >
<input type="text" name="visitormail" size="45" >
<br > <br >
<br >
Who do you want to contact? <br >
<select name="attn" size="1">
<option value="Geoff Edwards">Geoff Edwards</option>
<option value="Webmaster">Webmaster</option>
</select>
<br ><br >
Subject:
<input type="text" name="messagesubject" size="45">
<br > <br >
Mail Message:
<br >
<textarea name="notes" rows="10" cols="75"></textarea>
<br >
<input type="submit" value="Send Mail" >
<br >
</form>
</div>
</td>
</tr>
</table>
<br class="clearFloat" >
</div>
<div id="footer" style= "position:relative;top:-550px" > <a href= "http://www.xyzweb.co.uk/"><em>© 2014 XYZWeb.co.uk for society, culture and the arts </em></a></div>
</div>
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=6695815;
var sc_invisible=1;
var sc_security="0a8731c1";
</script>
<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script>
<noscript><div class="statcounter"><a title="web analytics"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="http://c.statcounter.com/6695815/0/0a8731c1/1/"
alt="web analytics"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide -->
</body>
</html>
Cheers
thanks ronpat 
The original website is now recovered for reference purposes: http://www.pcwebsite.org.uk/indexold.php