IE CutOff problem

[paul8agrape]

I am working on a site right now that is only in test mode but having a strange problem. I am new to CSS, so be gentle. :p

This is one of the pages - http://rain.edchinn.com/Published/WarriorsRain.shtml

CSS code is below. In Mozilla, the site comes through fine but in IE, it cuts off every article right at the end above the Copyright line. Can anyone tell what I've done wrong?


body {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
font-family:arial, verdana, sans-serif;
font-size:76%;
}

* html body {
padding:80px 0 50px 0;
overflow:hidden;
}

/* for internet explorer */

#container {
font-family:Georgia;
font-size: 1.2em;
position:fixed;
top:80px;
left:0;
bottom:80px;
right:0;
overflow:auto;
background:#D2C491;
color:#000000;
}

* html #container {
height:100%;
width:100%;
}

h1 {
color:#3D5801;
}

h2 {
color:#614215;
}

h3 {
color:#000055;
}

h4 {
color:#000055;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
}

a:link {
color: #3D5801;
}
a:visited {
color: #000055;
}

q:before, q:after {
content: ""; }

blockquote, ul.disc {
color: #000055;
font-weight: bold;
}

ul.disc {list-style-type: disc;
}

#header {
position:absolute;
top:0;
left:0;
width:100%;
height:80px;
overflow:auto;
color:#FFFFFF;
}
* html #header {height:80px;}


#footer {
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:80px;
overflow:hidden;
text-align:right;
color:#FFFFFF;
background:#000000;
}
* html #footer {height:80px;}

[codeexploiter]

I've used IE 7 the page looks exactly similar that in Firefox 2.0 though in IE 7 it throws a JavaScript error on Line 63.

[paul8agrape]

Yeah I saw that error in IE6 2 days ago but didn't see it yesterday. ?? But I have no idea what the error is for. My CSS file isn't 63 lines, so I'm not sure exactly what the problem is.

[paul8agrape]

The java error is gone now, but i'm still curious to see if anyone knows how to fix this for IE6. Most of the people viewing the page will not be upgraded to IE7 yet.

[mwinter]

Implementing a layout like the one you have is not trivial without fixed positioning. It can be produced using Microsoft's CSS expressions, which require scripting. I'd propose that you leave it for MSIE 6 and other browsers without fixed positioning support. I think it looks good enough without it.

See my implementation (http://www.mlwinter.pwp.blueyonder.co.uk/dd/ed-chinn/warriors.html), for example. It contains a few typographical adjustments (character replacements). It's a nicely written piece, by the way.

Mike

[paul8agrape]

Wow, thanks. I like what you've done except that in IE6, the whole page scrolls instead of just the middle container section.

Once I get this worked out completely, feel free to email me (paul8agrape@gmail.com) your full name and i'll give you cred in the source code. I like to attribute help where I get it. :)

[paul8agrape]

Wow...it's like my website blew up. I can barely get anything to work right now. I've tried using mwinter's idea and it seemed to be working for a while and then blew up.

Take a look at this site now. http://rain.edchinn.com/ As you can see, i have div sections (header and footer) that point to ssi files for header and footer. But in the website now, the header picture is the picture that is supposed to be in header. ???? And the footer is beyond f'd up.

Below is the style.css file I'm using now. I've also tried using the style that mwinter suggested earlier in this post. I rreally have no idea what's going on. Everything was close to working and its like everything just suddenly blew up. I have not even an inkling of a clue what's going on. :( I would be eternally grateful if anyone can shed light on this. My goal is to have a pretty simple layout with header (where menu will go over background), footer (with the name of the website over the background) and a content section for all the articles. I need it to work in Firefox and IE6. I'm going to go cry now. lol


* CSS Document */

/* the bit that does the work */

body {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
font-family:arial, verdana, sans-serif;
font-size:76%;
overflow: hidden;
}

* html body {
padding:80px 0 50px 0;
}

/* for internet explorer */

#container {
font-family:Georgia;
font-size: 1.2em;
position:absolute;
top:80px;
left:0;
bottom:80px;
right:0;
overflow:auto;
background:#D2C491;
color:#000000;
}

* html #container {
height:100%;
width:100%;
}

h1 {
color:#3D5801;
}

h2 {
color:#614215;
}

