Reputation:
I created my website's header and footer in a separate html file and I am embedding those files in my web pages.
After all the hard work and completing the website I came across an error in IE8. My header and footer are aligned all over the place in IE7 & 8.
<footer>
<div id="divObjFooter">
<object data="/footer.html" type="text/html">
</object>
</div>
</footer>
Update - fixed for any version running html5 Finally found a way to support ie any version.
<!--[if IE]>
<div id="footer">
<div id="divObjFooter">
<iframe src="footer.html"> </iframe>
</div>
</div>
<![endif]-->
<![if !IE]>
<footer>
<div id="divObjFooter">
<object data="footer.html" type="text/html"> </object>
</div>
</footer>
<![endif]>
Upvotes: 0
Views: 7490
Reputation:
<!--[if IE]>
<div id="footer">
<div id="divObjFooter">
<iframe src="footer.html"> </iframe>
</div>
</div>
<![endif]-->
<![if !IE]>
<footer>
<div id="divObjFooter">
<object data="footer.html" type="text/html"> </object>
</div>
</footer>
<![endif]>
Upvotes: 0
Reputation: 201588
To answer first the question in the title: IE has supported the object
element since IE 4 (though early implementations were lousy). Your problem does not seem to be with that element but with your styling of the footer
element – a completely different issue.
The footer
element is not supported by IE 7 and IE 8. This matters little as such, since the default effect would be just making the element content a block, and your content is already a block (a div
element). What causes the trouble is that you have some CSS rules that set properties on the footer
element. This won’t work on IE 7–8, since they do not recognize the element even in the sense of letting you style it.
There is a quick fix: put the following before your first style sheet or reference to any style sheet:
<script>document.createElement('footer')</script>
This is effectively what many “shims” or “polyfills” or whatever you call them are doing, and if you have an issue with footer
only, you might use just the quick fix.
Alternatively, set your CSS rules on the div
inside, using the #divObjFooter
selector.
P.S. Using object
(or iframe
) to include a footer is possible, but clumsy. It will include an HTML file in a subwindow of the document window, and links won’t work normally etc. If at all possible, it is better to use server side tools, like Server-Side Includes (SSI) or their more advanced counterparts, or page management software.
Upvotes: 0
Reputation: 7765
Check the website Can I Use for browser support of HTML5
and CSS3
before you use new tags and selectors against your target audience.
IE<10 supports very little (less then 40%) modern html and css. You will likely have to use modernizr or something similar or simply not use the latest "shiny"
Upvotes: 0
Reputation: 2202
ie8 and earlier do not support HTML5 tags (in your case, the <footer>
tag), and therefore do not style them. To get around this, you could simply use div
's with id's and style them from there, or, if you want to use the latest and greatest HTML5 stuff, you can use an html5 shiv.
I would recommend the script hosted on Google code: https://code.google.com/p/html5shiv/
Upvotes: 1