Hi there in my site here, the footer looks great in All browsers except IE 8.

http://apollo.skookumx.com/category

The footer should just have a grey background and link color... anyone know what the story is with that?? Would be greatly appreciated.

#footer {
background-color: #4B4B4B !important;
color: #DEE2E3;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
margin-left: auto;
margin-right: auto;
text-transform: none;
width: 1140px;
}

also tried a hack like this

#footer {
background-color: #4B4B4B !important;
background-color: #4B4B4B\9; /* IE8 and below */
color: #DEE2E3;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
margin-left: auto;
margin-right: auto;
text-transform: none;
width: 1140px;
}

And for those without IE8 the problem is??????



And does it really matter? Because people still using IE8 probably won't even know or care about colour differences.

Just an FYI, you have broken href tags (missing the closing element). That could cause a problem too. Try fixing that and see if it helps.

Here is one of the code that is now fixed:

<ul> <li><a href="/jobs/Academic+Affairs">Academic Affairs Jobs</a></li> <li><a href="/jobs/Accounting_Finance_Purchasing">Accounting/Finance/Purchasing Jobs</a></li> <li><a href="/jobs/Administration">Administration Jobs</a></li> <li><a href="/jobs/Enrollment_Marketing">Enrollment/Marketing Jobs</a></li> <li><a href="/jobs/Human+Resources">Human Resources Jobs</a></li> <li><a href='/category'><strong>View All Categories</strong></a></li></ul> </li> </ul>


and here is the other area of code that is now fixed:

<ul> <li><a href="/jobs/location/Birmingham%2C+AL">Birmingham, AL Jobs</a></li> <li><a href="/jobs/location/Braintree%2C+MA">Braintree, MA Jobs</a></li> <li><a href="/jobs/location/Columbia%2C+MD">Columbia, MD Jobs</a></li> <li><a href="/jobs/location/Columbus%2C+OH">Columbus, OH Jobs</a></li> <li><a href="/jobs/location/Costa+Mesa%2C+CA">Costa Mesa, CA Jobs</a></li> <li><a href='/location'><strong>View All Locations</strong></a></li></ul> </li> </ul>

An image showing what the page looks like in IE8 would be helpful, though I'd first fix the link Lisa mentioned above to see if that does the trick.

Thanks all for taking a look.

I'm not sure what youmean about the unclosed element though... For example, this is what I see in the source code that includes the closing </a>

<a href="/jobs/Academic+Affairs/">Academic Affairs (8)</a>

I can provide a screen capture if you want but it's basically just white at the bottom in IE 8 where it should be black. Here's a screen cap of IE8... http://i.imgur.com/hZppX.png


And yes, it's still important unfortunately to make stuff look good in IE8... especially when your client is complaining about it.

http://www.w3schools.com/browsers/browsers_explorer.asp

Sadly, IE8 is used more than IE9...

You do realise that IE8 doesn't 'know' what a <footer> element is, and therefore has no way of applying style rules to it.

No, I did not... thanks.

Originally Posted by Reckoner

Thanks all for taking a look.
I'm not sure what you mean about the unclosed element though... For example, this is what I see in the source code that includes the closing </a>

When I viewed your source code in IE8, I saw that you had one main closing </a>. But each of the items within the list need to have their own. Thus, it was showing up broken in the browser. The code I provided in the past post shows what is fixed.

For example the code I saw via view source was:
<li><a href="/jobs/Academic+Affairs">Academic Affairs Jobs</li>

But it should be:
<li><a href="/jobs/Academic+Affairs">Academic Affairs Jobs</a></li>

Originally Posted by chrishirst

You do realise that IE8 doesn't 'know' what a <footer> element is, and therefore has no way of applying style rules to it.

Chrishirst does have a good point. You can get around it if you are using javascript.
Such as:
<script>
document.createElement("footer");
</script>
You can learn more about it here: http://net.tutsplus.com/tutorials/ht...ctly-even-ie6/

Thanks, I fixed that footer issue but just replacing <footer> with a <div> and applied the same styles to it

Hmm, I'm now concerned with that unclosed tag in IE8... will see if it effects things. Not sure how that would be happening.

Just tested by clicking around testing in IE8 and things looked fine.

Should be okay for now.. thanks for looking here everybody!