h3 {
color:#000055;
}

h4 {
color:#000055;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
}

a:link {
color: #3D5801;
}
a:visited {
color: #000055;
}

q:before, q:after {
content: ""; }

blockquote {
color: #000055;
font-weight:bold;
}


ul.disc {list-style-type: disc;
}


#header {
position:absolute;
top:0;
left:0;
width:100%;
height:80px;
overflow:auto;
color:#FFFFFF;
}
* html #header {height:80px;}


#footer {
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:80px;
overflow:auto;
text-align:right;
color:#FFFFFF;
background:#000000;
}
* html #footer {height:80px;}

/* end of bit that does the work */

[mwinter]

Wow, thanks. I like what you've done except that in IE6, the whole page scrolls instead of just the middle container section.

As I wrote, MSIE doesn't support fixed positioning prior to version 7. I've updated the example to provide compatibility for IE 5-6, but IE 4 is excluded. If scripting is disabled, IE 5 and 6 will render the document as you previously saw it. I've also moved the style sheet (http://mwinter.webhop.info/dd/ed-chinn/common.css) to a separate file. The IE-specific style sheet (http://mwinter.webhop.info/dd/ed-chinn/ie6-fix.css) and script (http://mwinter.webhop.info/dd/ed-chinn/ie6-fix.js) are also independent.

In case you didn't notice, I edited the images you used for the header and footer. You should too: much of the image isn't rendered, so there seems little point transmitting the extra data. I actually resized the footer. The header was edited to be a better horizontally repeating image.



Once I get this worked out completely, feel free to email me (paul8agrape@gmail.com) your full name and i'll give you cred in the source code. I like to attribute help where I get it.

Thank you, though that's not really necessary.



Wow...it's like my website blew up. I can barely get anything to work right now. I've tried using mwinter's idea and it seemed to be working for a while and then blew up.

If you didn't previously, replace the style sheet you were using with what I wrote, and tweak that. The approach you were trying just won't work in IE (except perhaps version 7).



i have div sections (header and footer) that point to ssi files for header and footer.

And it appears that you are trying to include style elements in those server-side includes. The style element may only occur as a child of the head element. The same applies to the link element.



But in the website now, the header picture is the picture that is supposed to be in header.

You are applying the background images to the body element, not the header or footer.



And the footer is beyond f'd up.

The footer is where it's supposed to be, but the content doesn't stretch that far because previous versions of IE cannot use both the top and bottom box offset properties. This is why the code I posted calculates the height dynamically.



font-size:76%;

It's not particularly nice to reduce the font size by that much; that's the minimum allowed size specified in my browser which is still below my comfortable reading limit. In fact, body text should remain at 100%.



font-family:Georgia;

Font family specifications should include a generic from that family - serif, in this case. Not every visitor may have the fonts you specify.



font-size: 12px;

Avoid pixel (and point) font sizes, at least for screen media. These cannot be resized in IE, which is a bad thing. Also consider that 12px might be readable on one display at a given resolution, but not on a different monitor or at a different resolution. Use percentages, instead.

Hope that helps,
Michael.

My surname should be obvious. :)

[paul8agrape]

So what would be the best way for me to add content to the header/footer. For instance, I plan to use a Flash or Javascript menu in the header. Would I just add a code to every page the header will appear on, or can I add it to the style sheet?

Thanks again for the help. I'm learning so much about CSS, and you've been a true life saver. :)

[paul8agrape]

As I wrote, MSIE doesn't support fixed positioning prior to version 7. I've updated the example to provide compatibility for IE 5-6, but IE 4 is excluded. If scripting is disabled, IE 5 and 6 will render the document as you previously saw it. I've also moved the style sheet (http://mwinter.webhop.info/dd/ed-chinn/common.css) to a separate file. The IE-specific style sheet (http://mwinter.webhop.info/dd/ed-chinn/ie6-fix.css) and script (http://mwinter.webhop.info/dd/ed-chinn/ie6-fix.js) are also independent.


Yeah I don't need the site to be compatible with IE 4 or 5. So can I include the IE-specific style with the main style sheet as you had previously? Or you're saying to just link to both of them independently? Same with the javascript?

A while back, someone else suggested that I put this at the top of my CSS page for IE6

html {
overflow:hidden;
}

