View Full Version : How to remove large gaps in page (Urgent help needed!)

02-09-2005, 04:00 PM
Can anyone tell me why, in Win/IE 6, I am getting these large gaps as at:




CSS at: http://www.jamesmawdsley.com/layout1.css

Need to sort urgently...Doh.



02-09-2005, 04:08 PM
try this for your body css

font-size: 76%;
background-image: url('../images/bluefade.gif');
background-repeat: repeat-x

02-09-2005, 04:17 PM
You really need to start by cleaning up your code. Until your html validates to your chosen DOCTYPE, you can't rely on the visual rendering being close across browsers or platforms.

It will save you a lot of frustration if you start with a valid template, and then get into the habit of re-validating frequently as you make changes.

The errors that need to be fixed are fairly simple. Just post if you need help, but start there.


02-09-2005, 04:46 PM
Here's a cleaned up version of your bio page to get you started. After validating the html, I'm not seeing the gaps in the content. I didn't edit the CSS so you may need to make some adjustments.

A couple of things to keep in mind:

Make sure you are properly nesting and closing your elements
Review your use of heading tags
Looks like the content may have been cut and pasted from an MS Word .doc. Make sure you replace special characters with their proper equivalent: http://webmonkey.wired.com/webmonkey/reference/special_characters/
Your javascripts should ideally be in an external file

<!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"><!-- InstanceBegin template="/templates/2col_template.dwt" codeOutsideHTMLIsLocked="false" -->

<!-- InstanceBeginEditable name="doctitle" -->
<title>James Mawdsley: Fighting for Hyndburn/Candidate's Biography</title>
<!-- InstanceEndEditable -->
<meta name="Author" content="James Mawdsley"/>
<meta name="Keywords" content="James Mawdsley, Conservative Party, Hyndburn, Lancashire"/>
<meta name="description" content="The website of James Mawdsley Hyndburn's Parliamentary Candidate for the Conservatives."/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/layout1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
border: 1px solid #CCCCCC;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: #FFFFFF;

#banner {
padding: 0px;
margin-bottom: 5px;
background-color: #FFFFFF;

#content {
padding: 3px 20px 20px 30px;
margin-left: 215px;
background-color: #FFFFFF;
border-left: dotted #999999 1px;
border-right: dotted #999999 1px;

#sidebar-a {
float: left;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-right: 5px;
padding: 5px;
background-image: url("images/bluefade350vert.gif");
background-repeat: repeat-x;

#footer {
clear: both;
padding: 5px;
margin-top: 5px;
background-color: #999999;


