IE6 Problem with CSS <li> not showing

Le_Design · September 26, 2007, 12:28am

Hi guys,

I was ask to make an update to a website and what I though was something simple turned out to be HELL! I add the list to the page and it works fine in Safari_Mac & Win ,Firefox_Mac & Win and IE7.

THe problem is that in IE6 is not showing up the first to items of the list? (see example)

www.acumentum.com

If any of you guy could help would be great I spend 2 days already and can’t find the answer.

CSS


body {
	margin: 0;
	padding: 0;
	font-family: Lucida Grande,Verdana, Arial, Helvetica, sans-serif;
	font-size: .7em;
	background: url('/images/pagebg.gif') left repeat-y;
	color:#363636;
}

* {
	margin: 0;
	padding: 0;
}

li {
	list-style-position: inside;
}

a img {
	border: 0;
}


/* Link Styles */

a {
	color: #663366;
}

a:hover {
	color: #000;
}

/* Page Header */

div#header {
	width: 100%;
	height: 89px;
	background: url('/images/headerbg.jpg') no-repeat left #641b53;
}

div#header h1 {
	float: left;
	width: 185px;
	height: 47px;
	background: url('/images/logo.gif') no-repeat;
	text-indent: -9999px;
	margin-left: 20px;
	margin-top: 25px;
	margin-right: 30px;
}


/* Page Navigation */

div#navigation {
	margin: 0;
	padding: 0;	
}

div#navigation ul {
	list-style: none;
	margin: 0 0 0 0;
	padding: 60px 0 0 0;
}

div#navigation ul li {
	float: left;
	list-style: none;
}

/* Breadcrumb */
div#content div#breadcrumb ul
{
  font-size:10px;
  padding:0;
  margin:0px 0px 20px 0px;
  list-style:none;
  display:block;
  width:100%;
  margin-left:0px; 
  overflow:auto; 
  color:#666;
}

div#content div#breadcrumb ul li
{
  display:inline;
  
}

div#content div#breadcrumb ul li a
{
  padding-right:4px;
}

/*TABS*/

div#navigation ul li a {
	margin-left: 5px;
}

div#navigation ul li a#tab_home {
	float: left;
	background: url('/images/tab_home.jpg') no-repeat;
	width: 70px;
	height: 29px;
	text-indent: -9999px;
}
div#navigation ul li a#tab_home:hover {
	background: url('/images/tab_homehover.jpg') no-repeat;
}

div#navigation ul li a#tab_products {
	float: left;
	background: url('/images/tab_products.jpg') no-repeat;
	width: 70px;
	height: 29px;
	text-indent: -9999px;
}
div#navigation ul li a#tab_products:hover {
	background: url('/images/tab_productshover.jpg') no-repeat;
}

div#navigation ul li a#tab_services {
	float: left;
	background: url('/images/tab_services.jpg') no-repeat;
	width: 70px;
	height: 29px;
	text-indent: -9999px;
}
div#navigation ul li a#tab_services:hover {
		background: url('/images/tab_serviceshover.jpg') no-repeat;

}
div#navigation ul li a#tab_casestudies {
	float: left;
	background: url('/images/tab_casestudies.jpg') no-repeat;
	width: 81px;
	height: 29px;
	text-indent: -9999px;
}

div#navigation ul li a#tab_casestudies:hover {
	background: url('/images/tab_casestudieshover.jpg') no-repeat;
}

div#navigation ul li a#tab_whoweare {
	float: left;
	background: url('/images/tab_whoweare.jpg') no-repeat;
	width: 81px;
	height: 29px;
	text-indent: -9999px;
}

div#navigation ul li a#tab_whoweare:hover {
		background: url('/images/tab_whowearehover.jpg') no-repeat;

}
div#navigation ul li a#tab_careers {
	float: left;
	background: url('/images/tab_careers.jpg') no-repeat;
	width: 70px;
	height: 29px;
	text-indent: -9999px;
}
div#navigation ul li a#tab_careers:hover {
	background: url('/images/tab_careershover.jpg') no-repeat;
}

div#navigation ul li a#tab_contactus {
	float: left;
	background: url('/images/tab_contactus.jpg') no-repeat;
	width: 70px;
	height: 29px;
	text-indent: -9999px;
}
div#navigation ul li a#tab_contactus:hover {
	background: url('/images/tab_contactushover.jpg') no-repeat;

}

/* Banner */

div#taglinebacking {
	height: 100px;
	background: #ebebeb url('/images/banners/BANNER_whoweare2.jpg') no-repeat right bottom;
}

