Help! IE6 doesn't scroll to bottom of my home page

[miles5150]

Hi you friendly, frolicksome people.I have a problem with the display of my first ever site in IE6. Any help would be so very much appreciated.The page is fine without a style sheet attached so it must be something to do with the style sheet but I'll be damned if I can work it out.My site addy is "justinmileswebdesigner.me.uk"and this is my default style sheet info. Admitedly, I'm working on making this style sheet more organised and compliant but if you can spot the piece of css that stops IE6 from scrolling down to the footer that would be great and I'll also learn something. Every other browser seems to be fine.Many thanksjustin -------------------------------------------------------------------------------------------------------------------/* justinmileswebdesign default CSS Style sheet */ body { font-family: Garamond, "book antigua", "Times New Roman", serif; background-image:url(../Images/Bg-border.gif); /*background-color: #669;*/ padding:0; margin:0; border:0; color:#006; } #container { background-color:#eee; width:800px; position:relative; margin:0 auto; border:0; padding:0; } #pgheader { background-image: url(../Images/Blue-page-header2.jpg); background-repeat: no-repeat; width: 800px; border: 0; border-bottom: 40px solid #eee; margin: 0; padding:0; text-align: left; height: 190px; position:absolute; top:0; left:0; } #pgheader img { border: 0; margin: 0; padding: 0; width: 351px; height: 80px; position: relative; left: 0; top: 75px; text-align:center; padding-top: 10px; font-family: "Arial Black"; }/* Top Navigation section */ #nav { font-weight:600; font-family: "lucida sans", verdana, arial, sans-serif; font-size: 14px; position:relative; top: 10px; left:0; padding: 10px 0 10px 20px; } #nav li { display: inline; } #nav ul { text-align: right; margin-right:15px; } #txtmag { position:absolute; top:0; left:0; padding: 10px; margin-top: 10px; }/* Main body styling (Including left and right column) */ #mainbod { margin:0; border:0; padding:0; color: #000; background-color:#eee; position: relative; left:0; top: 245px; width:800px; } h2 { font-size: 1.2em; border:0; padding: 0; margin: 0 0 20px 0; } h3 { font-size: 1em; border:0; padding: 0; margin:5px 0 10px 0; text-align:center; } #leftcol { /*float:left;*/ position:absolute; left:0; padding:0; border:0; background: #006 url(../Images/Left-menu_top.gif) no-repeat top left; width:150px; font-family: "lucida sans", verdana, arial, sans-serif; font-size:14px; margin: 0 0 0 5px; } #leftnav { background: url(../Images/Left-menu_bottom.gif) no-repeat left bottom; padding:0 0 20px 0; border-bottom:10px; margin:0; } #leftnav #home #cv #port #contact #info { text-align: left; margin:0; border:0; padding:0; position:absolute; left: 12px; } #maintxt { padding:0; border:0; margin:0; width:420px; position:relative; left:160px; margin:0 10px 0 10px; } #rightcol { background-image:url(../Images/right-col_gb.psd); padding:0; border:0; margin:0; width:170px; position:absolute; right:0; top:0px; margin-right: 10px; } #port ul { position:relative; left:-30px; } /* ---------- Page Styling ---------- */ #webdes { color: #fff; font-size: 24px; font-family: "Arial Black"; text-align: right; letter-spacing: 0.48em; text-transform: uppercase; padding: 0 50px 0 0; } #leftnav li { list-style: none; padding: 10px 0 0 10px; } #maintxt p { margin-top: 0; margin-bottom: 0.75em; text-align: justify; font-size: 1em; line-height: 1.6; } #maintxt ul { margin-top: 0; margin-bottom: 0.75em; text-align: justify; font-size: 1em; line-height: 1.6; } #rightcol img { padding: 0 10px 10px 0; } #maintxt a { color:#006; border-bottom: 4px solid #390; text-decoration:none; padding: 1px 3px 1px 3px; } #maintxt p { display:block; clear:both; } .portImg img { margin: 0 15px 15px 0; float:left; } #topnav a { color:#006; background-color:#eee; padding: 3px 10px 2px 10px; border-bottom: 6px solid #390; text-decoration: none; margin: 0 5px 0 0; } #topnav a:visited, #maintxt a:visited { color:#060; } #topnav a:hover, #maintxt a:hover { color:#fff; background-color:#006; } address { font-family: Garamond, "book antigua", "Times New Roman", serif; text-decoration: none; font-style: normal; } .uline { text-decoration:underline; }/* Footer styles */ #footer { text-align:center; font-family: "lucida sans", verdana, arial, sans-serif; font-size: 14px; background-color:#006; color:#fff; padding:5px 0 5px 0; } #footer li { display:inline; margin-right:5px; } #footer a:link, #leftnav a:link { color: #fff; text-decoration:none; font-weight: 600; } #footer a:visited, #leftnav a:visited { color: #ddd; text-decoration: none; font-weight: 500; } #footer a:hover, #leftnav a:hover { color: #6ff; text-decoration:underline; font-weight: 800; } #footer img {border:0; position:relative; left:-340px;}/* Image hyperlink style */ a img { border:0; }

