Footer messed up in IE 7 only?

HTML & CSS
1

This is my site with the problem: http://www.sports-central.org

Scroll to the bottom for the footer area. It looks perfect in Safari and Firefox, but I loaded it on IE 7 at work and the footer is all messed up!

I have no idea why it is doing this and my designer is MIA. I’m pissed because 40% of my audience might be seeing this messed up version.

Any ideas or solutions would be GREATLY appreciated! :slight_smile:

2

Hi, the floats are just snagging on each other :). It would be best for you to rework the HTML so that a containing element is surrounding the word on the left AND the <ul> and then float:left;clear:left that.

Right now you could add a clearing element after each <ul> and that will force the floats to be cleared and not snag.

Reworking the HTML to whta I proposed would be best and would remove the need of unneeded clearing elements :slight_smile:

3

Thanks, Ryan! Could you tell me exactly what I need to change to make it compatible in IE? I’m really not a tech/coder type and unfortunately, my designer is not around. I would appreciate you explaining it to me like a toddler. :slight_smile: I can send you the actual CSS files if that would help.

4

After each <ul> closes add this into your code (this is the easiest, though not the best way, the best way is to rework the HTML as described above)

<br class="clear" />

After each <ul> closes add that in, and now add htis CSS in

.clear{clear:both;height:0;font-size:0;}

No need to send the CSS files since I can view them online :slight_smile:

5

Man I gave up on IE7 a long time ago. By now everyone should be using IE8.

6

IE6/7 probably take up near 2/5ths of the market alone…a rough estimate :). IE users are very slow to upgrade. You should continue support for them.

7

Ryan, tried adding that code after each </ul> closes in my footer include file, and added that .clear code to the CSS file (master.css). But it still doesn’t load right in IE. Can you tell me what to do now? I wasn’t sure where in the CSS file to put the .clear code you gave me, so I put it in the part where some other .clearfix codes were (I also tried putting it at the bottom with the footer part). Help!

8

It is working, the code however isn’t. If that makes sense :).

The styles aren’t being applied for wahtever reason. It’d be best to fix your CSS and HTML validation errors to find out why.
The code DOES work though. I know for a fact.

9

Try giving the ul in the footer a width.

e.g.


    #footer ul {
        float: left;
    [B]    width:525px;[/B]
        margin: 0; }

I assume you know that IE6 is broken but I guess you aren’t supporting that.

10

Everything worked out via me and the OP through PM :). Just so everyone knows, IE6 just had a double float margin bug going on and the sidebar needing to be floated instead of letting it rest against the floated sidebar.