<script type="text/javascript">
// gets current date and converts it
function MakeArray(n) {
this.length = n
return this
monthNames = new MakeArray(12)
monthNames[1] = "January"
monthNames[2] = "February"
monthNames[3] = "March"
monthNames[4] = "April"
monthNames[5] = "May"
monthNames[6] = "June"
monthNames[7] = "July"
monthNames[8] = "August"
monthNames[9] = "September"
monthNames[10] = "October"
monthNames[11] = "November"
monthNames[12] = "December"

function customDateString(oneDate) {

var theMonth = monthNames[oneDate.getMonth() + 1]
var theYear = 2005
return oneDate.getDate() + " " + theMonth + " " + theYear

<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<a name="top" id="top"></a>

<div id="container">
<div id="banner">
<img src="images/jbanner3.gif" alt="James Mawdsley: Fighting for Hyndburn. Conservative." />

<div id="sidebar-a">
<img style="position:relative; top:0px; left:1px; width:185px; height:158px;" src="images/JMEMwall.jpg" class= "bordered" alt="James Mawdsley" />

<!-- InstanceBeginEditable name="nav" -->
<li><a href="index.html">Home</a></li>
<li><a href="haveyoursay.html">Have your say</a></li>
<li><a href="getinvolved.html">Get involved</a></li>
<li><a href="campaigns.html">Campaigns</a></li>
<li>Candidate's Biography</li>
<li><a href="news/news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<!-- InstanceEndEditable -->


<a href="http://www.hyndburnbc.gov.uk" target="_blank"><img style="width:180px; height:47px" src="images/hyndburnlogo.gif" class="icon2" alt="Hyndburn Borough Council logo" /></a>

<a href="http://www.conservatives.com/" target="_blank"><img style="width:115px; height:45px" src="images/link_conserv.gif" class="icon2" alt="The Conservative Party.com" /></a>

<a href="http://www.conservativefuture.com/" target="_blank"><img style="width:180px; height:42px" src="images/conservfuturelg.jpg" class="icon2" alt="Conservative Future logo" /></a>

<a href="http://www.newground.org.uk" target="_blank"><img style="width:180px; height:45px" src="images/newground.gif" class="icon2" alt="New Ground logo" /></a>

<a href="http://www.mtce.org" target="_blank"> <img style="width:39px; height:66px" src="images/mtcelogo.gif" class="icon" alt="Metta Trust for Children's Education" />Metta Trust for Children's Education</a>

<!-- InstanceBeginEditable name="content" -->
<div id="content">

<span class="livedate">
Today: <script type="text/JavaScript">document.write(customDateString(new Date()))</script>

<div id="article">
<h2>James Mawdsley: <span style="display:block;">Parliamentary Candidate for Hyndburn</span></h2>

<div class="floatright">
<img style="position:relative; right:0px; width:185px; height:158px" src="images/james1.jpg" alt="Photo of James Mawdsley" />
<br />

<p>James Mawdsley</p>

James Mawdsley lives in Rishton, Lancashire with his wife Elizabeth. They were married on 2nd January 2005.

James served as Secretariat to the British-North Korean Parliamentary Group up to October 2004. After visiting North Korea he organised and accompanied a UK Parliamentary delegation to raise human rights and security issues with the North Korean government.

James lectures at conferences in Europe, America, Australia, Asia and Africa and does consultancy work for human rights NGOs. He is a member of the board of reference for the Humanitarian Aid Relief Trust (HART) and in 2004 was a patron of Europe for Family for the World Youth Alliance.

James is author of <cite>The Heart Must Break</cite> (Random House, Sep 2001) released in the UK, Australia, New Zealand, Hong Kong and elsewhere. Reprinted in the USA as <cite>The Iron Road: a Stand for Truth and Democracy in Burma</cite> (Farrar, Straus and Giroux, Aug 2002).

<div class="floatright-sml">
<a href="http://www.amazon.co.uk/exec/obidos/ASIN/0099426943/ref%3Ded%5Fra%5Fof%5Fdp/026-6384211-5944400" target="_blank"><img style="position:relative; width:120px; height:188px" src="images/THMBCover.jpg" alt="Cover of The Heart Must Break - click to view at amazon.co.uk"/></a>

The book is an account of what he witnessed in Burma's border areas and prisons. He was detained in Burma three times for pro-democracy work, last being released in October 2000 after 14 months of solitary confinement. James is Chairman of the <a href="http://www.mtce.org" target="_blank">Metta Trust for Children's Education</a>, a charity which he founded in September 2001 to send grants to schooling projects on the Thai-Burma border.

James is an avid reader of history and philosophy. He goes running regularly and enjoys swimming, fell walking and when he has the chance, horse riding. He likes to play bridge, backgammon and, so long as no one is listening, the piano. James holds dual British and Australian citizenship.

James was brought up in Lancashire with his sister and two brothers. His twin is a major in the Royal Artillery, his father served as a helicopter pilot in the Army Air Corps and his mother served a nurse in the Queen Alexandra's Royal Army Nursing Corps.

<span class="copybold">James' Experience</span>
<br />
James was a Conservative Party candidate for the Northwest region in the June 2004 European elections. He is co-author with Ben Rogers (Conservative Parliamentary Spokesman for Durham) of <a href="http://www.newground.org.uk" target="_blank">New Ground</a>: <cite>Engaging people with the Conservative Party through a Bold, Principled and Imaginative Foreign Policy</cite>. Ben and James have spoken on the paper alongside Michael Ancram MP and John Bercow MP at fringe meetings at Party Conferences in 2003 and 2004.

James has been a member of the Party since 1999. He was awarded straight "A" grades in Theoretical Physics &amp; Maths at Bristol University, but left early without a degree in order to travel. While travelling, he funded himself through manual jobs, including: labourer on the Sydney Olympic site, factory supervisor, landscaping and others.

<a href="index.html">Home</a> | <a href="#top">Top</a>
<!-- InstanceEndEditable -->

<div id="footer" class="footer">
James Mawdsley &copy; 2005 | <a href="mailto:andrew@diminishingfish.com">Webmaster</a>
<br />
Promoted by Andrew Stocks/DiminishingFish.com on behalf of Hyndburn Conservative
<br />
Association of The Conservative Club, Rhyddings St, Oswaldtwistle, BB5 3HH.
<!-- InstanceEnd -->

02-09-2005, 05:15 PM
Thanks everyone.
Removing a <p> width setting did the trick re: the big gaps...but yep, I realise I have just gone head long into doing a CSS based site without really knowing what best practice was, but from your comments below, I'll get my act together...
...things seem to be looking ok now...but I still need a quick fix on my form. ... but I'll post a new thread for that.

Cheers again

Andrew. :thumbsup:

02-09-2005, 07:40 PM
Me again.... learning slowly it seems....

In the page below I can't get the image to be in the right place in Safari/Firefox - where they sit too far to the left instead of floated tight to the right.

It works fine in winIE/6 however. : /

As far as I can tell, I am using the same method I have done at:
...where all looks nice.

Confused....tired.... oh web design...what a game...