[iyeru42]

Ouch, ouch, ouch and more ouch.Don't ever use the position element in CSS, it makes all browsers act differently.

[aspnetguy]

Ouch, ouch, ouch and more ouch.Don't ever use the position element in CSS, it makes all browsers act differently.

Please stop telling people what to do. Position is a great tool and in some cases is neccesary. I use it allt he time to make IE conform to the way all other browsers do. The most like reason for you forming this opinion is because you admitted earlier that you do not use valid code. If you do not have valid code and no doctype then of course it will behave very oddly.

[ste]

i think floating the columns inside the container should work better. also divs dont have default borders in any browser so you dont need all those border:0's

[iyeru42]

Please stop telling people what to do. Position is a great tool and in some cases is neccesary. I use it allt he time to make IE conform to the way all other browsers do. The most like reason for you forming this opinion is because you admitted earlier that you do not use valid code. If you do not have valid code and no doctype then of course it will behave very oddly.

position:absolute is one of the worst position elements you could use (Although he uses relative) for cross-browser support. For one thing, that designation of absolute will make it look different in IE and Firefox, so I never use the position elem. even with valid code.

[aspnetguy]

absolute is no worse than any other CSS attribute that doesn't render the same in all browsers. When floating divs margins and paddings add up differently in different browsers. Should we stop using float?That is why conditional comments exist. So you can adjuast things for IE.I use relative positioning 99% of the time when using position. I personally don't like absolute positioning but when used correctly it can be very useful.

[iyeru42]

absolute is no worse than any other CSS attribute that doesn't render the same in all browsers. When floating divs margins and paddings add up differently in different browsers. Should we stop using float?That is why conditional comments exist. So you can adjuast things for IE.I use relative positioning 99% of the time when using position. I personally don't like absolute positioning but when used correctly it can be very useful.

Well I usually wouldn't use conditionals (I'd use JS, because it seems more valid.) Also, the float element is pretty easy to see why it will and won't work. IE6 uses float elem. correctly just like IE7 does when used correctly.

<div style="float:right">Right Content</div><div>Left Content</div>

That will put the DIV with the float style to the right of the left content starting at the left content's border. Conversely you can use the below code to make it worse:

<div>Left Content</div><div style="float:right">Right Content</div>

[aspnetguy]

how is an HTML comment not valid? By using JS users with JS turned off will not be able to view the page correctly whereas if you use conditional comments all users will see the correct CSS.

[ste]

JMiles try replacing you stylesheet with this

