Solved

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

Posted on 2006-10-24
8
266 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery Canlendar click function 5 41
Wordpress CSS Link Issue 2 33
Adjust the position 3 47
highcharts wont fix inside a bootstrap modal window 6 27
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

911 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now