div#taglinebacking h2 {
	font-family: Calibri, Arial Narrow, Arial, Helvetica, sans-serif;
	font-size: 2.0em;
	font-weight:bold;
	color:#444;
	margin: 15px 0px 0px 181px;
	padding: 0px 0px 0px 28px;
	display:block;
}

div#topcorner {
  position:absolute;
  left:181px;
}

div#noflashtext {
  margin-top:60px;
  margin-left:30px;
  font-weight:bold;
  font-family:Arial Narrow, Arial, Helvetica, Sans Serif;
  color:#fff;
  font-size:22px;
  display:none;
}

/* Sidebar */

div#sidebar {
	float: left;
	background: transparent url('/images/sidebarbg.jpg') no-repeat top left;
	width: 181px;
	margin: 0;
	padding: 0;
}

/* Sidebar Navigation */
#subnavigation {
  float:left;
  margin-bottom:30px;
  margin-top:140px;
}

#navcontainernocontent {
  height:60px;
  width:50px;
}

div#extranet {
	
	/*padding: 10px 0px 0px 0px;*/
	float:left;
}
	/*
div#extranetpanel{
  display:none;
}*/
	
div#sidebar ul li {
	list-style-type: none;
	margin: 0px 0px;
	text-align: right;
	float: right;
	width: 160px;
	padding: 7px 10px 13px 10px;
	background: url('/images/listitembg.jpg') no-repeat bottom right;
}

div#sidebar ul li a {
	font-size: .9em;
	color: #777;
}

div#sidebar ul li a:hover {
	color: #222;
}

div#sidebar h3 {
	float: left;
	font-size: 11px;
	color: #562050;
	width: 160px;
	padding: 10px 5px 10px 15px;
	background: url('/images/sidebar_h3_bg.gif') repeat-x;
}

div#sidebar h4 {
	font-size: 11px;
	color: #541f53;
	margin-bottom: 0;
	margin-right: 10px;
	text-align: right;
}

/*
div#sidebar input, select {
	font-size: 11px;
	margin: 5px 5px;
}

div#sidebar label {
	font-size: 10px;
	margin: 5px 15px;
}


div#extranet form {
float: left;
margin-left: 10px;
	margin-top: 10px;
}

*/

div#extranet{
  
  padding:0px;
  width:180px;
}

div.formwrapper {
  
  float:left;
  margin:15px;
  width:145px;
}

form#searchForm input{
  border:0px solid #ffffff;
  color:#666;
}

div#extranet form#extranet input{
  border:1px solid #B6B4B7;
  margin:0px;
  width:140px;
}


div#extranet form#extranet input#extranetgo{
  width:24px;
  height:24px;
  border:none;
  margin-right:0px;
}

/* Right hand sidebar */

div#sidebar2 {
	float: right;
	background: #fff url('/images/sidebar2bg.gif') left repeat-y;
	padding:0;
	margin: 0;
	border-bottom: 1px solid #ccc;
}

div#sidebar2 h3 {
	width: 141px;
	margin-top: 0;
	color: #666;
	font-weight: bold;
}

/* Case Studies */

div#casestudies {
	clear: right;
	margin: 25px 0px 30px 30px;
	padding: 0;
	
}

h3#casestudies_heading {
	background: url('/images/casestudiesheading.gif') top left no-repeat;
	height: 45px;
	margin-left: -1px;
	margin: 0;
	text-indent: -9999px;
}



/* Content */

div#content {
	margin-left: 181px;
	margin-right:141px;
	background: url('/images/contentbg.gif') top left no-repeat;

}

div#contentpadder {
	margin: 0 28px;
	padding-top:20px;
}

/* Content Typography */

div#content h2 {
	font-size: 17px;
	letter-spacing: 1px;
	font-family: Calibri, Arial Narrow, Tahoma,  arial, verdana, tahoma;
	border-bottom: 1px solid #ccc;
	color: #444;
	font-weight: bold;
}

div#content p {
	line-height: 17px;
	font-size: 11px;
	margin: 1em 0;
}

div#content ul {
	margin-left:0;
	font-size: 11px;
}

div#content ul li {
	margin:5px 0;
}

/* Search */

div#search{
	float:right;
}

div#search img{
	margin:0px 5px;
}

/* Boxes */

div#boxes {
	display:block;
	overflow: auto;
	width: 100%;
	margin: 20px 0px;
}

div#boxes *{
	margin:0;
	padding:0;
	border-color:#e2e2e2;
	border-width:1px;
}

div#boxes ul li, div#boxes ul{
	list-style:none;
	list-style-position:outside;
}

/* New */

