Forums

Ad_Group

Hi again. I made a post yesterday regarding a text encoding issue, in which I was able to figure out not too long after. Today I come to you all with a few IE6 issues, but I will start with the one I am having trouble figuring out on my own.

Problem:
[list]The navigation that uses CSS sprites is displaying very oddly in IE6, only showing a rehash of the Home link.[/list:u]

Here's how it looks in IE6:
http://www.adgrouponline.com/redesign/help/bad_ie6.png

Here's how it should look:
http://www.adgrouponline.com/redesign/help/good_ff.png

Actual site:
http://www.adgrouponline.com/redesign/index2.htm

The CSS code


body {
	background-image: url(../images/bg.png);
	background-repeat: repeat-x;
	background-color: #000000;
	font-size: 12px;
	color: #FFFFFF;
}

ul, ol {list-style: none; margin: 0px 0 5px 0; }

h1 { margin-top: 15px; }
.clear { clear: both; }
img { border: none; }

/* Links */


a:link {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: underline;
}
a:visited {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: underline;
}


a:active {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: underline;
}
a:hover {
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	text-decoration: underline;
}

/* Wrapper */

#wrapper { margin: 0 auto; width: 965px; }


/* Navigation */

#navigation {
width: 966px;
height: 41px;
position: relative;
background: url(../images/navigation*-trans.png);
margin-bottom: 10px;
padding: 0;
}

#navigation li {
float: left;
}

#navigation li a {
position: absolute;
top: 0;
margin: 0;
padding: 0;
display: block;
height: 41px;
background: url(../images/navigation*-trans.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
}

/*up state*/
li#nav_home a {
left: 67px;
width: 111px;
background-position: -67px 0;
}

li#nav_about a {
left: 178px;
width: 204px;
background-position: -178px 0;
}

li#nav_services a {
left: 382px;
width: 180px;
background-position: -382px 0;
}

li#nav_portfolio a {
left: 562px;
width: 187px;
background-position: -562px 0;
}

li#nav_contact a {
left: 749px;
width: 151px;
background-position: -749px 0;
}

/*hover state*/
li#nav_home a:hover {
left: 67px;
background-position: -67px -40px;
}

li#nav_about a:hover {
left: 178px;
background-position: -178px -40px;
}

li#nav_services a:hover {
left: 382px;
background-position: -382px -40px;
}

li#nav_portfolio a:hover {
left: 562px;
background-position: -562px -40px;
}

li#nav_contact a:hover {
left: 749px;
background-position: -749px -40px;
}

/*current state*/
#body_home li#nav_home a {
background-position: -67px -80px;
}

#body_about li#nav_about a {
background-position: -178px -80px;
}

#body_services li#nav_services a {
background-position: -382px -80px;
}

#body_portfolio li#nav_portfolio a {
background-position: -562px -80px;
}

#body_contact li#nav_contact a {
background-position: -749px -80px;
}


/* Header */

#body_home #header			{ position: relative; margin: 0 0 10px 0; background:url(../images/home_header*-trans.png); width: 965px; 									height: 410px; }
#body_about #header			{ position: relative; margin: 0 0 10px 0; background:url(../images/about_header*-trans.png); width: 965px; 								height: 410px; }
#body_services #header		{ position: relative; margin: 0 0 10px 0; background:url(../images/services_header*-trans.png); width: 965px; 								height: 410px; }
#body_portfolio #header		{ position: relative; margin: 0 0 10px 0; background:url(../images/creative_header*-trans.png); width: 965px; 								height: 410px; }
#body_contact #header		{ position: relative; margin: 0 0 10px 0; background:url(../images/contact_header*-trans.png); width: 965px; 								height: 410px; }
#body_adthemes #header		{ position: relative; margin: 0 0 10px 0; background:url(../images/adthemes_header*-trans.png); width: 965px; 								height: 410px; }
#body_clients #header		{ position: relative; margin: 0 0 10px 0; background:url(../images/clients_header*-trans.png); width: 965px; 								height: 410px; }
#body_podcast #header		{ position: relative; margin: 0 0 10px 0; background:url(../images/podcast_header*-trans.png); width: 965px; 								height: 410px; }
#body_careers #header		{ position: relative; margin: 0 0 10px 0; background:url(../images/careers_header*-trans.png); width: 965px; 								height: 410px; }
#body_awards #header		{ position: relative; margin: 0 0 10px 0; background:url(../images/awards_header*-trans.png); width: 965px; 								height: 410px; }
#body_thanks #header		{ position: relative; margin: 0 0 10px 0; background:url(../images/contact_header*-trans.png); width: 965px; 									height: 410px; }

