IE Compatibility Issue.

This site is best viewed in a modern browser with JavaScript enabled.

i3a1l3y

Hi guys, I appreciate this is my first post - I am somewhat of a novice at the moment so I apologize for my flaws in advance.

I have created a website that works perfectly in the latest browsers e.g; Chrome, Firefox, IE10, Safari.

However when I run the site in earlier versions of IE, the footer looses all of its styling (css). I am completely lost as to where to begin to try and fix the problem.

<footer> 



		<foottxt><p><a href="#top" class="scroll" title="Top of page">Back to top</a></p> 
<hr> 



		<a href="index.html">Home |</a> 
		<a href="about-us.html">About Us |</a> 
		<a href="consultancy.html">Consultancy |</a> 
		<a href="sustainability.html">Sustainability |</a> 
		<a href="recruitment.html">Recruitment |</a> 
		<a href="clients.html">Clients </a> 

<fr>		          

  <div align="right">
  Copyright © 1990 - 2011 Green & Kassab Limited - Independent Management Consultants. 
  <br>Green & Kassab Limited. Company Registered in England, number 04238613 
  <br>Registered Office: The Courtyard, Shoreham Road,
  <br>Upper Beeding, Steyning, West Sussex, BN44 3TN 

  <br><br>Site by <a href="http://www.kylebailey.co.uk">Kyle Bailey</a> 
  <br> 
  </div> 



  </fr>
  </foottxt>
  </t2>

The html continues, however I want to try and get the styling of the text sorted before I move forward with positioning of other DIV's!

Here is the CSS:

foottxt{
font-style:bold;
font-size:9px;
color:white;
}

foottxt a{
font-style:bold;
font-size:10px;
text-decoration:none;
color:white;
}

foottxt a:hover{
font-style:bold;
font-size:10px;
text-decoration:underline;
}

fr {
float:right;
}

footer {
background-image: url('images/footerbg.png');
background-repeat:no-repeat;
height:200px;
margin-top:em;
}

That is a snapshot of some relevant CSS, if you want to know anything else I can add more.

Any help would be much appreciated as I have no clue right now,

Cheers,

Trips_Left

I've never seen the <foottxt> tag before, but it looks as though you're using HTML5 tags. Earlier browser versions of IE are sketchy on their support. Are you using an HTML5 shiv in your source to tell the new tags how to behave if an earlier browser is being used?

ibixxon

Dats html_5 code and its nt supported in older browsers.
If you are using float in ur layout,
Remove the footer tag, enclose the footer code in a div tag and give it an id; "footer" and add a clear float property

#footer {
background-image: url
('images/footerbg.png');
background-repeat:no-
repeat;
height:200px;
margin-top:em;
clear:both;
}
hope it helps

dstorey

Follow the instructions at http://css-tricks.com/snippets/javascript/make-html5-elements-work-in-old-ie/ and it should work. In prior versions of IE you could not style unknown elements. As these versions don't support HTML5 elements (they came out before they existed for the most part) they are treated as unknown. The shim adds JavaScript to get IE to allow them to be styled.

You do have some genuinely unknown elements in there that are not part of HTML5. You should probably replace them with a more suitable element.