Forum Moderators: not2easy
I would be extremely grateful if someone could take a look at this and give me some advice on making the site more cross-browser (read IE) friendly.
<css snippets>
html {
height: 100%; }
body {
background: #bbb;
font-family: "Trebuchet MS", arial, sans-serif;
font-size: 11pt;
height: 100%; }
#container {
min-height: 100%;
width: 100%;
position: relative; }
#footer {
background: url(/images/menu/gradient_28.gif);
border-top: 1px solid #333;
font-size: 70%;
height: 24px;
line-height: 24px;
margin-top: -26px;
position: relative;
text-align: center;
width: 100%; }
<endcss>
<html snippets>
<html>
<body>
<div id="container">
<...content here...>
</div>
<div id="footer">
<...footer content...>
</div>
</body>
</html>
<endhtml>
If I can provide any more information, please let me know.
Thanks in advance
Matt
If I can provide any more information, please let me know.
I tested in IE7, with a "complaint, standards rendering" Doctype and all was well.. I switched to "quirky" one and all went a bit pear shaped!
So some history and a fact if life - IE6 and below does not support min-height so even if you have a compliant Doctype you to be aware that all might look well in IE7, but it ain't necessarily so for all the IE users out there ;)
other than that if you can describe what you're seeing as opposed to what you'd like to see then that will also help!
First off, my doctype looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Now, I haven't tested in IE7 but as I understand it, IE7 is much more compatible with FF and other standards compliant browsers.
My problem is IE6. In FF etc, the footer is stuck to the bottom of the window regardless of the size of the content on the page. In IE6, the footer is right underneath the content as if it directly followed the content div. I can provide some screenshots if my explanation isn't sufficient.
I have heard that IE6 does not support min-height etc, I just haven't got a clue how to apply a workaround for the IE6 users.
Thanks
Matt
height: 100%
to the container div, the footer does work in IE, the problem is that it breaks in the other browsers I've been testing.
I've tried various things including conditionally loading an IE specific stylesheet but nothing seems to work.
Does anyone have a clue how to resolve this?
Thanks
Matt
