Solved

Large unexplained white space in CSS structured page (only in IE)

Posted on 2006-10-24
8
275 Views
Last Modified: 2012-06-27
Hi there

I have the following homepage, structured in CSS:

http://www.capitacommunications.co.uk/cbt/

The CSS is here:

http://www.capitacommunications.co.uk/cbt/css/main.css

In IE6, you will notice that there is a large gap between where the homepage content ends (so at the bottom of the Quick Access box) and where the footer begins. I cannot work out why this is there - it only happens on the homepage and I want to get rid of it. There are no "margin-bottom" values on the elements and no "margin-top" on the footer that are causing this.

In Firefox this is not there...

Can anyone help?

Thanks!
0
Comment
Question by:gjirvine3000
  • 4
  • 2
8 Comments
 

Author Comment

by:gjirvine3000
ID: 17796068
ah yes - thanks I thought I'd put it there

cheers
0
 
LVL 30

Expert Comment

by:Steggs
ID: 17796235
Without looking at the page, I would guess that this is a whitespace issue if it is only happening in ie.

Format your html like this and see if it fixes


</div
><div id="footer"</div>
0
 

Author Comment

by:gjirvine3000
ID: 17796368
Hi Steggs

Sorry, no joy...

gjirvine3000
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 4

Assisted Solution

by:Oneiroid
Oneiroid earned 250 total points
ID: 17796401
Try changing:

<br style="clear: both;"/>  

to:

<div style="clear: both;"/>  

I am seeing this line just above your footer div.
0
 

Author Comment

by:gjirvine3000
ID: 17796468
Thanks oneiriod, but that hasn't cracked it.

That change pushes the div above (homepage contact div) onto the next line...

0
 
LVL 30

Accepted Solution

by:
Steggs earned 250 total points
ID: 17796548
Ok, the problem is the 'contact us' div pushing the footer down.

You have an extra row at the bottom

  </tr>
 
  <tr>
     <td width="50"><img src="iconnewsletter.gif"></td>
        <td class="headingblue">Stay in the know<br>
              <a href="http://www.capitacommunications.co.uk/cbt/contact/newsletter.htm" class="homelinks">Sign-up to our
              newsletter</a></td>
  </tr>
  <tr>                                              <------------
      <td></td>                                   Remove this
    <td>&nbsp;</td>                          row
  </tr>                                             <------------
</tbody></table>
0
 

Author Comment

by:gjirvine3000
ID: 17796602
Hiya

Thanks all but I've actually found the following code underneath the ACCESSIBILITY AND ACCREDITATIONS div

---------
   
 <div class="clear">&nbsp;</div>

  <p><br />
    </p>

  </div>  
-------------

So I have removed the

  <p><br />
    </p>

and all is well!

cheers
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
align Linkedin sign to the right page 5 53
Placeholder text not disappearing in Contact Form 7 2 23
Bottom border change 5 17
Changing Color of Page Section 4 23
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

790 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question