On this site: http://www.beaverfamilyministries.org, the site looks okay in Firefox and Safari on a Macintosh and IE7 on Windows.

I had issues with positioning problems on the whole site on Windows IE6, but I found a fix online that said to place, "display:inline" in my css on divs that I float. I did that and it fixed all pages on the site in IE6 EXCEPT the home page. When I applied that fix to the base.css stylesheet for the homepage, I still have position issues. Modules are out of place, etc. and the home page looks really crappy in IE6.

Since there are still a lot of people on IE6, I need to get it fixed. If someone have access to IE6, could you take a look and see if you tell what is going on? Maybe someone has encountered this issue before? Look at it in IE7, Firefox or Safari and you can tell how it is suppose to look.

BTW: If you do not have IE6, there is a free tester you can download called, IETester. It allows you to view your site in all versions of IE, while keeping your IE7 copy on your local. This tool has come in quite handy for me.

Here's the CSS for the homepage below.

@charset "UTF-8";
/* CSS Document */

body {
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#container {
	width:900px;
	padding:0;
	margin:0 auto;
}
#header {
	width:900px;
	margin-top:0;
	margin-left: auto;
	margin-right:auto;
	margin-bottom: 0;
	padding:0;
}
#header img {
	margin:0, auto;
	border:none;
}

.module_title {
	text-transform:capitalize;
	color:#333;
}

/******   Top Navigation    */
ul#topNav{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:36px;
	text-transform:uppercase;
	font-size:70%;
	font-weight:bold;
	background:transparent url("../images/OFF.gif") repeat-x top left;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	border-bottom:4px solid #555555;
	border-top:1px solid #919191;
}
ul#topNav li{
	display:block;
	float:left;
	margin:0;
	pading:0;}
ul#topNav li a{
	display:block;
	float:left;
	color:#4a4a4a;
	text-decoration:none;
	padding:12px 20px 0 20px;
	height:24px;
	background:transparent url("../images/DIVIDER.gif") no-repeat top right;
	}
ul#topNav li a:hover {
	background:transparent url("../images/HOVER.gif") no-repeat top right;	
	}
/*******   End Top Navigation    */

#mainContent {
	width:900px;
	margin:0 auto;
	padding:0;
}

#tv {
	float:left;
	display:inline;
	width: 190px;
	background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
	border:thin solid #666;
	margin:10px 0px;
	padding:0;
	text-align:center;
	min-height:275px;
}
#tv img {
	float:right;
	display:inline;
	margin:0;
	padding:0;
	border:none;
	text-align:center;
}
#tv h3 {
	margin-bottom:0;
	color:#900;
	font-style:italic;
}
#book {
	float:left;
	display:inline;
	width: 495px;
	background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
	border:thin solid #666;
	margin: 10px 0px 10px 5px;
	padding:0;
	text-align:center;
	min-height:275px;
}
#book img {
	display:block;
	vertical-align: middle;
	float:right;
	margin:0 auto;
	padding:0px;
	border:none;
}
#book h3 {
	margin-bottom:0;
	color:#900;
	font-style:italic;
}
#devotional {
	float: right;
	display:inline;
	width: 190px;
	background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
	border:thin solid #666;
	margin:10px 0px 10px 5px;
	padding:0;
	text-align:center;
	font-style:italic;
	min-height:275px;
}
#devotional img {
	display:inline;
	text-align:center;
	float:right;
	vertical-align: middle;
	margin:0 auto;
	padding:0;
	border:none;
}
#devotional h3 {
	margin-bottom:0;
	color:#900;
	font-style:italic;
}
#candleImg img {
	display:inline;
	width:175px;
	text-align:center;
	margin: 0 auto;
	padding:5px;
}

#warriors {
	float:left;
	/*display:inline;*/
	width: 190px;
	background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
	border:thin solid #666;
	margin:10px 0px;
	padding:0;
	text-align:center;
	min-height:275px;
}
#warriors img {
	float:right;
	display:inline;
	margin:0;
	padding:5px;
	border:none;
}
#warriors h3 {
	margin-bottom:0;
	color:#900;
	font-style:italic;
}

#soldiers {
	float:left;
	display:inline;
	width: 190px;
	background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
	border:thin solid #666;
	margin:10px 0px 10px 10px;
	padding:0;
	text-align:center;
	min-height:275px;
}
#soldiers img {
	float:right;
	display:inline;
	margin:0;
	padding:5px;
	border:none;
}
#soldiers h3 {
	margin-bottom:0;
	color:#900;
	font-style:italic;
}