#emblem		{ height: 79px; width: 131px; position: relative; left: 880px; }

/* Bar */	

#bar		{ background: url(../images/horizontal_bar*-trans.png) no-repeat; width: 965px; height: 30px; margin: 0; padding: 0; }

.news		{ position: relative; top: 7px; left: 10px; }


/* Left Column */

#body_careers #left_column	{ margin: 0px 20px 0px 20px; width: 630px; float: left; display: inline;}
#body_thanks #left_column	{ margin: 0px 0px 0px 0px; width: 955px; float: left; display: inline; }
#body_awards #left_column	{ margin: 0px 0px 0px 0px; width: 955px; float: left; display: inline;}
#body_contact #left_column	{ margin: 0px 20px 0px 20px; width: 630px; float: left; display: inline; }
#body_podcast  #left_column	{ margin: 0px 10px 0px 0px; width: 690px; float: left; display: inline; }
#body_clients  #left_column	{ margin: 0px 15px 0px 0px; width: 350px; float: left; display: inline; }
#body_services #left_column	{ margin: 0px 20px 0px 10px; width: 600px; float: left; display: inline; }
#left_column	{ margin: 0px 20px 0px 10px; width: 440px; float: left; display: inline;}

#body_services #left_column { font-size: 11px; }
#left_column p	{ font-family: \"Lucida Grande\", Arial, sans-serif; line-height: 1.7em; }

.list1		{ float: left; padding-left: 0px }
.list2		{ float: left; padding-left: 20px }
.list3		{ float: left; padding-left: 20px }

#left_column li	{ font-family: \"Lucida Grande\", Arial, sans-serif; font-size: 11px; line-height: 1.7em; }

/* Center Column Clientel Only */

#body_clients  #center_column	{ margin: 0px 15px 0px 0px; width: 350px; float: left; }

/* Right Column */

#right_column	{ margin: 0px 5px 0px 10px ; width: 475px; float: left; display: inline;}

#body_careers #right_column		{ margin: 0px 0px 0px 30px; width: 250px; display: inline;}
#body_contact #right_column		{ margin: 0px 0px 0px 30px; width: 250px; display: inline; }
#body_podcast  #right_column	{ margin: 0px 0px 0px 10px ; width: 245px; float: left; display: inline; }
#body_clients  #right_column	{ margin: 30px 5px 0px 0px ; width: 230px; float: left; display: inline;}
#body_services #right_column	{ margin: 0px 10px 0px 10px ; width: 315px; float: left; display: inline; }
#body_services #right_column li { list-style: none; }

#body_podcast #right_column p { font-family: \"Lucida Grande\", Arial, sans-serif; line-height: 1.5em; font-size: 11px; }
#right_column p { font-family: \"Lucida Grande\", Arial, sans-serif; line-height: 1.7em;}

#body_services #right_column p { font-family: \"Lucida Grande\", Arial, sans-serif; line-height: 1.6em; font-size: 11px; }

#featured_print { float: left; }

#featured_print p 	{ float: left; font-family: \"Lucida Grande\", Arial, sans-serif; line-height: 1.5em; }

#featured_links { margin: 0; display: inline; }

#featured_links li { display: block; float: left; padding-right: 10px; }

#featured_links a { text-decoration: underline; font-weight: bold; }

#featured_links a:hover { text-decoration: underline; font-weight: bold; }

#featured_links a.selected { text-decoration: none; color:#666666; }

#load-area a {text-decoration: underline;}

/* Line */