body {
height:100%;
overflow:auto;
}

And to set header and footer elements to:


position:absolute;

instead of

position:fixed;

I'd like to keep everything in one file if I can but if I do, indeed, need 3 seperate css files (well 1 javascript) I can live with that.

[mwinter]

So what would be the best way for me to add content to the header/footer.

That depends on the nature and variability of the content. If the content (including background images) of the header and footer are linked (when one changes, so does the other), then clearly the header can reference what both need for the style sheet. If they are independent then you might add various style sheet rules to be included by the header for all appropriate footers and use an id selector to choose the right one.



Yeah I don't need the site to be compatible with IE 4 or 5.

In this case, coping for the failures of IE 6 pretty much take care of IE 5.x. IE 4 degrades acceptably with no extra effort.



So can I include the IE-specific style with the main style sheet as you had previously?

They were always separate: I never included the IE 5.x/6-specific rules with those for other browsers.



Or you're saying to just link to both of them independently? Same with the javascript?

Why get browsers that don't need them to download and parse them? Keep them separate.



A while back, someone else suggested that I put this at the top of my CSS page for IE6

html {
overflow:hidden;
}

body {
height:100%;
overflow:auto;
}

And to set header and footer elements to:


position:absolute;

instead of

position:fixed;

They were wrong. It doesn't work.

To use absolute positioning instead of fixed positioning, one needs to absolutely-position everything and set both the top and bottom box offset properties for the middle-most element. Prior to IE 7, doing this was simply ignored. Rather than calculate the height automatically as it should, IE simply ignored the bottom property declaration and acted as though only the top property had been specified. The content will then continue off the bottom of the viewport. One cannot set the height to anything appropriate because the height of the viewport less the top and bottom parts cannot be known in advance.

It would be possible if the top and bottom parts had a percentage height, though rounding errors are bound to happen then. Even so, you don't have percentage heights, nor are they appropriate for your design.

Mike

[paul8agrape]

Well apparently, I'm still being stupid. Everything is still a huge mess for me. lol

I'm trying everything on the same page - http://rain.edchinn.com/Published/WarriorsRain.shtml

In Mozilla, the header fonts are small but appear large how I want them in IE6. I'm sure I didn't do the js right as far as how I incoporated it. But my style.css and IE.css stylesheets are exactly as you'd suggested as is the js. I've tried also putting the js file in the body tag as well as inserting the script instead of just doing a call to the js file. None of it has worked. I also can't get any of thi to scroll the middle section. :(

[mwinter]

http://rain.edchinn.com/Published/WarriorsRain.shtml

You haven't included the conditional comments that I used in my demonstration, and for some reason you're using an embed element for the script rather than a script element.

Mike

[paul8agrape]

Okay sorry...I see I totally screwed it up. Okay, this is the link now http://rain.edchinn.com/Published/WarriorsRain.html (html instead of shtml since i'm not using SSI).

Its still formatted crazily...and yes I know I have to be doing something wrong. Contents of style.css, IE.css, and IE6-fix.js below:

I appreciate your patience. I promise I'll get there!

style.css

* {
margin: 0;
padding: 0;
}
blockquote, ul, .copyright {
background: transparent;
color: #000055;
font-weight: bolder;
}
h1, .author {
background: transparent;
color: #3d5801;
margin: 0.5em 0;
text-align: center;
}
html, body {
background: #d2c491;
color: #000000;
}
blockquote {
margin: 0 2.5em;
}
body {
font: 100%/1.2 Georgia, "Times New Roman", serif;
padding: 80px 0;
}
h1 {
font-size: 170%;
font-weight: bold;
}
p {
margin: 0.75em auto 0;
}
p+p {
margin-top: 0;
text-indent: 1.5em;
}

.header, .footer {
height: 80px;
width: 100%;
position: fixed;
left: 0;
}
.header {
background: #293857 url(../images/EdClouds2.jpg) repeat-x;
top: 0;
}
.container {
margin: 0 auto;
max-width: 60em;
padding: 0.5em;
}
.author {
font-size: 110%;
}
.copyright {
font-size: 85%;
font-style: italic;
font-weight: bolder;
margin-top: 2em;
text-align: center;
}
.footer {
background: #000000 url(../images/Raindropsthorns.jpg) no-repeat;
bottom: 0;
}

