Help with website in IE6

I need help with this website:
http://webpages.charter.net/jelsinger/Township-dark-blue/ It looks fine in IE7 and Firefox 3.6 but something is wrong in IE6. Since it is a government site I need it to look good in IE6 in case some people are still using that. Can someone tell me why 1) the left_top.jpg is sitting on top of the div id=“left” and 2) why the words “read more” and “view more” are cut off on the right side?

Thanks.

As always, tag soup is one thing browsers TRY to make something good out of it. They don’t always succeed.

You have invalid code, one of which being a lost </p>:

		<p>This is where you would put your text. 
		    </p>
[COLOR="Red"]</p>[/COLOR]
		<p>Not all the pages are active yet. The only page that is linked is the History and Parks pages. 	      </p>

See here for more info on your validation.

Thanks for finding that code but that still doesn’t take care of the big problem which is that big blog of blue on top of the left menu that shows up in IE6. If you aren’t looking at the web page in IE6 you probably won’t see it.

Have you gone through all the errors and fixed them? 'Cos I see you haven’t.

For the “read more” and “view more” links problem, you should try:

#right .readl a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:normal;
        font-style: italic;
	color: #0a2a95;
	text-decoration:none;
	/*[COLOR="Red"]line-height:0px;[/COLOR]*/
        border-bottom: 1px dotted #0a2a95;
        margin-right: 10px;

}

For the second one, try a screenshot. I can’t see the problem, but I don’t have IE6 either.

Question for you. Are you looking at my site using IE6?

Possibly unrelated but worth attending to regardless.

You have two instances of comments appearing without any intervening markup. This can trigger problems in IE, such as the duplicate content bug.

Change

</div><!-- end slideshow -->
<!-- content begins -->
<div id="main">

to

<!-- end slideshow --></div>
<!-- content begins --><div id="main">

and

<!--content ends -->
<!--footer begins -->
</div></div>
<div id="footer">

to

</div>
<!--content ends --></div>
<!--footer begins --><div id="footer">

Also, hopefully you’ll be making the site accessible with javascript disabled. It’s not very pretty at present.

Will peruse in IE6 now.

Why are there 4 huge background photos filling the entire page called; spring, summer autumn and winter you cannot see the content at all!

I think you better get that sorted because if like me you surf without JavaScript the majority of the time the page will be screwed-up. It most likely will be a requirement that the page is accessible without JavaScript. Also might help if you fixed the code issues before we look at it within M$IE6.

You say it’s not very pretty at present. What browser are you using? I’ve checked it out in IE8 and Firefox 3.6 and so far it’s good.

O.K. First. How do I make it accessible without JavaScript? Second. Are the code issues you refer to the ones that Victorinox pointed out? Or, are there other ones too?

The IE6 blue area problem seems due to the doubled float margin bug affecting, at least, #right.

First you should fix all the verification errors. Then try

#right {
	float: right; 
	width: 621px;
	margin-right: 4px;
	display:inline; /* fix IE6 doubled margin bug */
}

There are other doubtful things in the code, that others may home in on.

Sort out your JQuery sideshow script and CSS positioning because you have hard coded 4 images which obviously will display in the absence of JavaScript giving a height of over 1160px of images.

Added with the other CSS they just cover the page and obscure everything you probably should have used a DIV and CSS background images for the sideshow.

xhtmlcoder and I are both referring to the site as seen with javascript disabled.

A quick javascript disabled fix for the slideshow is to add overflow:hidden; to #slideshow

#slideshow {
	height: 290px;
	margin: 0;
	width: 898px;
	padding-bottom: 10px; /* typo corrected */ 
	overflow:hidden;
}

As the three additional images in the slideshow are only required when javascript is enabled, consider using jQuery to append these to the #slideshow div.

Someone may be able to offer more optimal code but e.g.

$(document).ready(function() {
var slides = '<img src="images/summer.jpg" width="898" height="290" alt="" /><img src="images/autumn.jpg" width="898" height="290" alt="" /><img src="images/winter.jpg" width="898" height="290" alt="" />';

    $('#slideshow').append(slides).cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});

Those both seem to work. The big blue blob is gone in IE6 and the pages look good when I disable JavaScript. I’ll work on the other html codes tomorrow.

I can’t thank you enough. You are very kind for helping me.