.line { background:url(../images/line*-trans.png) no-repeat; width: 954px; height: 6px; margin: 0 auto; }

/* Boxes */

#boxes		{ margin-top: 20px; padding-left: 5px; }
#boxes a	{ border: none; text-decoration: none; }

.padding	{ margin-right: 2px; }

/* Featured Divs */

.float_right { float: right; margin-left: 10px; }
.float_left { float: left; margin-right: 20px; }

/* Footer */

#footer { width: 954px; margin: 0 auto; padding-bottom: 5px; }

#footer { text-align: center ; }

#copyright a	{ font-family: Arial, Helvetica, sans-serif;
					color: #FFFFFF;
					text-decoration: underline;
					margin-left: 3px;
}

#copyright a:hover {
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	text-decoration: underline;
	margin-left: 3px; 
}

#footer a { margin-left: 10px; }
#footer a:hover { margin-left: 10px; }
#footer a:active { margin-left: 10px; }
#footer a:visited { margin-left: 10px; }


/* ABOUT PAGE */

.president{  margin-right: 10px; float: left;  font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 10px; }

.adgroup_team { float: left; margin-right: 10px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 10px; }


/* Portfolio Filter Stylesheet */


/*****Custom Classes*****/
.clearing { clear: both; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }

/*****Basic Layout*****/
div#container { margin: 10px auto 0; overflow: hidden; width: 900px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

ul#filter { float: left; font-size: 13px; list-style: none; margin-top: 7px; margin-left: 40px; width: 100%; }
ul#filter li { 
	float: left;
	line-height: 16px;
	margin-right: 10px;
	padding-right: 10px;
}
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #999; text-decoration: none; }
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #FFFFFF; font-weight: bold; }

ul#portfolio { float: left; list-style: none; margin-left: 0; width: 900px; }
ul#portfolio li {  
	float: left; 
	margin: 0 10px 10px 0; 
	padding: 5px;
	width: 100px;
}
ul#portfolio a { display: block; width: 100%; }
ul#portfolio a:hover { text-decoration: none; }
ul#portfolio img { display: block; padding-bottom: 5px; }


/* Contact Page */

.our_office { color: #FFFFFF; font-size: 11px; }

#body_contact #right_column p { color: #DEDEDE; font-size: 11px; line-height: 1.3em; }

/* Careers Page */

#body_careers #right_column p { color: #DEDEDE; font-size: 11px; line-height: 1.3em; }
/* Clientele Page */

#body_clients .client_list li { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #AEAEAE; line-height: 1.7em; }

#body_clients h2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }

.testimonial_name { float: right; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #AEAEAE; text-align: right; }

.balloon_position { margin-top: 30px; }

/* Podcast Page */

#body_podcast ul 	{ font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #AEAEAE; line-height: 1.5em; padding-left: 0px; margin: 0px; }
#body_podcast #right_column li	{ list-style: disc; margin-left: 20px; }
#body_podcast #right_column a		{ text-decoration: none; }

/* Thanks Page */

#body_thanks h3 { margin: 15px;}

I am trying to get the site up in a few hours to meet my deadline. With that said, I'm standing by patiently for anyone willing to help. Much appreciated!

apostrophe

I just tried a couple of the other pages in IE NetRenderer and they all come up stuck on the home tab.
Off the top of my head the first thing I would suggest is to add display: inline to your list items.

#navigation li {
display:inline;
float:left;
}

Ad_Group

Unfortunately that did not work. Appreciate the attempt. Any other suggestions?

apostrophe

I'm on a Mac here, but I'm pretty sure your problem is IE6s inability to cope with absolute positioning. After digging out this article http://www.satzansatz.de/cssd/onhavinglayout.html you could try display: inline-block or adding this to your head

     
<!--[if lte IE 6]>
 <style>
  .gainlayout { height: 1px; }
 </style>
<![endif]-->

apostrophe

Just remembered :idea:
Try this:

<!--[if lt IE 7]>
    <script src=\"http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js\" type=\"text/javascript\"></script>
<![endif]-->

treehouse : what would you like to learn today?

Forums

Final stages of site: Need help on some IE6 fixes