Unwanted space below my footer in Google Chrome only

HTML & CSS
1

I have a problem with my website. Please see www.designshampoo.com/index2.html

In all other browsers, everything looks fine, however in Chrome there is some unwanted space below the footer.

I know what is causing the issue however I am not sure how to fix it.

This is the css that is causing the issue:


.left {
 width: 439px;
 float: left;
}

.right  {
 width: 439px;
 float: right;
}

When I remove it the issue fixes itself but obviously I still want to maintain the style that this css is giving minus the unwanted space. I am not sure exactly what the issue is with the code as I have used similar code before.

Your time and help is greatly appreciated.

Thanks

Johnny

2

Hi Johnny, Welcome to Sitepoint :slight_smile:

The large image after the floated lists needs to be cleared. You already have a class named .clear in your CSS so just use it.

It’s best to keep inline elements separated from other block level elements as it has been known to cause problems in IE if they are siblings.

Nest that image in a div and then give that div the clear class.

<ul class="right">
<li>Special rates for NHS &amp; students</li>
<li>Patient, friendly Instructors</li>
</ul>

[COLOR=Blue]<div class="clear">[/COLOR]
    <img src="img/homeMain.jpg" alt="Pass with Purdy?s Driving &amp; Instructor Training Vehicles" title="Pass with Purdy?s Driving &amp; Instructor Training Vehicles">
[COLOR=Blue]</div>[/COLOR]

</div> <!-- main -->
3

Not what you asked about, but you should take a look at your page in IE7 (IE6, too, but who cares about that one?!). Your navigation tabs do something strange in that browser.

4

Hi Rayzur,

Thanks for you reply, that has fixed the problem!

EarlyOut, thanks for your comment. I was already aware of that issue in IE7 and already have a fix for that.

I hear a lot of other people are supporting the current and previous browser only these days although the person for who I am coding this site is specifically asking for it to work in IE7. What are peoples thoughts on this?

It’s good to know that this forum is covering all bases!

Thanks for all your time and help you beautiful people!

5

IE7 is still roaming around out there. On my own sites, visitor percentages for IE7 are now down into the mid-single digits, however, and dropping fast. IE9 is already accounting for more visitors than IE7. IE8 runs just fine on WinXP, so there aren’t many good excuses for sticking with IE7.

I have the luxury of not doing stuff for commercial sites, so I take a “close enough” approach to IE7. In other words, as long as the page looks and behaves pretty much the same, I’m not going to bother trying to track down small differences in spacing and positioning.

IE6 is a tougher one to deal with, of course. There are still huge numbers of IE6 users in China, for example. Dealing with the coding changes needed to accommodate it can be miserable. But I figure if people like Google Apps and Facebook can throw the IE6 users to the wolves, so can I. :slight_smile: