CSS issues in IE6 on homepage only

	Home Register Search Help Login

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

CSS issues in IE6 on homepage only

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> CSS issues in IE6 on homepage only

Page: [1]

HTML Templates, Flash Intros, Joomla!,
Wordpress, Drupal, Zen Cart, and More. Click here to shop.

ncriptide

Posts: 23
Joined: 10/2/2007
Status: offline

CSS issues in IE6 on homepage only - 1/10/2009 11:32:57

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


Tailslide Posts: 6681 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: CSS issues in IE6 on homepage only - 1/10/2009 12:05:13 It's generally not too bad in IE6 in fact. Two things that I've noticed. 1. You've got a little "duplicate text bug" going on - the final "t!"" of quit! is visible. Solutions can be found here: http://www.positioniseverything.net/explorer/dup-characters.html It's usually to do with code comments. Make sure all yours are correct - you've got a fair few coding errors there (mostly missing alt text but one incorrect closing comment tag too) 2. The footer background isn't showing properly as IE6 doesn't understand min-height. To get around this (if it's important) you could use conditional comments to add a height rule for that div just for IE6 so that it will "see" the min-height. IE6 treats height as min-height anyway. _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to ncriptide)