Anonymous 0

Was coding all this and tested in Firefox 3.5/IE 8

However, running on IE 7, the body content just overlap the footer.

  • Please could you provide a URL or an HTML/CSS code sample? Paul Farnell over 7 years ago

1 answer

danwellman 5600

It could be, there are two fixes if it is, one of which may or may not work...

You can clear floats by adding clear:both to the last-child of an element that contains floated content, so simply adding a div after any floated elements with clear:both specified on it will usually resolve height/overlap problems where floats are concerned.

Also, try the :after CSS psuedo-element clear fix, add the class name float-clear to the div whose contents are floated and in your stylesheet use the following rules:

.float-clear:after { content:"."; height:0; visible:hidden; clear:both; display:block; }

This sometimes works and is more sematic than using a clearing div :D

other things that can cause overlapping are absolute positioning and fixed heights...

Of course, it could be totally unfloat-related and just be down to a bug in IE7 ;)

You could use a conditional style to add a little margin/padding to the top of the footer to push it down into place, something like:

<!--[if IE 7]>
  <stlye type="text/css">
    #footer { margin-top:10px; }

This could provide a quick and easy fix...or even a css hack, like

 * #footer { margin-top:10px; }

In your main stylesheet, but the conditonal comment is cleaner...

Answered over 7 years ago by danwellman