Solved

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

Posted on 2006-10-24
8
280 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

751 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