We help IT Professionals succeed at work.

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

gjirvine3000
gjirvine3000 asked
on
Medium Priority
305 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!
Comment
Watch Question

Author

Commented:
ah yes - thanks I thought I'd put it there

cheers
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
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>

Author

Commented:
Hi Steggs

Sorry, no joy...

gjirvine3000
Commented:
Try changing:

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

to:

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

I am seeing this line just above your footer div.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Thanks oneiriod, but that hasn't cracked it.

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

Web Developer
CERTIFIED EXPERT
Top Expert 2006
Commented:
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>

Author

Commented:
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
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.