#music {
	float:left;
	display:inline;
	width: 280px;
	background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
	border:thin solid #666;
	margin:10px 0px 10px 15px;
	padding:0;
	text-align:center;
	min-height:275px;
}
#music img {
	float:right;
	display:inline;
	margin:0;
	padding:5px;
	border:none;
}
#music h3 {
	margin-bottom:0;
	color:#900;
	font-style:italic;
}

#lifesavers {
	float: right;
	display:inline;
	width: 190px;
	background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
	border:thin solid #666;
	margin:10px 0px 10px 5px;
	padding:0;
	text-align:center;
	font-style:italic;
	min-height:275px;
}
#lifesavers img {
	float:right;
	display:inline;
	margin:0;
	padding:5px;
	border:none;
}
#lifesavers h3 {
	margin-bottom:0;
	color:#900;
	font-style:italic;
}
.title {
	text-transform:uppercase;
	font-size:70%;
	font-style: italic;
	padding:5px 0 5px 0px;
	margin:0;
	border-bottom:thin solid #FFF;
}
.caption {
	font-size:70%;
	line-height: 120%;
	padding:5px;
	margin-top:0;
}
#footer {
	clear:both;
	background: transparent url(../images/footer_bkgnd.gif) top left repeat-x;
	font-size:70%;
	width: 900px;
	padding:0;
	margin:0 auto;
	min-height: 50px;
}
.copyright {
	float:left;
	display:inline;
	width:600px;
	padding-left:15px;
	margin:0;
}
.credit {
	text-align:right;
	display:inline;
	float:right;
	width:250px;
	padding-right:15px;
	margin:0;
}
.credit a:link {
	color:#333;
	text-decoration: none;
}
.credit a:hover {
	text-decoration:underline;
}
#bottomSection {
	padding:0;
	margin:0;
}

Again, the "display:inline;" fixed work absolutely fantastic on all internal pages when applied to my internal.css stylesheet. Simply amazing fix. But for some reason, it does not work for the home page, so I'm thinking there are other issues. I'm fairly new at CSS, so I've probably did something extremely dumb.

Thanks!
Reggie

Ok, the first thing I noticed (after turning OFF the annoying music) when checking this out is that your floats are not properly cleared. Your #maincontent div isn't 'containing' the floated elements within it. To fix this, add overflow:auto to #maincontent.

You will have to do the same with #bottomSection, but you will also have to add width:100%, otherwise the div collapses when you add the overflow:auto;

Secondly, the display:inline fix should be done using conditional comments and a SEPARATE css file that ONLY IE6 will read. http://www.quirksmode.org/css/condcom.html . The only rules in this file will be those things needed to 'fix' IE, nothing else.

IE6 does NOT support min/max width or height, so in the separate file for IE, you're going to have to feed it a fixed height for those divs where you've used min-height. This is why your tv box isn't has high as the book box in IE6.

Once I added the height:275px to all of the separate divs, everything fell back into place in IE6.

So, you've got several things to do here to get it looking right in IE6 and working properly in the rest. You HAVE to clear your floats.

THANK YOU!!!!!! Problem resolved.

(I agree about the music . . . but they INSISTED. And since I like cashing their checks . . . music it will be ) I did talk them out of the scrolling and flashing text . . .

Made all the fixes you suggested and all is well. The only change I made was on the overflow I put in overflow:hidden. When I tried the other I got some scroll bars I didn't want.

Thanks so much LadynRed! I beat my head against the screen for most of the morning before posting. Thanks for your help.

LadynRed . . . or anyone,

I have a new problem after implementing all of those fixes.

I first noticed when I went back into BBEdit and previewed in BBEdit mode that the second column of modules in my layout were now directly underneath the top row of modules.

I thought - well, that's a BBEdit thing, so who cares. But when I previewed the site in Safari, it does the same thing.

Okay in IE7, Firefox.. . . and IE6 now has this weird extra character thing underneath the last module. It appears to be duplicating the last couple of text characters in that module.

Any idea?
------------
Okay - again - never mind.

The last container div (#bottomSection) did not have display:inline fix added. In addition, I did not have the proper code "&#8220" and "&#8221" surrounding the quotes.

Learning experience noted. . . . thanks again.

Ok, but you've got way too much in your IE6fix.css file. You ONLY need those rules needed to make IE behave.

This is just about all you need in the IE6fix.css file

#tv, #book, #devotional, #warriors, #soldiers, #music, #lifesavers{
height: 275px;
display: inline;
}

The new bug you've got with the duplicated characters -- well.. here's what it is and how to fix it: http://www.positioniseverything.net/...haracters.html



It also appears that you used overflow:hidden instead of overflow:auto - there is a distinct difference.