IE.css

body {
padding-top: 0;
padding-bottom: 0;
}
body * {
font-size: 100%;
}
.header, .footer {
position: static;
}

IE6-fix.js

// JavaScript Document
var Tools = function () {
return {
createElementCallback: function (tagName) {
return function (node) {
return isElement(node, tagName);
};
},
getFirstChild: function (parent, test) {
var node = parent.firstChild;
if (node) return test(node) ? node : this.getNextSibling(node, test);
return null;
},
getNextSibling: function (node, test) {
while ((node = node.nextSibling))
if (test(node)) return node;
return null;
},
getPreviousSibling: function (node, test) {
while ((node = node.previousSibling))
if (test(node)) return node;
return null;
},
getRootElement: function () {
if ((typeof document.compatMode == 'string')
&& (document.compatMode.indexOf('CSS') != -1)
&& document.documentElement)
return (this.getRootElement = function () {
return document.documentElement;
})();
else if (document.body)
return (this.getRootElement = function () {
return document.body;
})();
return null;
},
isElement: isElement
};

function isElement(node, tagName) {
return (node.nodeType == 1)
&& (tagName ? (node.nodeName == tagName) : (node.nodeName != '!'));
}
}(),
lengthToPx = function () {
return function (length, element) {
var match = /(\d+(\.\d*)?)(pt|px|em)?$/i.exec(length),
result = NaN;
if (match) {
var value = +match[1];
switch (match[3]) {
case 'pt':
result = computePointRatio() * value;
break;
case 'em':
result = computeFontSize(element) * value;
break;
case 'px':
case '':
result = value;
break;
}
}
return Math.round(result);
};

function computePointRatio() {
var ratio;
with (document.createElement('div').style) {
width = '1pt';
pixelWidth = 1500;
ratio = pixelWidth / posWidth;
}
return (computePointRatio = function () {
return ratio;
})();
}
}();

function computeFontSize(element) {
var scale = 1,
match;

while ((match = /(\d+(\.\d*)?)(%|em)/i.exec(
element.currentStyle.fontSize))) {
scale *= +match[1];
if (match[3] == '%') scale /= 100;
element = element.parentNode;
}
return Math.round(lengthToPx(element.currentStyle.fontSize, element) * scale);
}
function computeLetterboxHeight() {
var container = Tools.getFirstChild(document.body, isContainer),
padding = 0;

if ((typeof document.compatMode == 'string')
&& (document.compatMode.indexOf('CSS') != -1))
padding = lengthToPx(container.currentStyle.paddingTop, container)
+ lengthToPx(container.currentStyle.paddingBottom, container);

return Tools.getRootElement().clientHeight
- Tools.getPreviousSibling(container, Tools.isElement).offsetHeight
- Tools.getNextSibling(container, Tools.isElement).offsetHeight - padding;
}
function isContainer(node) {
return Tools.isElement(node) && /(^|\s)container(\s|$)/.test(node.className);
}

document.attachEvent('onreadystatechange', function () {
if (document.readyState != 'complete') return;

with (Tools.getFirstChild(document.body, isContainer).style) {
overflow = 'auto';
setExpression('height', 'computeLetterboxHeight()');
}
Tools.getRootElement().style.overflow = 'visible';
});

[mwinter]

http://rain.edchinn.com/Published/WarriorsRain.html

Its still formatted crazily...and yes I know I have to be doing something wrong.

Your HTML is incorrect: replace the br element with a h1 end-tag. Whilst you editing, remove the slashes at the end of the meta and link elements.

You don't need to post the script and style sheets in your posts. I can get them quite easily as long as you post a link to the document. :)

Mike

[paul8agrape]

Okay so I was being stupid. :) Still some problems tho. The font for the H1 element is much smaller in Mozilla than IE6. I thought it was because of the primary font family (Georgia), so I changed it to Arial...still not right. Also, aside from the screwed up fonts, the middle container element still isn't scrolling in either Mozilla or IE6. :confused:

[mwinter]

I forgot to mention that the id attribute on the "container" div element should be a class attribute.

You should remove the align attribute on the h1 element.

Mike

[paul8agrape]

I still have the same problem with the title in Mozilla. And the container element still isn't scrolling in either browser.

[mwinter]

