- This topic is empty.
-
AuthorPosts
-
April 10, 2009 at 2:39 pm #24555Historical Forums UserParticipant
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:
-
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.pngHere’s how it should look:
http://www.adgrouponline.com/redesign/help/good_ff.pngActual site:
http://www.adgrouponline.com/redesign/index2.htmThe CSS code
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!
April 10, 2009 at 3:22 pm #56111apostropheParticipantI 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.Code:#navigation li {
display:inline;
float:left;
}April 10, 2009 at 3:33 pm #56115Historical Forums UserParticipantUnfortunately that did not work. Appreciate the attempt. Any other suggestions?
April 10, 2009 at 4:10 pm #56116apostropheParticipantI’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
Code:April 10, 2009 at 4:19 pm #56117apostropheParticipantJust remembered :idea:
Try this:Code: -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.