?
Solved

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

Posted on 2006-10-24
8
Medium Priority
?
285 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:Mark Steggles
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 4

Assisted Solution

by:Oneiroid
Oneiroid earned 1000 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:
Mark Steggles earned 1000 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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 users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

719 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