/* ---------- General layout ---------- */		body			{			font-family: Garamond, "book antigua", "Times New Roman", serif;			background-image:url(../Images/Bg-border.gif);			padding:0;			margin:0;			color:#006;				}				#container		{			background-color:#eee;			width:800px;			margin:0 auto;			border:0;			padding:0;				}		#pgheader		{			background-image: url(../Images/Blue-page-header2.jpg);			background-repeat: no-repeat;			width: 800px;			border-bottom: 40px solid #eee;			margin: 0;			padding:0;			text-align: left;			height: 190px;					}						#pgheader img 	{			border: 0;			margin: 0;			padding: 0;			width: 351px;			height: 80px;			text-align:center;			padding-top: 10px;			font-family: "Arial Black";					}		#nav 			{				font-weight:600;			font-family: "lucida sans", verdana, arial, sans-serif;			font-size: 14px;			padding: 10px 0 10px 20px;				}				#nav li			{			display: inline;					}					#nav ul 		{			text-align: right;			margin-right:15px;					}						#txtmag			{			float: left;			padding: 10px;			margin-top: 10px;					}	#mainbod		{			margin:0;			padding:0;			color: #000;			background-color:#eee;			width:800px;					}	h2 			{ 				font-size: 1.2em;			border:0;			padding: 0;			margin: 0 0 20px 0;				}					h3			{			font-size: 1em;			border:0;			padding: 0;			margin:5px 0 10px 0;			text-align:center;				}				#leftcol		{					  			float:left;			padding:0;			border:0;			background: #006 url(../Images/Left-menu_top.gif) no-repeat top left;			font-family: "lucida sans", verdana, arial, sans-serif;				font-size:14px;			margin: 0 0 0 5px;					   }					   	#leftnav		  { 			background: url(../Images/Left-menu_bottom.gif) no-repeat left bottom; 			padding:0;			border-bottom:10px;			margin:0;					}						#leftnav #home #cv #port #contact #info		{			text-align: left;			margin:0;			padding:0;						}									#maintxt		{			float:left;			padding:0;			margin:0;			width:420px;						margin:0 10px 0 10px;						}						#rightcol		{			float:right;			background-image:url(../Images/right-col_gb.psd);			padding:0;			margin:0;			width:170px;					}						#footer			{			clear: both;			text-align:center;			font-family: "lucida sans", verdana, arial, sans-serif;			font-size: 14px;			background-color:#006;			color:#fff;			padding:5px 0 5px 0;								}	#port ul		{			position:relative;			left:-30px;				}												/* ---------- Page Styling ---------- */ p			{			margin-top: 0;	 		margin-bottom: 1em;	 		text-align: left;	 		font-size: 0.75em;	 		line-height: 1.6;							}			#webdes		  {			color: #fff; 			font-size: 24px; 			font-family: "Arial Black";			text-align: right;			letter-spacing: 0.48em;			text-transform: uppercase;			padding: 0 50px 0 0;					}												#leftnav li 		{			list-style: none;			padding: 10px 0 0 10px;			 			  }						  	#maintxt p 			{			margin-top: 0;	 		margin-bottom: 0.75em;	 		text-align: justify;	 		font-size: 1em;	 		line-height: 1.6;							}						#maintxt ul		{			margin-top: 0;	 		margin-bottom: 0.75em;	 		text-align: justify;	 		font-size: 1em;	 		line-height: 1.6;						}							#rightcol img	{			padding: 0 10px 10px 0;						}							#footer li			{			display:inline;			margin-right:5px;						}	#footer a:link, #leftnav a:link	{			color: #fff;			text-decoration:none;			font-weight: 600;					}	#footer a:visited, #leftnav a:visited	{			color: #ddd;			text-decoration: none;			font-weight: 500;						}		#footer a:hover, #leftnav a:hover	{				color: #6ff;			text-decoration:underline;			font-weight: 800;							}									#maintxt a			  { 			color:#006;			border-bottom: 4px solid #390; 			text-decoration:none;			padding: 1px 3px 1px 3px;							  }				   	.portImg img		{			margin: 0 15px 15px 0;			float:left;							  }		#topnav a			{			color:#006;			background-color:#eee;			padding: 3px 10px 2px 10px;			border-bottom: 6px solid #390;			text-decoration: none;			margin: 0 5px 0 0;					}	#topnav a:visited, #maintxt a:visited 		{			color:#060;					}	#topnav a:hover, #maintxt a:hover			{			color:#fff;			background-color:#006;					}						address		{			font-family: Garamond, "book antigua", "Times New Roman", serif;			text-decoration: none;			font-style: normal;					}						.uline			{			text-decoration:underline;					}						#footer img {border:0;}	a img	{ border:0; }

[miles5150]

Many thanks for your help ste,I had to fiddle with your versiion a bit to get it to display as I wanted but it seems to have done the trick.Just so I know for future reference any idea which particular css styles were responsible for the page not scrolling down to the footer in IE5. I'm still none the wiser really and it would be nice to know. I still don't really get why your version with the floats worked and mine didn't. All the best.Justin

[croatiankid]

Ouch, ouch, ouch and more ouch.Don't ever use the position element in CSS, it makes all browsers act differently.

you've most likely formed that opinion because of misinformation and a lack of knowledge of how it works.

[ste]

hi JMiles, glad you got it working

Just so I know for future reference any idea which particular css styles were responsible for the page not scrolling down to the footer in IE5. I'm still none the wiser really and it would be nice to know. I still don't really get why your version with the floats worked and mine didn't.

it happened because absolute positioning takes the element out of the flow of the document (normally each element in your html will be positioned relative to the rest of the content) e.g. block level elements (paragraphs images etc.) will display in the order they appear in the html but absolute positioning will place an object exactly where you say in pixels regardless of the document flow. heres a quote form microsoft that explains it better

Setting an absolute position pulls the element out of the flow of the document and positions it without regard to the layout of surrounding elements. If other elements already occupy the given position, they do not affect the positioned element, nor does the positioned element affect them. Instead, all elements are drawn at the same place, causing the objects to overlap. You can control this overlap by using the z-index attribute to specify the order in which elements are stacked at the same location.

so basically if elements are not in the document flow the document will not be rendered as longer than the viewport in IE. therefore no scrollbarhope this helps