Berniew Posted June 22, 2006 Share Posted June 22, 2006 I am having trouble with IE when trying to use fixed headers and footers on a page unless I use quirks mode. I want to use a different CSS styles sheet for IE and do away with the quirk mode to achieve the same effects as in other browsers. I have been struggling with this for a few days and have not been able to find a way to do this with out using quirks mode.Can someone point me in the right direction? <!-- Limpid ? IE in quirks mode --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head><title>Fixed footer</title><style type="text/css"> body{ margin:0; padding: 100px 0 100px 0; } div#header{ position:absolute; top:0; left:0; width:100%; height: 100px; background-color: #99CCFF;} div#footer{ position:absolute; bottom:0; left:0; width:100%; height:50px; background-color: #99CCFF; } @media screen{ body>div#header{ position: fixed; } body>div#footer{ position:fixed; } } * html body{ overflow:hidden; } * html div#content{ height:100%; overflow:auto; }</style></head><body><div id="header"> <h1>This is a fixed header</h1></div><div id="content"><pre>This is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is contentThis is content</pre></div><div id="footer"> <h3>This is a fixed footer</h3></div></body></html> Link to comment Share on other sites More sharing options...
S@m Posted June 22, 2006 Share Posted June 22, 2006 Yeah, IE is a pile of crap. :)Have you tried conditional commenting? Put this in your header: <link rel="stylesheet" type="text/css" media="all" href="defaultstyle.css" /><!--[if IE]><link rel="stylesheet" type="text/css" media="all" href="styleforIE.css" /><![endif]--> That will give you 1 style sheet for IE and 1 for everyone else. Link to comment Share on other sites More sharing options...
Berniew Posted June 22, 2006 Author Share Posted June 22, 2006 Thank you for replying S@m.What makes this work in IE is the first line of text in the HTML file: <!-- Limpid ? IE in quirks mode --> I have tried different ways of doing the styles for IE with various workarounds using only IE specific styles in a separate CSS stylesheet to no avail. In IE everything looks great until you start to scroll the page then the header and footer scroll with the content instead of remaining in their fixed positions. Link to comment Share on other sites More sharing options...
S@m Posted June 22, 2006 Share Posted June 22, 2006 Well, by using the code I posted, you can make changes to whatever you want in the style sheet for IE and it won't effect any other browsers. It also allows you to keep your HTML validated. Link to comment Share on other sites More sharing options...
Err Posted June 23, 2006 Share Posted June 23, 2006 (edited) This might be of some intrest, I did this page, it's css and xhtml strict valid, ([removed]], which I can't manage to avoid) best of all it works in IE as well as other browsers. I needed help doing something like this some time ago, and set up an example page. Feel free to take any code you wish, css and xhtml are all on the same page. You can look at it here:[removed] Edited November 12, 2009 by RahXephon Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now