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.

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, 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 to a separate file. The IE-specific style sheet and script 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 to a separate file. The IE-specific style sheet and script 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.