My website works correctly in IE9, Safari, Opera and Chrome but Firefox doesn’t render my Contacts page correctly. The contact form position is wrong and the navigation does not work for the Contacts page. The website design reverses the background image from canvas to a landscape and the boxes are supposed to overlap. The only issue is with Firefox which fails to render the Contacts page correctly. Both HTML and CSS validate. http://www.pcwebsite.org.uk/contact.php
uked, one should not use {position:absolute} and {position:relative} to layout the boxes on a web page.
The page that you claim works well in all browsers except Firefox, does not. FF just happens to be more obviously broken.
This demo is not finished. I am posting it to find out if this is the layout that you want.
The form needs to be redone to eliminate the break tags. Keep in mind that the use of ‘cols=“”’ to set the width of the textarea depends on the size and family of the font being used by the user. It is not an exact unit of measure.
Most containers do not need to have a height assigned. The height should be determined by the content.
If the height of the columns needs to be the same as the form or each other, then I would recommend using display:table and display:table-cell to create the 3 content boxes. They are easier to manage than floats.
I included 2 instances of {margin-top:50px}. One in #contentWrapper and one in Content. Use ONE, not both, at least until you figure them out. The magenta and blue outlines are to help you see how the boxes are structured and are expected to be deleted.
I added 2 “x” marks to comment out the JavaScript (end of first line, start of last line). Remove the "x"s to restore the JS.
We can continue later or someone else can pitch in if you have questions.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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('pcwebcss1.css');
</style>
<style type="text/css" media="print">
/* print styles here */
</style>
</head>
<body>
<div id="outerWrapper">
<div id="header">
<h1>Parish council websites: design and hosting</h1>
<ul id="navigation">
<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 id="contentWrapper">
<div id="leftColumn1"> </div>
<div id="rightColumn1">
<h2> </h2>
<p> </p>
</div>
<div id="content">
<h1>The parish council website</h1>
<!-- The form needs a bit of work. <br> tags should not be necessary -->
<form method="post" action="sendemailpcwebsite.php">
<div>
<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%26p=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="60"></textarea>
<br>
<input type="submit" value="Send Mail">
<br>
</div>
</form>
</div>
</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 -x->
<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>
<!-x- End of StatCounter Code for Default Guide -->
</body>
</html>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
border: 0;
outline: 0;
font-size: 100%;
padding: 0;
margin: 0;
}
body {
background-color:#666;
background-image:url('canvas0005.jpg');
font-size:14px;
line-height:18px;
color:#000;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
padding:0;
margin:0;
}
h1 {
color:#000;
font-weight:bold;
font-size:1em;
font-style:italic;
float:left;
padding-bottom:.1em;
}
h2 {
color:#000;
font-weight:bold;
font-size:12px;
}
a, a:link, a:visited {
color:#000;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#000;
text-decoration:underline;
}
a:focus,
a:active {
color:#000;
}
#outerWrapper {
width:960px;
height:712px;
/* height:580px;*/
background-color:#fff;
background-image:url('pcwebsite960x710.jpg');
border:5px solid white;
text-align: left;
margin:25px auto 5px;
}
#header {
background-color:#ddd;
/* line-height: 25px; */
font-size:26px;
padding:10px;
font-weight:bold;
font-family:"Times New Roman",Times,serif;
border-bottom:1px solid #666;
overflow:hidden;
}
#navigation {
float:right;
list-style:none;
font-size:14px;
font-style:italic;
padding:0;
margin:0;
}
#navigation li {
float:left;
padding:0 10px 0 0;
}
#contentWrapper {
outline:2px solid magenta; /* TEMP for DEMO only */
overflow:hidden;
margin-top:50px; /* with this, the top of the left and right columns are even with the top of the form (use only one, not both) */
}
#leftColumn1 {
float:left;
border-right:none;
width:150px;
padding:10px;
outline:2px solid blue; /* TEMP for DEMO only */
}
#rightColumn1 {
float:right;
border-left:none;
width:150px;
padding:10px;
outline:2px solid blue; /* TEMP for DEMO only */
}
#content {
background-image:url('whitetrans60.png');
border-style:outset;
border-color:#ffc;
border-width:5px;
font-family:Verdana;
font-size:12px;
padding:10px;
margin:0 170px;
/* margin-top:50px; /* with this, the top of the left and right columns touch the bottom of the header box (use only one, not both) */
}
#footer {
border-top:solid 1px #666;
font-size:18px;
font-family:"Adobe Caslon Pro";
text-align:center;
border-style:solid;
border-width:0px;
padding:10px;
}
Thanks ronpat.
I can’t understand your response though. My website renders exactly as intended on: IE, Chrome, Safari and Opera. Firefox does not render it properly. I have used the Contact form on several websites without any issues. My understanding of CSS is that Absolute positioning is useful. For example I own a Sitepoint book: The Ultimate CSS Reference by Tommy Olsson and Paul O’Brien. Absolute positioning page 178. I also learnt how to position elements here: http://http://www.barelyfitz.com/screencast/html-training/css/positioning/
I would really like to know why Firefox reacts different to the other browsers.
uked, You did not comment about the code that I posted. As I said, I am trying to determine exactly what the page is supposed to look like.
Would you please post a screen shot showing how the page is expected to look and a screen shot showing how you see it in Firefox?
I’ll go first: (Firefox on the left; Chrome on the right; Opera is like Chrome)
This is how my (guess) code renders in FF, Chrome, and Opera:
Your turn 
Thanks ronpat,
To recap, the site including Contact page looks like what you see in any browser other than Firefox. Firefox should render the contact form as it is rendered in other browsers. Firefox does render the two other pages correctly. I can’t get your code to render the page correctly. I have tried rewriting the contact page CSS to position the form correctly but that spoils the rendering by the other browsers. There is something that firefox objects to but the other browsers don’t.
What I need now if no one else has any suggestions is a test for whether the user is using firefox and then use a modified stylesheet.
Sorry to be dense. I realise it’s obvious to you what you mean, but some of us need it spelled out for us.
What I see is the “content” section offset to the left on the home page and centred in the portfolio page, which is a bit disconcerting. If these are both as you intend, then presumably you also want the contact form offset, as the rest of that page is similar to the home page. Is that correct? (I have to say my first thought was that the offset was a broken layout, and I think Ron was probably looking at it the same way.) For some reason, Chromium is throwing a vertical scroll bar on the contact page.
Chromium:
Firefox
The problem with using position:relative to offset that content is that the page only works on a fairly large monitor. Reduce the width to 1024 px or below, and your content disappears off the left-hand side of the screen, with no scroll bar to provide access. Same happens with the contact form on Chromium.
Thanks Technobear.
Yes you are spot on. That’s what I wanted. Offset boxes and a swapping of backgrounds for the Portfolio page. The design is disconcerting. And you are right on a smaller display the offset material is partly obscured. It needs a total revision but I would like to know why Firefox is not doing what the other browsers are doing correctly. i am planning to have an additional stylesheet for handhelds.
Update: I have found that Firefox has an issue with Position that is within table cells. Although I do not have Position explicitly set for a table element the contact Form is inside a table and occupies one row and one cell. I have disabled the table code and that results in Firefox rendering the form in the same position as the other browsers. Except that the Text Area box is underneath the form and in the case of Firefox is not a text area box. It appears to be a plain rectangle that can be increased in size. The test page is: http://www.pcwebsite.org.uk/contact-table.php
The new test page does not seem to be available.
Do the containers #leftColumn1 and #rightColumn1 serve any purpose on this page? If so, what, please?
Should the full page be 960px wide or should it be 960px plus the overhang, say 80px, which would make the width 1040px?
Or do you have ambitions of making this a fluid/responsive page?
[ot]
There was a typo in the link, now fixed. :)[/ot]
The test page link is working apparently there was a typo that TechnoBear fixed. Sorry about that.
No ronpat i should have removed them.
Update: the link to the article about position within table cells is: http://www.webmasterworld.com/forum83/6391.htm
Update: I have commented out the redundant left and right column divs in the test page. The page now works for IE, Chrome, Safari, Opera and Firefox. The footer needs to be repositioned.
How/where should the footer be repositioned? (A clear description or screen shot is needed.)
I have moved it now and it is fine for all browsers. But for some reason I can’t change the color. I’ll either need to change the color or move it to the canvas area of the screen.
Hi ronpat I have relocated the footer ok now. I had some trouble changing the colour but realised after a bit of searching that the footer text is all a link. I will still need to alter the actual contact page. But I’ll leaver the test page on the website so that others can find it. Thanks for you help
You still have the problem of your content disappearing off the left-hand side at smaller viewport widths. You could fix that by ditching your use of position: relative and doing something like this instead. It’s by no means ideal, as it requires two-way scrolling on small screens, but it does keep your content visible, which seems to me a pretty basic requirement.
<div id="outer-wrapper">
<div id="centre-page">
<div id="header">
<h1>Parish council websites: design and hosting</h1>
<ul id="navigation">
<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 id="footer"> <a href= "http://www.xyzweb.co.uk/"><em>© 2014 XYZWeb.co.uk for society, culture and the arts </em></a></div>
</div>
<div id="content">
<h2>The parish council website</h2>
<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.</p>
<p>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.</p>
<p>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.</p>
<p>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>
</div>
</body>
body {background-color:#666;
background-image:url('canvas0005.jpg');
font-size:14px;
line-height:18px;
color:#000;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
margin: 0;
padding: 0;
}
h1 {
color:#000;
font-weight:bold;
font-size:1em;
font-style:italic;
float:left;
padding-bottom:.1em;
}
h2 {
color:#000;
font-weight:bold;
font-size:16px;
}
a, a:link, a:visited {
color:#000;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#000;
text-decoration:underline;
}
a:focus,
a:active {
color:#000;
}
#header {
background-color:#ddd;
font-size:26px;
padding:10px;
font-weight:bold;
font-family:"Times New Roman",Times,serif;
border-bottom:1px solid #666;
overflow:hidden;
}
#navigation {
float:right;
list-style:none;
font-size:14px;
font-style:italic;
padding:0;
margin:0;
}
#navigation li {
float:left;
padding:0 10px 0 0;
}
#footer {
border-top:solid 1px #666;
font-size:18px;
font-family:"Adobe Caslon Pro";
text-align:center;
border-style:solid;
border-width:0px;
padding:10px;
margin-top: 580px;
}
#footer a {color: yellow;}
#outer-wrapper {width: 1080px;
background-image:url('canvas0005.jpg');
margin: 25px auto;
}
#centre-page {width: 960px;
height: 710px;
margin: auto;
background: url(pcwebsite960x710.jpg) no-repeat center center;
border: 4px solid white;
}
#content {background-color: rgba(256, 256, 256, 0.6);
font-family:Verdana;
font-size:12px;
text-align: left;
width: 48em;
padding: 1em;
margin-top: -520px;
border-color: #ffffcc;
border-style: outset;
border-width: 5px;
}
(I used @ronpat’s CSS as a starting point. Thanks, Ron. :))