You're referencing the IE-only style sheet outside of the conditional comments, and the files referenced by those elements within don't seem to exist.

Mike

[paul8agrape]

Okay things are much better. Sorry I've had a lot going on and just haven't been paying close enough attention. I've got the page behaving exactly as I want in IE6. I had to specify the locations of the files (as you can see from the code) since all css files and the js file are in the root of my web.

Now the problem is it doesn't behave the same way in Mozilla. lol

[mwinter]

I've got the page behaving exactly as I want in IE6. I had to specify the locations of the files (as you can see from the code) since all css files and the js file are in the root of my web.

Now the problem is it doesn't behave the same way in Mozilla.

As I wrote,



You're referencing the IE-only style sheet outside of the conditional comments...

The file, IE.css, shouldn't exist. Its contents - assuming it's identical to the style sheet I wrote - should be placed in the ie6-fix.css file, which doesn't exist but should.

Mike

[paul8agrape]

Awesome. I seem to have it all working pretty good.

Couple of minor questions...

* The only difference b/w Firefox and IE seems to be that in Firefox, all the text in the article is centered instead of just the title and byline.

* On the main page (still under construction) - http://rain.edchinn.com, the image is not centered vertically in Firefox. I'm guessing there's some different coding I have to use with the table stuff?

These are very minor problems, but I appreciate the help more than you know.

Update...in talking with another person who is heavily into web design, he is suggesting that I do away with the scrolling middle container so that all of the articles are visible. I'm just curious what your opinion is also. Is the way I'm doing it now an old school method and looked at as a "no no"?

[mwinter]

The only difference b/w Firefox and IE seems to be that in Firefox, all the text in the article is centered instead of just the title and byline.

The container element is centred, given enough horizontal space, but the text is left-aligned. IE 7 supports the max-width property, so it will render similarly to Firefox, Opera, and the like. IE 6 doesn't, so the text will take up the entire width of the viewport.



On the main page (still under construction) - http://rain.edchinn.com, the image is not centered vertically in Firefox. I'm guessing there's some different coding I have to use with the table stuff?

Yes, don't use a table. :) See Lauri Raittila's Vertical centering using CSS (http://www.student.oulu.fi/~laurirai/www/css/middle/) for better options. You'll probably need to use absolute positioning and a negative margin.

Remove the slash at the end of img start-tag, and preferably avoid presentational attributes (like align) and elements (like center) in favour of CSS.



Update...in talking with another person who is heavily into web design, he is suggesting that I do away with the scrolling middle container so that all of the articles are visible. I'm just curious what your opinion is also. Is the way I'm doing it now an old school method and looked at as a "no no"?

You mean removing the fixed upper and lower images so that the text takes the full viewport height? Fixed positioning can often be wasted space. It's certainly not a good idea to position menus and such that way, but a little decoration isn't so much of a problem. It would be better if the height of those images could be reduced.

If media queries were well supported, I would have suggested creating a rule that did away with those images when the viewport is small.

Mike

[paul8agrape]

Thanks for the help, and I'll use it if I'm going to use an image but for now, I'm not.

Page seems to be coming along okay except the footer isn't visible in IE anymore. I made some small changes (just a small footer that will probably contain some copyright message). I've moved the footer image to the top and done away with the previous header graphic. But the site won't scroll in IE again. LOL I've gone through the code several times and don't see what's screwing it up. :mad:

Disregard the header menu...haven't decided on one yet...just playing around with different things.

[mwinter]

Page seems to be coming along okay except the footer isn't visible in IE anymore. I made some small changes (just a small footer that will probably contain some copyright message). I've moved the footer image to the top and done away with the previous header graphic. But the site won't scroll in IE again. LOL I've gone through the code several times and don't see what's screwing it up. :mad:

You've made the footer a child of the "container" div element, rather than its sibling. The code I wrote expects to find a "container", as well as two sibling elements - one before and one after the "container". If any of these are missing, the script will raise an exception as it will attempt to access properties of null. It could have been written to be more defensive, but there didn't seem to be much point at the time as it was to solve a specific problem.

Mike

[paul8agrape]

Oh wow...funny the things i can overlook after staring at code for a couple of hours. I fixed it. Once again, thanks for all your help and have a very merry Christmas. I'll leave you alone for now. ;)