div#News{
	float:left;
	height:405px;
	width:50%;
	border-top-style:solid;
	border-right-style:solid;
	border-bottom-style:solid;
	margin-bottom:20px;
}

div#News h3 {
	margin:0;
	padding:8px 0px;
	border-bottom-style:solid;
	font-size: 0.7em;
}

div#boxes div#News ul li {
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
  background-color:#fafafa;
  margin-right:0;
  padding:10px;
}

/* Presentation */

div#Presentations{
	display:block;
	height:405px;
	margin-left:0px;
	float:left;
	border-top-style:solid;
	border-bottom-style:solid;
	width:49%;
}

div#Presentations h3 {
	margin:0px 20px 20px;
	padding:8px 0px;
	border-bottom-style:solid;
	font-size: 0.7em;
}

div#Presentations img {
	float:left;
	margin:0;
	padding-right: 16px;
}

div#Presentations ul li {
	background-color:#FAFAFA;
	border-bottom:1px solid #EEEEEE;
	border-top:1px solid #EEEEEE;
	margin-left:15px;
}

div#Presentations li {
	padding: 10px;
}

/* Awards */

div#Awards{
	display:block;
	clear:both;
}
div#Awards li{
	float:left;
	padding-right:2em;
}

/* Footer */

div#footer {
	clear: both;
	border-top: 1px solid #eee;
	padding-top: 10px;
	padding-bottom: 15px;
	color: #fff;
	margin-top: 20px;
	margin-bottom:0px;
	margin-left:181px;
	font-size: 10px;
	overflow:auto;
	height:80px;
}

div#footer img {
	float: right;
	padding-right: 15px;
}
	
div#footer p {
	color: #666;
	margin: 0px 20px;
	padding: 4px 0px 2px 0px;

	color: #666;
}
div#footer ul li a {
	color: #666;
	font-weight: bold;
}
div#footer ul {
	margin: 0 15px;
	padding: 0;
	list-style: none;
	font-color: #666;

}

div#footer ul li.first {
	border-left: none;
}

div#footer ul li {
	display: inline;
	padding: 0px 5px;
	border-left: 1px solid #ccc;
}

div#footer ul li:first-child {
	border-left: none;
}


/* Sitemap */

td div#tree{
	font-size:11px;
}

td div#tree a{
	text-decoration:none;
}

td div#tree .link_general{
	text-decoration:underline;
}

div#sitemapwrapper #Body_Content h2{
	width:100%;
}

.clearF {
	clear:both;
}

HTML

<h3>Presentations</h3>
<ul>
    <li><img src="/images/acumentumlogo_transparent.gif" alt="Acumentum Logo" /> <a target="popup" href="/acumentum_flash_launch/infomercial/infomercial.html" onclick="wopen('/acumentum_flash_launch/infomercial/infomercial.html', 'popup', 740, 520); return false;">Acumentum Process</a><br />Watch this animated presentation to find out more about how we work.<div class="clearF"></div></li>
	
    <li><img src="/images/sblogo.gif" alt="ScenarioBuilder Logo" /> <a target="popup" href="/acumentum_flash_launch/SB_infomercial/infomercial.html" onclick="wopen('/acumentum_flash_launch/SB_infomercial/infomercial.html', 'popup', 740, 520); return false;">What is ScenarioBuilder&trade;?</a><br />Watch this animated presentation to learn how ScenarioBuilder&trade; can benefit your organisation.<div class="clearF"></div></li>
</ul>

<h3>Victorian Government e-Services Panel</h3>

<ul>
    <li><a href="http://www.vgpb.vic.gov.au/CA256C450016850B/0/12745BCF0F07F25ACA257029001C4F8C?OpenDocument"><img src="/images/victorian_logo.gif" alt="Victorian government logo" /></a>The Victorian Government has appointed Acumentum to the <a href="http://www.vgpb.vic.gov.au/CA256C450016850B/0/12745BCF0F07F25ACA257029001C4F8C?OpenDocument">eServices Panel</a> until 2010 recognising our high standards of ICT service to the government.<a href="/public/redirect.jsp?id=361"><br />Find out more</a><br /><div class="clearF"></div></li>
</ul>

Topic		Replies	Views
Ie6 & css web dev	0	97	February 19, 2009
IE6 little tiny bug web dev	0	97	August 19, 2007
List Items Display wrong in IE? web dev	2	150	July 1, 2008
CSS / Javascript woes	0	36	September 2, 2004
IE CSS Problem web dev	0	100	January 20, 2009

IE6 Problem with CSS <li> not showing

Follow:

Popular

Loose Ends

IE6 Problem with CSS <li> not showing

Related topics

Follow:

Popular

Loose Ends